在Woocommerce子类别页面上显示子类别下拉列表

Question

我正在使用 Display sub subcategories terms list on WooCommerce subcategory archive pages 上一个问题的答案代码，以在Woocommerce商店的父类别页面上显示子类别

现在，我希望将其显示为下拉菜单（最好是 select2下拉菜单，如其他WooCommerce下拉菜单），而不是纯链接。

我知道我可以使用wc_product_dropdown_categories()，但是如何在主父子类别页面上将子子类别显示为下拉列表呢？

Answer 1

以下是自定义简码，将显示链接的子子类别术语列表的 Select2下拉列表。

注意：默认情况下，WooCommerce存档页面上未加载 Select2库 （和样式） 。因此，此短代码中包含使用CDN上的外部链接的内容，并且仅在子类别上加载。

如果愿意，可以使用WordPress推荐的方式将其替换为WooCommerce中包含的文件。

代码：

add_shortcode('wc_subcat_dropdown', 'wc_sub_subcategories_dropdown');
function wc_sub_subcategories_dropdown( $atts ) {
    // Shortcode attribute (or argument)
    extract( shortcode_atts( array(
        'taxonomy' => 'product_cat',
        'obj_id'   => '0',
    ), $atts, 'wc_subcat_dropdown' ) );

    if ( $obj_id > 0 ) :
        $obj = new WP_Term( (int) $obj_id );
    else :
        $obj = get_queried_object();
    endif;

    if ( is_a($obj, 'WP_Term') && $taxonomy === $obj->taxonomy && 0 != $obj->parent ) :
        // Get sub-subcategories of the current subcategory
        $terms = get_terms([
            'taxonomy'    => $taxonomy,
            'hide_empty'  => true,
            'parent'      => $obj->term_id
        ]);
    endif;

    if ( isset($terms) && ! empty($terms) ) :

    ob_start(); // Start buffering

    // Select2 CSS - Can be removed and replaced
    echo '<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />';

    echo '<select name="product_cat" id="'.$taxonomy.'" class="dropdown_'.$taxonomy.'">
        <option value="">'.__("Select a subcategory","woocommerce").'</option>';

    // Loop through product subcategories WP_Term Objects
    foreach ( $terms as $term ) {
        echo '<option value="'. $term->slug .'">'. $term->name .'</option>';
    }
    echo '</select>';

    // Select2 Script - Can be removed and replaced
    echo '<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>';
    ?>
    <script type='text/javascript'>
    (function($) {
        $('select#<?php echo $taxonomy; ?>').select2();
        $('.dropdown_product_cat').change(function(){
            if( $(this).val() !=='' ) {
                location.href = '<?php echo home_url(); ?>/?product_cat='+$(this).val();
            }
        });
    })(jQuery);
    </script>
    <?php
    return ob_get_clean();
    endif;
}

代码进入活动子主题（或活动主题）的functions.php文件中。经过测试，可以正常工作。

---

用法：

1. 在WordPress中，文本编辑器，文本小部件…（作为简码）

   [wc_subcat_dropdown]
   

2. 内部php代码，例如模板文件，任何钩子函数……

   echo do_shortcode('[wc_subcat_dropdown]');
   

   或

   <?php echo do_shortcode('[wc_subcat_dropdown]'); ?>
   

---

用法示例：

使用挂钩函数并在子类别标题下方显示下拉列表：

add_action( "woocommerce_archive_description", "custom_sub_category_dropdown", 5 );
function custom_sub_category_dropdown(){
    echo do_shortcode('[wc_subcat_dropdown]');
}

代码进入活动子主题（或活动主题）的functions.php文件中。经过测试，可以正常工作。

---

可选的简码参数：

• $id-定义子类别术语ID （默认情况下，当前子类别术语ID）
• $taxonomy-默认情况下，为WooCommerce产品类别分类法。

---

相关：

• Display sub subcategories terms list on WooCommerce subcategory archive pages
• WooCommerce custom shortcode product categories dropdown