How to remove the “page” icons from the WooCommerce Storefront Theme

If you run your website using WooCommerce, it’s likely you may want to use the ‘Storefront’ WooCommerce Theme. If you do use this theme you may run into the following frustration when it comes to viewing your website on Mobile.

What are those Pesky Page Icons?

Urgh.. they just look weird. Maybe you want to remove them? I’ll show you how in this post. First up. This will all be done using CSS. Here’s how you do it

Step 1 – Use Google Chrome and ‘Inspect’ the Element

This brings up your ‘console’ where the ‘Elements’ tab shows you the elements.

Step 2 – Find the ‘surrounding class’ wrapping your elements

This is where you’ll apply the CSS rule to in the Appearance. In the Storefront theme this wrapping element is

class=”handheld-navigation”

OK got this class? Then the next part is really easy.

Step 3: Find the ‘Page Icons’ element in the ‘Elements’ tab of your console

Following down the ‘DOM’ (document object model) you’ll see that the page icon is actually the ::before of the link element. So you now know what class to target (and hide). Here’s the CSS to use

.handheld-navigation ul li a:before{
display:none;
}

Simply open up your Theme Customiser adding the CSS from above

This will hide the page icons completely. As shown in the image, these are now gone from your mobile navigation menu.

Taking this EPIC

Maybe you don’t want to remove them, but in fact CHANGE them to another icon.. this can also be done with CSS but needs to be a bit more ‘targeted’ and know a little bit about the CSS that’s already in the ‘before’ element. Taking a look deeper for the ‘Home’ we have the following CSS ‘rule’ (menu-item-16583) is the specific menu item number in my own site (your ID of 16583 will be different).

.handheld-navigation ul .menu-item-16583 a:before{
display: inline-block;
font-size: inherit;
-webkit-font-smoothing: antialiased;
content:"\f0f6";
margin-right:.5407911001em;
}

Changing the ‘page icon’ to a ‘home icon’ you can do this by heading over to Font Awesome (link here) and finding the ‘::before’ for any of the icons on that page.

Since it’s only the ‘content’ you want to change. You can add the following CSS into your Theme Customiser (if you’ve hidden them all using the code further up in this article you may want to add this below and add the ‘display:block;’ property.

You’re only changing the content so you can just add the following line:-

.handheld-navigation ul .menu-item-16583 a:before{
content: "\f015";
}

The result?

If you decided to hide them all from earlier, your CSS would be

.handheld-navigation ul .menu-item-16583 a:before{
content: "\f015";
display: block; 
}

You’d paste this below the code from above which hides all the ‘page icons’ elements

Hopefully this post has been useful for you if you had the same problem as we did and wanted to hide the ‘page icons’ on the mobile menu (or if you wondered how to change them to any icon)