附加產品搜索欄

Question

現在我用下面的代碼

// Display Fields 
add_action('woocommerce_product_options_general_product_data', 'woo_add_custom_general_fields'); 
function woo_add_custom_general_fields() { 


    global $woocommerce, $post; 


    echo '<div class="options_group">'; 


    // Custom fields will be created here... 

// Product Select 
?> 
<p class="form-field product_field_type"> 
<label for="product_field_type"><?php _e('Product Select', 'woocommerce'); ?></label> 
<select style="width:100%" id="product_field_type" name="product_field_type[]" class="ajax_chosen_select_products" multiple="multiple" data-placeholder="<?php _e('Search for a product&hellip;', 'woocommerce'); ?>"> 
    <?php 
     $product_field_type_ids = get_post_meta($post->ID, '_product_field_type_ids', true); 
     $product_ids = ! empty($product_field_type_ids) ? array_map('absint', $product_field_type_ids) : null; 
     if ($product_ids) { 
      foreach ($product_ids as $product_id) { 

       $product  = get_product($product_id); 
       $product_name = woocommerce_get_formatted_product_name($product); 

       echo '<option value="' . esc_attr($product_id) . '" selected="selected">' . esc_html($product_name) . '</option>'; 
      } 
     } 
    ?> 
</select> <img class="help_tip" data-tip='<?php _e('Your description here', 'woocommerce') ?>' src="<?php echo $woocommerce->plugin_url(); ?>/assets/images/help.png" height="16" width="16" /> 
</p> 
<?php 

    echo '</div>'; 

} 

，顯示下面的產品領域，但不能正常工作

但我希望產品搜索如下圖片

我使用下面的網站代碼

http://www.remicorson.com/mastering-woocommerce-products-custom-fields/

Answer 1

您正在使用woocommerce插件。要篩選價格範圍，顏色，尺寸和其他字段的產品，您可以使用另一個woocommerce插件「woocommerce產品過濾器」。你可以使用yith插件來搜索產品。如果您想爲整個網站提供搜索工作，而不僅僅是用於用戶dave的實時搜索插件的產品。

Dave's live search plugin

Yith products search plugin

Answer 2

我試圖最近找出我的一個客戶端同樣的問題。我最初使用相同的教程在後端爲他添加一個自定義產品搜索輸入字段，並且當我們將他更新到WooCommerce 2.5+時，它就會崩潰。

要將產品搜索小插件/字段添加到後端：

?> 

    <p class="form-field product_field_type"> 
    <label for="product_field_type_ids"><?php _e('Component Products:', 'woocommerce'); ?></label> 

     <input type="hidden" class="wc-product-search" style="width: 50%;" id="product_field_type_ids" name="product_field_type_ids" data-placeholder="<?php esc_attr_e('Search for a product&hellip;', 'woocommerce'); ?>" data-action="woocommerce_json_search_products" data-multiple="true" data-exclude="<?php echo intval($post->ID); ?>" data-selected="<?php 
         $product_ids = array_filter(array_map('absint', (array) get_post_meta($post->ID, '_product_field_type_ids', true))); 
         $json_ids = array(); 

         foreach ($product_ids as $product_id) { 
          $product = wc_get_product($product_id); 
          if (is_object($product)) { 
           $json_ids[ $product_id ] = wp_kses_post(html_entity_decode($product->get_formatted_name(), ENT_QUOTES, get_bloginfo('charset'))); 
          } 
         } 

         echo esc_attr(json_encode($json_ids)); 
        ?>" value="<?php echo implode(',', array_keys($json_ids)); ?>" /> <?php echo wc_help_tip(__('Select component parts to display on the product page.', 'woocommerce')); ?> 
    </p> 

    <?php 

拯救：（保存在同一個ID int數組格式與現有的領域，所以你不必從頭開始與您現有的數據庫條目）

$my_product_ids = isset($_POST['product_field_type_ids']) ? array_filter(array_map('intval', explode(',', $_POST['product_field_type_ids']))) : array(); 
    update_post_meta($post_id, '_product_field_type_ids', $my_product_ids ); 

要顯示在前端：（同前）

global $post; 
$items = get_post_meta($post->ID, '_product_field_type_ids', true); 
if (! empty($items)) { 
     foreach ($items as $product_id) { 
      echo '<div class="productLink"><a href="'.get_permalink($product_id).'">'.get_the_title($product_id).'</a></div>'; 
     } 
    } 

Answer 3

我從追加銷售複製了此代碼。這只是搜索表單。

<p class="form-field"> 
     <label for="upsell_ids"><?php _e('Up-sells', 'woocommerce'); ?></label> 
     <select class="wc-product-search" multiple="multiple" style="width: 50%;" id="upsell_ids" name="upsell_ids[]" data-placeholder="<?php esc_attr_e('Search for a product&hellip;', 'woocommerce'); ?>" data-action="woocommerce_json_search_products_and_variations" data-exclude="<?php echo intval($post->ID); ?>"> 
      <?php 
      $product_object = new WC_Product($post->ID); 
      $product_ids = $product_object->get_upsell_ids('edit'); 

      foreach ($product_ids as $product_id) { 
       $product = wc_get_product($product_id); 
       if (is_object($product)) { 
        echo '<option value="' . esc_attr($product_id) . '"' . selected(true, true, false) . '>' . wp_kses_post($product->get_formatted_name()) . '</option>'; 
       } 
      } 
      ?> 
     </select> <?php echo wc_help_tip(__('Up-sells are products which you recommend instead of the currently viewed product, for example, products that are more profitable or better quality or more expensive.', 'woocommerce')); ?> 
</p> 

Answer 4

This answer是一個很好的起點，但也有使與該產品搜索領域已經從input變化與type=hidden的select有multiple屬性的最新WooCommerce版本這項工作需要做一些改變。

後端輸入字段

可以使用WooCommerce加售的領域，你可以找到here on GitHub的後臺HTML，爲自己的後端領域的模板。

保存後端輸入字段

您可以使用下面的代碼檢索選定的項目，有IDS保存爲後期薈萃。

$my_product_ids = isset($_POST['product_field_type_ids']) ? array_map('intval', explode(',', (array) $_POST['product_field_type_ids'])) : array(); 
update_post_meta($post_id, '_product_field_type_ids', $my_product_ids);