如何在Woocommerce 5.2.2中显示“在wordpress页面中对子类别进行下拉分组的下拉列表中的父产品类别”？

Question

我想为将相关子类别分组的每个产品类别显示一个下拉菜单。

add_shortcode( 'product_categories_dropdown', 'woo_product_categories_dropdown' );
function woo_product_categories_dropdown( $atts ) {
    // Attributes
    $atts = shortcode_atts( array(
        'hierarchical' => '0', // or '1'
        'hide_empty'   => '0', // or '1'
        'show_count'   => '0', // or '1'
        'depth'        => '0', // or Any integer number to define depth
        'orderby'      => 'order', // or 'name'
    ), $atts, 'product_categories_dropdown' );

    ob_start();

    wc_product_dropdown_categories( apply_filters( 'woocommerce_product_categories_shortcode_dropdown_args', array(
        'depth'              => $atts['depth'],
        'hierarchical'       => $atts['hierarchical'],
        'hide_empty'         => $atts['hide_empty'],
        'orderby'            => $atts['orderby'],
        'show_uncategorized' => 0,
        'show_count'         => $atts['show_count'],
    ) ) );

    ?>
    <script type='text/javascript'>
        jQuery(function($){
            var product_cat_dropdown = $(".dropdown_product_cat");
            function onProductCatChange() {
                if ( product_cat_dropdown.val() !=='' ) {
                    location.href = "<?php echo esc_url( home_url() ); ?>/?product_cat=" +product_cat_dropdown.val();
                }
            }
            product_cat_dropdown.change( onProductCatChange );
        });
    </script>
   <?php

    return ob_get_clean();
}

调用php

echo do_shortcode("[product_categories_dropdown orderby='name' hierarchical='1']");

我得到的结果是：

enter image description here

类别（下拉列表）

• 汽车
• 奥迪
• 宝马
• 奔驰
• 摩托车
• 本田
• 雅马哈
• 杜卡迪

我想实现的是：

enter image description here

Coches (dropdown)
    - Audi
    - BMW
    - Mercedes
Motos (dropdown)
    - Honda
    - Yanaha
    - Ducati