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>';

}

显示在产品领域下方但无法正常工作

enter image description here

但我希望产品搜索如下图

enter image description here

我在下面的网站上使用代码

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

Answer 1

我最近试图为我的客户找出同样的问题。我最初使用相同的教程在后端为他添加自定义产品搜索输入字段，当我们让他更新到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 2

This answer是一个很好的起点，但需要进行一些更改才能使用最新的WooCommerce版本，其中产品搜索字段已从input更改为type=hidden select具有multiple属性。

后端输入字段

您可以使用WooCommerce upsells字段的后端HTML，您可以找到here on GitHub作为您自己后端字段的模板。

保存后端输入字段

您可以使用以下代码检索所选项目，并将其保存为post meta。

$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);

Answer 3

我从up-sells复制了这个代码。这只是搜索表单。

<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

您正在使用woocommerce插件。要过滤价格范围，颜色，大小和其他领域的产品，您可以使用另一个woocommerce插件＆woocommerce产品过滤器＆＃39;。您可以使用yith插件搜索产品。如果您想为整个网站提供搜索工作，不仅仅针对产品用户dave的实时搜索插件。

Dave's live search plugin

Yith products search plugin

在woo-commerce产品页面添加产品搜索字段

4 个答案: