Product page not highlighting in menu

sparky672
(@sparky672)

9 years, 8 months ago

WooCommerce latest version as of this posting.

I have the “Shop” item in my main navigation menu and it’s set to the WooCommerce “Product Archive / Shop Page”. This menu item highlights (active item) when I’m on any WooCommerce page, as it should. EXCEPT when on a single product, no menu item is highlighted as “active”.

The “Shop” menu highlights as active when on the Cart, Shop, Account, or any of the product categories. However, when viewing a single product, the “Shop” menu item is not highlighted (active) at all.

I’ve tried several stock themes, TwentyTwelve, TwentyThirteen, and TwentyFourteen just to rule out my child theme. They all behave the same.

So a stock installation of WooCommerce and a standard WordPress theme exhibits this buggy behavior. Either it’s some combination of settings (I cannot see how/where) or it’s a bug. Either way, this shouldn’t happen.

Until this issue is resolved, I am forced to implement a crude workaround, where I over-ride the single-product template, so I can use jQuery to apply the “active” CSS class to the “Shop” menu item. It works but I really don’t like that I have to do this.

https://wordpress.org/plugins/woocommerce/

Viewing 5 replies - 1 through 5 (of 5 total)

hugo2808
(@hugo2808)

9 years, 6 months ago

Hi,
did you get a solution for this?
I would like also to have my Menu item “Shop” highlight when I’m in product page and checkout page.

Thanks
Hugo
hugo2808
(@hugo2808)

9 years, 6 months ago
I found a solution!
Add this to function.php (child theme always preferable!!)
```
function special_nav_class($classes, $item){

        /*Highligth shop menu on woocommerce page templates*/
	if (is_woocommerce() && $item->ID == 106)
	{
        	$classes[] = 'current-menu-item';
     	}

	/*Highligth shop menu on checkout page (regular page not include in woocommerce templates)*/
	if (is_checkout() && $item->ID == 106)
	{
        	$classes[] = 'current-menu-item';
     	}
	return $classes;
}

add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
```
For more woocommerce functions to get easily object references see this
hugo2808
(@hugo2808)

9 years, 6 months ago

I forgot one thing:
Change

$item->ID == 106

to

$item->ID == ‘Your Menu Item ID’

Enjoy

Thread Starter sparky672
(@sparky672)

9 years, 6 months ago

My “workaround” uses jQuery to apply the class at page load. However, I think your solution is better than mine because it applies the class before the page is loaded.

Regardless, I just wish WooCommerce would fix this.

cmstactics
(@cmstactics)

9 years, 1 month ago

Thanks for this quick function but for my theme I had to include the “active” class as well. Therefore, the classes array line looks like this for my theme:

$classes[] = 'current-menu-item active';

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Product page not highlighting in menu’ is closed to new replies.

Tags