WooCommerce - Create a product categories dropdown list in a shortcode

gistfile1.php

<?php

/**
 * WooCommerce Extra Feature
 * --------------------------
 *
 * Register a shortcode that creates a product categories dropdown list
 *
 * Use: [product_categories_dropdown orderby="title" count="0" hierarchical="0"]
 *
 */
add_shortcode( 'product_categories_dropdown', 'woo_product_categories_dropdown' );

function woo_product_categories_dropdown( $atts ) {

  extract(shortcode_atts(array(
    'count'         => '0',
    'hierarchical'  => '0',
    'orderby' 	    => ''
    ), $atts));
	
	ob_start();
	
	$c = $count;
	$h = $hierarchical;
	$o = ( isset( $orderby ) && $orderby != '' ) ? $orderby : 'order';
		
	// Stuck with this until a fix for http://core.trac.wordpress.org/ticket/13258
	woocommerce_product_dropdown_categories( $c, $h, 0, $o );

	?>
	<script type='text/javascript'>
	/* <![CDATA[ */
		var product_cat_dropdown = document.getElementById("dropdown_product_cat");
		function onProductCatChange() {
			if ( product_cat_dropdown.options[product_cat_dropdown.selectedIndex].value !=='' ) {
				location.href = "<?php echo home_url(); ?>/?product_cat="+product_cat_dropdown.options[product_cat_dropdown.selectedIndex].value;
			}
		}
		product_cat_dropdown.onchange = onProductCatChange;
	/* ]]> */
	</script>
	<?php
	
	return ob_get_clean();
	
}

Hi there,

Great piece of code. Unfortunately I am not a huge coder and I am looking for simple solution. I would like to see a simple drop-down list all all products that I have (filters are also welcome) on WooCommerce. Is this something easily done? Thank you

@generaltest, it's relatively easy to implement the above. Ideally you should create a child theme: https://codex.wordpress.org/Child_Themes. Within your child theme create a file called functions.php. You can create this file in a plain text editor. Then insert the above code into functions.php and save it. To insert the category drop down menu in your site, use the shortcode: [product_categories_dropdown orderby="title" count="0" hierarchical="0"].

All the best.

Hi! This works for me but i get a nasty error message:
Warning: Illegal string offset 'show_counts' in /home/nostrapassione.com/public_html/wp-content/plugins/woocommerce/includes/wc-term-functions.php on line 114

What to do?
THX Freek

Does not work properly. Throws a bunch of Warnings (like Freek posted already). 👎

wc_product_dropdown_categories

Hi
I just tried this and it does not work. I added the snippet into my functions.php file in my child theme. Added the shortcode exactly as per Misplon's instructions and all I see is the shortcode displayed as content.

Am I doing something wrong? Any help would be appreciated.

Thanks
Lyse

I use WooCommerce version 2.1.12. The problemm with "Warning: Illegal string offset 'show_counts' ..." is the wrong variable name in line 17. To take 'count' -> 'show_counts' and it works.

regards
max

Can anyone verify this works on WooCommerce 2.6.2?

The shortcode displays the drop-down with the categories, but the script doesn't seem to fire to change the page.

When I view the source, it's showing class="dropdown_product_cat" on the select element, so document.getElementById doesn't work to trigger the page change to the category's page(?). Any help converting the script to trigger on the class would be appreciated.

(edit: going into wc_term_functions.php and changing "class=" to "id=" on dropdown_product_cat allows this code to function.)

'count' => '0',
to
'show_count' => '0'
fixed the prob of illegal string as the main function require show_count
for document.getElementById u can replace it with jQuery(".dropdown_product_cat");

I also tried it and .......everything is working fine......but its not redirecting me to that category page which i selected from the drop down ...anyone help please

@prerna273 That's probably because you are using SEO friendly urls. It is not working for me too, for that reason I think. Try with standard urls

My sites sells spare parts for motorcycle. What i would like to do is a box where i can select firstly the make, then (in another box, deactivated until i select the make) the model, and then the year. Is it possible to do modyfing this code?
Thank you very much!

Remove the <?php at the top of this piece of code when you paste it into your functions.php page.
Happy Coding!

Hi, I added this code to my child theme and also added some extra CSS to only show this on my mobile views - works great for that.

Just two questions, what do I need to change in the code to rather the categories order not go by title but sort it by the category order I've set on the admin side?

And secondly, how do I remove the number of items showing in the brackets after each category name e.g. Category (3) ?

Thank you in advance.

Regards,
Jhorene