Active Link on Product pages

[marketfresh]

Hello,

I have Active Links Setup set to on for Current Link, Ancestor Link and Primary Particle in my Woocommerce Shop’s Pro header menu.
I’m not seeing the active state of the Shop menu item when I’m on a Product page. I do have the permalinks setup to include /shop/category/ in the slug when on a product page.

Is there any way for the Active Link to work on the Shop parent when on a product page?

[friech]

Hi Jonathan,

Thank you for writing in and sorry that you’re having that issue, I can replicate this issue on my end and it seems to be a bug. I’ve submitted this to our issue tracker so the developers will be made aware of it.

In the meantime, you can use this selector to style the current parent item.

.x-menu > li.current_page_parent > .x-anchor .x-anchor-text-primary {
	/*CSS Rules here*/
}

Thanks,

[marketfresh]

Thank you. This works for now.

[friech]

You’re welcome, glad we could help.

Cheers!

[marketfresh]

One more bug to report concerning this.

I’ve made my Product Category Base “/shop” to match the Shop base for a cleaner URL structure.

The “current_page_parent” class is not showing on the Shop menu link when on the /shop/[category]/ slug or on /shop/[category]/[sub-category]/ slug

The class only shows when on single product page.

Is there a temporary solution to this?

@RueNel?

[christian]

Hey Jonathan,

Sorry for the confusion. This is not a bug but rather should be labelled as enhancement. This is because, currently, the current_page_parent (Shop menu item) and the current-menu-parent (Category menu item) are not yet included as Ancestor Links.

Regarding your second issue, Pro’s Header outputs the same classes as the default WordPress theme so what you’re seeing is the normal WooCommerce output.

Regretfully, since the class is only showing up in single product, there is no way you can style the element other than to use classes unique to the product category page. Try using a class outputted in the body and add a class to your shop menu.

Please see watch this screencast to get an idea.

Below is the code in that video to help you get started. Just note that custom coding is outside the scope of our support. This serves only as a guide. Code maintenance would be the user’s responsibility.

.tax-product_cat .shop .x-anchor-text-primary,
.current_page_parent.shop .x-anchor-text-primary {
    color: red !important;
}

Thanks.

[marketfresh]

@christian_y
Are you saying that my initial comment/request is also not a bug, or just my latest comment?

I still don’t understand why that current page class wouldn’t show up on all pages with the /shop slug, and how there’s not a way to make that happen.

I appreciate your css suggestion, but the problem is that there is no unique class on the Shop menu item while on the /shop/category/ and /shop/category/sub-category/ pages. The unique class only appears on the /shop/category/single-product and /shop/category/sub-category/single-product pages.

[christian]

The first and second comment/request are not bugs. For the first, the current_page_parent and current-menu-parent are not yet included as Ancestor Links. I’ve instead suggested an enhancement.

For the second, WooCommerce does not really output a class for the Shop page when you’re in a category page. The behavior is the same in default WordPress theme. And yes, the class will only appear in single product that is why I suggested you add a custom Class to your Shop menu and a custom CSS.

[marketfresh]

Ok. I’ve got the css solution working for now.

Thanks.

[christian]

You’re welcome. I’m sorry I have not tested enough in my previous reply though. You actually won’t need to use CSS if you just set your Category menu as a sub-menu for your Shop menu.

The same is true if you include the single product in the menu.

If you don’t include the single product in the menu, you need to apply the CSS because the Ancestor Links currently applies to the levels in the menu.

Hope that information is helpful.

[marketfresh]

This sounds like a good solution.
Is there any way to disable the drop-down on the Shop menu item?
I’d like the native parent menu item styling without the dropdown on that menu item.

[Prasant]

Hello Jonathan,

Thanks for updating the thread.

If you would like to remove dropdown from Shop page then please follow below steps:

1. Under Appearance > Menus and toggle Screen Options button and select CSS classes checkbox.
   
2. Next, open the menu item that’s holding Shop menu.
3. After that open the shop menu item and under CSS Classes (optional) add a class name.
   
4. Then add following CSS under Pro > Theme Options > CSS:

.class-name ul {
    display: none;
}

Please replace class-name as per your choice.

Thanks.