woocommerce widget layered nav dropdown

Thanks for explaining!

This kind of problem is usually caused by either a conflict with your theme or with another plugin.

The best way to determine if the issue is being caused by a theme and/or plugin is to temporarily switch your theme to Storefront and disable all plugins except for WooCommerce. If you can install plugins, install Health Check. On the troubleshooting tab, you can click the button to disable all plugins and change the theme for you while you’re logged in to that session without affecting normal visitors to your site. Note that Health Check may not count Storefront as a default theme, so you can also use Twenty Seventeen as well.

If that resolves the issue, then slowly re-enable features until you find the one that’s causing the conflict.

Hi Hannah,
Thank you for your response.
Yes, I do believe it is a conflict. And thank you for recommending Health Check. I did discover it earlier and used it. Wow what a great plugin to use on a live site. I knew from setting wp_debug to true in the wp_config file that one plugin was running a depreciated constructor but I didn’t know which one and Health Check spotted it in the plugin WooCommerce All Discounts Lite. Anyhow once deactivated that took care of the debug alert but not the issue with the dropdowns.
I am not the original developer of the site. It is built on a Genesis framework. I believe the conflict is with Bootstrap and select2. When I upgraded the woocommerce plugin and database, styling was lost on all the sidebar search and filter widgets – but they still worked; styling remain on all the woocommerce widgets but the dropdowns stopped working. The child theme functions file enqueue Bootstrap 3.3.7. I read that select2 does not function properly when used inside a bootstrap modal. This is mentioned as a common problem on the select2 website.
https://select2.org/troubleshooting/common-problems
However, I am not sure how to troubleshoot this without causing other issues on a live site. Maybe it is a conflict with the libraries. The child theme header calls for jquery.slick 1.6.0 but that is for the front slider. When I update the slider styling is lost on it as well.
So I wonder if outdated libraries are conflicting and being called first.
Any suggestions would be appreciated.

I’m glad Healthcheck helped you in the right direction!

In this case, WooCommerce 3.x made some changes to the Select2 implementation:
https://github.com/woocommerce/woocommerce/wiki/Select2-fields-not-working-in-3.0.x

It sounds like that’s where your framework may be going wrong. Most people don’t get into this level of troubleshooting – it’s enough to know there are issues, and then they upgrade to a theme that supports the latest version of WooCommerce. I can recommend taking a look at our Storefront theme, but there are plenty of good themes out there.

If you’d like to get into the troubleshooting, I recommend contacting one of the services on our customizations page: https://woocommerce.com/customizations/

Hi Hannah,
Thank you for your support. It’s nice to know I am not alone. Changing the theme isn’t an option right now. I will just have to keep on sleuthing until I get to the bottom of it. But your counsel is pointing me in the right direction. The only plugin loading Select2 is woocommerce on the page. The impediment seems to be a result of this error: Bootstrap’s JavaScript requires jQuery, which the console highlighted for me because Bootstrap 3.3.7 is loading from the child theme functions file. I am going to chase this one down the rabbit hole and see where it leads me. May be it’s the order of the scripts.

Thanks for letting us know – good luck with the testing!