WooCommerce Product Category Widget Not Working (Dropdowns Only)

It appears that this javascript is missing from the page on the WC 2.2.4 install of my site:

<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 = "https://www.examplesite.com/?product_cat="+product_cat_dropdown.options[product_cat_dropdown.selectedIndex].value;
					}
				}
				product_cat_dropdown.onchange = onProductCatChange;
			/* ]]> */</script>

This code is present on the WC 2.1 install though. Any ideas as to why this is missing? I’m guessing that this has everything to do with the issue I’m having.

For those who are using the Headway theme as I am, I’m told by Headway Support that the issue is an incompatibility between Headway and the WooCommerce Product Categories Widget when using drop downs to display the categories. The drop down worked perfectly under Headway 3.7.8 and WooCommerce 2.1 but stopped working after upgrading to Headway 3.7.10 and WooCommerce 2.2.

I was provided this code which resolves the issue. The code should be placed in the Footer Scripts section under Options>Scripts/Analytics in Headway:

<script type="text/javascript">
jQuery(function($) {

                jQuery('.dropdown_product_cat').change(function(){
                    if(jQuery(this).val() != '') {
                        location.href = '?product_cat=' + jQuery(this).val();
                    }
                });

});
</script>

The support team is looking into why the issue is happening so that this code possibly doesn’t have to be manually entered for the drop down to work in the future.

Hi @midihead,

I am so glad that you came back and posted this solution. I was struggling hard to find an answer and unfortunately my headway developer license expired in July and hence I wasn’t able to get in touch with the headway support team.

The solution above works for WooCommerce Product Category Widget, however, WooCommerce Layered Nav has a variable ($taxonomy_filter) added next to the class name as mentioned in the woocommerce code in plugins/woocommerce/includes/widgets/class-wc-widget-layered-nav.php line 239 and hence adding the javascript directly won’t work in this case.

jQuery('.dropdown_layered_nav_$taxonomy_filter').change(function(){
	location.href = '" . esc_url_raw( preg_replace( '%\/page/[0-9]+%', '', add_query_arg( 'filtering', '1', remove_query_arg( array( 'page', 'filter_' . $taxonomy_filter ) ) ) ) ) . "&filter_$taxonomy_filter=' + jQuery(this).val();
});

I also faced issue with ‘Filter by Price widget’ because the javascript for filter drag slider wasn’t loading and I had to enqueue the javascript myself.

Can you please do me a favour and if you have time, ask the headway team if they have fixed this issue and how to make WooCommerce Layered Nav work in the mean time. I really appreciate it.