I have my menu set up like so:
- Shop Online (WPeC ‘Products Page’ page)
- Product Category (WPeC Category)
- Product Category (WPeC Category)
- Product Sub Category (WPeC Category)
- Product Sub Category (WPeC Category)
- …
Single product pages are viewable from any category or sub category page as they both show the product listing view.
Now when I select either Shop Online, a product category or sub-category the menu updates it’s CSS classes to match the current hierachy with the usual (example) current-menu-page
, current-menu-ancestor
and current-menu-parent
among others. It doesn’t matter if I click on the menu or the category listing on the Shop Online page to get there.
For some reason as soon as I view a product singularly (domain.tld/product-cat/sub-cat/product-single
or domain.tld/product-cat/product-single
), the menu classes are removed and I lose my menu highlighting because the classes are no longer there.
Is there a way that I can reflect the single product view in the menu by highlighting the current category/ies that the product is in, as well as the Shop Online
menu item/link respective of how you got to the product?
WP v3.5
WPeC v3.8.9.4
Looking for a solution for the same problem, I came across this:
Code from: http://www.rarescosma.com/2010/11/add-a-class-to-wp_nav_menu-items-with-urls-included-in-the-current-url/
Hope it helps!
If you are using Woocommerce plugin you can add class like this
How To Get WooCommerce Page IDs
Feels like a bit of a hack, but I ended up using this CSS solution. Took about 5 minutes instead of spending hours trying to figure out how to add
.current-menu-ancestor
into the menu walker with PHP.Please note that this is a good solution for a custom theme or plugin that is only for one site. Obviously using a specific menu ID doesn’t create a general solution that could be used in a theme for the WordPress.org marketplace, etc.
Original CSS:
New CSS:
The
woocommerce-page
body class covers:As explained by a support tech over at getshopped.org: