Woocommerce产品内同一类别的产品下拉列表简短描述 [英] Products dropdown from same category inside Woocommerce product short description

问题描述

在Woocommerce中，我想在产品简短描述中添加一个下拉列表，以显示所有具有相同类别的产品。如果可以进入所选产品的产品页面，那就更好了。

In Woocommerce, I would like to add a drop down in product short description that shows all products that have the same category(ies). It will be even better if it was possible to go to the product page of the selected product.

我没有看到可以满足我所要执行的操作的任何线程。

I didn't see any threads that fulfill what I am trying to do.

任何帮助将不胜感激。

推荐答案

2020 Update 4 -添加了 product_id 作为参数，允许将短代码用于定义的产品ID（例如在页面上）。

2020 Update 4 - Added product_id as argument, allowing the shortcode to be used for a defined product ID (for example on a page).

以下内容将创建一个自定义的简码，您可以在产品的简短说明（甚至产品说明）中使用它，并显示与当前产品相同的产品类别的下拉列表。

The following will make a custom shortcode that you can use in your product short description (or even in the product description) and will display a dropdown from same product category than the current product.

代码：

add_shortcode( 'products_dropdown', 'wc_products_from_cat_dropdown' );
function wc_products_from_cat_dropdown( $atts ) {
        // Shortcode Attributes
        $atts = shortcode_atts( array(
            'product_id' => '', 
        ), $atts, 'products_dropdown' );
        
    $product_id = is_product() ? get_the_id() : $atts['product_id'];
    
    if ( empty($product_id) )
        return;

    ob_start();

    $query = new WP_Query( array(
        'post_type'      => 'product',
        'post_status'    => 'publish',
        'posts_per_page' => '-1',
        'post__not_in'     => array( $product_id ),
        'tax_query' => array( array(
                'taxonomy' => 'product_cat',
                'field'    => 'ids',
                'terms'    => wp_get_post_terms( $product_id, 'product_cat', array( 'fields' => 'ids' ) ) ,
        ) ),
    ) );

    if ( $query->have_posts() ) :

    echo '<div class="products-dropdown"><select name="products-select" id="products-select">
    <option value="">'.__('Choose a related product').'</option>';

    while ( $query->have_posts() ) : $query->the_post();

    echo '<option value="'.get_permalink().'">'.get_the_title().'</option>';

    endwhile;

    echo '</select> <button type="button" style="padding:2px 10px; margin-left:10px;">'._("Go").'</button></div>';

    wp_reset_postdata();

    endif;

    ?>
    <script type='text/javascript'>
        jQuery(function($){
            var a = '.products-dropdown', b = a+' button', c = a+' select', s = '';
            $(c).change(function(){
                s = $(this).val();
                console.log(s); // just for testing (to be removed)
            });
             $(b).click(function(){
                if( s != '' ) location.href = s;
            });

        });
    </script>
    <?php

    return ob_get_clean();
}

代码进入活动子主题（或活动主题）的functions.php文件中。经过测试并有效。

Code goes in functions.php file of your active child theme (or active theme). Tested and works.

使用情况

1）。对于单个产品页面：只需在产品简短描述（或说明）中粘贴以下简短代码：

1). For single product pages: Just paste the following shortcode in the product short description (or descrition):

[products_dropdown]

2）。对于单个产品页面，在php代码内部：

2). For single product pages, inside php code:

echo do_shortcode("[products_dropdown]");

3）。在文本编辑器中的任何帖子或页面上，定义product_id参数（在定义的产品ID下面是** 37 **）：

3). on any post or page within the text editor, define the product_id argument (below the defined product id is **37**):

[products_dropdown product_id="37"]

---

---

这篇关于Woocommerce产品内同一类别的产品下拉列表简短描述的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！