在 Woocommerce 子类别页面上显示子类别下拉列表 [关闭]

Question

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

现在我希望它显示为下拉列表（最好是 select2 下拉列表，像 其他 WooCommerce 下拉列表），而不是普通链接。

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

Answer 1

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

注意：Select2 库 （和样式） 默认情况下不会在 WooCommerce 存档页面上加载。因此，此短代码中包含使用来自 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