Woocommerce custom product category dropdown issue Woocommerce custom product category dropdown issue wordpress wordpress

Woocommerce custom product category dropdown issue


In your code there was:

  • some mistakes in the code like wrong 'show_counts' that is 'show_count' (without s) … Now hiding counters is enabled and functional.
  • missing argument 'hide_empty' to show empty categories

In this shortcode you can alter the following optional arguments:

  • hierarchical that is disabled by default (set to '0')
  • hide_empty that is disabled by default (set to '0')
  • show_count that is now disabled by default (set to '0')
  • depth that is disabled by default (set to '0')
  • orderby set to category "order" by default (can be by names too: "name")

Added a custom hook woocommerce_product_categories_shortcode_dropdown_args that will allow extended customizations…

Here is the new code:

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

Code goes in function.php file of the active child theme (or active theme).

Tested and works.


1) Example usage - All product categories and subcategories hierarchically displayed:

[product_categories_dropdown orderby='name' hierarchical='1']

In php code you can use it this way:

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

or inserted in html tags:

<?php echo do_shortcode("[product_categories_dropdown orderby='name' hierarchical='1']"); ?>

2) Example usage - Only "main parent" product categories:

[product_categories_dropdown depth='1' hierarchical='1']

In php code you can use it this way:

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

or inserted in html tags:

<?php echo do_shortcode("[product_categories_dropdown depth='1' hierarchical='1']"); ?>


This is how it is displayed by default, for this it is not necessary to add more code.Theirs would be that the products were grouped to the category of products that belong, and that it had a drop-down for each category of products, instead of a single one.

example:

Cars (dropdown)

  • Audi
  • Merdeces
  • BMW

Motorbike (dropdown)

  • Honda
  • Yamaha
  • Ducati