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

Question

我正在使用回答我上一个问题的代码，以便在我的 Woocommerce 商店的父类别页面上显示我的子类别

现在我希望它显示为下拉菜单 （理想情况下是 select2 下拉菜单，如 其他 WooCommerce 下拉菜单） 而不是普通的链接。

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

Answer 1

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

Note: The Select2 library (and styles) is not loaded by default on WooCommerce Archive pages. So there are included in this shortcode using external links from a CDN, and loaded only on subcategories.

You can replace that with the files included in WooCommerce, using WordPress enqueuing recommended way, if you like.

代码：

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

代码进入活动 child 主题（或活动主题）的 functions.php 文件。已测试并有效。

用法：

在 WordPress 中，文本编辑器、文本小部件……（作为简码）
```
[wc_subcat_dropdown]
```

在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]');
}

代码进入活动 child 主题（或活动主题）的 functions.php 文件。已测试并有效。

可选简码参数：

$id - 定义子分类词Id (默认当前子分类词Id)
$taxonomy - 默认情况下，WooCommerce 产品类别分类法。

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

Display subcategory dropdown on Woocommerce subcategory pages

php

wordpress

jquery-select2

woocommerce

taxonomy-terms

用法：

用法示例：