Remove “box” from around links and menu items in WooCommerce Storefront

Are you looking to take out the outline (dotted or otherwise) from around menu (and other) links in your WooCommerce store – these links show up on click briefly, and look like this:

Storefront added a host of accessibility features a while back – in version 1.4 – which specifically included adding these features to improve the experience for visibly impaired visitors.

But what if you’d like to remove these borders, which form a “box” around your menu?

The snippet below, when added to your custom CSS (either in a child theme, or HINT using the Theme Customizations plugin) will remove this box:

Remove the box around menu items in Storefront

What its doing – breaking it down

This code here is CSS, and its telling browsers to override (!important) any other rules they have been given about this “outline” on the “focus” event (i.e. when links are clicked). Specifically, we’re setting “outline” to “none”.

Worked for you?

Leave a comment below if this helped you today!

Get Silicon Dales to do it

If you’ve got WooCommerce problems, and you run a medium or larger business website on WordPress with WooCommerce, then you may be interested in our WooCommerce development services.

3 thoughts on “Remove “box” from around links and menu items in WooCommerce Storefront”

  1. I really wish they added an option to NOT have these nasty boxes aound clickable elements – they look really bad!
    I will have to try this – thanks


Leave a comment

No links of any kind allowed in comments - if you add any links, your comment will automatically be deleted.