Adding Active Class to Menu Item

I am also using Woocommerce.

While WooCommerce may not be the sole reason for the issue, since that is a Commercial Product, we need to first ask them about such issues, please.

See: https://woocommerce.com/contact-us/

Might also want to check with GD on their CDN.

@swansonphotos: Woocommerce is an open source project with paid/premium addons and services. Unless OP’s issue specifically relates to a paid addon, the WordPress support forum should be the appropriate place to get help, as free plugin users don’t have a Woocommerce.com account to file a ticket there.

Woocommerce Plugin Page: https://www.ads-software.com/plugin/woocommerce/

@snholmes: Your issue seems (to me) to be theming/styling-related…. so I’ll try here to see if I can offer some CSS to address the issue.

When on the “Shop” page, the “Shop” link in the navigation is not being marked as active, rather the “Book” link is, which is not correct. The “Book” link is a link to a product page, where the “Shop” link is the main shop page of the site.

Ideally, you want to have the “SHOP” menu item highlighted while viewing ANY shop-related page, including the SHOP page itself, product pages, categories, cart and checkout pages, etc… because they are all part of the “SHOP”.

But, of course, if you really want to highlight ONLY the “SHOP” page, you can do so as well.

And it seems the Woocommerce developers had the two possibilities in mind, that’s why the nav-link-is-active class is not added to Woocommerce’s SHOP menu item.

Rather, Woocommerce adds a class shop-menu to the main shop menu item so that this can be targeted to highlight the main shop page while viewing ANY Wooocommerce page. But ONLY the main shop page has the woocommerce-shop body class… so the two classes can be combined to target and highlight ONLY the main shop page (and not any other Woocommerce page.

For your specific case, if you want to highlight the SHOP page while viewing the SHOP page ONLY, use the following custom CSS:

.woocommerce-shop li.shop-menu a span {
    padding-bottom: 5px;
    border-bottom: 2px solid;
}

And if you want to highlight the SHOP page when ANY Woocommerce page is viewed (including the SHOP page itself), use:

li.shop-menu a span {
    padding-bottom: 5px;
    border-bottom: 2px solid;
}

Standing by for feedback!

Woocommerce is an open source project with paid/premium addons and services. Unless OP’s issue specifically relates to a paid addon, the WordPress support forum should be the appropriate place to get help, as free plugin users don’t have a Woocommerce.com account to file a ticket there.

Hmmm…reads thru thousands of forum replies….hmmm

Woocommerce adds a class shop-menu to the main shop menu item so that this can be targeted to highlight the main shop page while viewing ANY Wooocommerce page. But ONLY the main shop page has the woocommerce-shop body class… so the two classes can be combined to target and highlight ONLY the main shop page

@gappiah that what exactly what I needed to know. I wasn’t aware that themes/plugins add classes to the body element to produce specific styles and behaviors. By using .woocommerce-shop I was able to target the “Book” page link and remove the highlight/white underline only while the on the Shop page. This is the CSS added in order to fix the problem:

.woocommerce-shop li.shop-menu a span {
    padding-bottom: 5px;
    border-bottom: 2px solid;
}

.woocommerce-shop .the-book-nav-link a span {
	padding-bottom: 0px !important;
	border-bottom-style: none !important;
}

I used your first bit of code that you said would ONLY highlight the SHOP page while viewing it, which did highlight the Shop nav link, however the “Book” nav link was still being highlighted too. In order to remove the highlight/underline I added the second bit of CSS. Although I am still unsure why the “Book” link is being given the .current-menu-item class while on the “Shop” page, this workaround will get me by for now. Thank you kindly!

• This reply was modified 2 years, 7 months ago by snholmes.