Customize links in the handheld footer bar

Customizing the links in the handheld footer bar is fairly straightforward and handled via the storefront_handheld_footer_bar_links filter.

Note: This is a Developer level doc. If you are unfamiliar with code and resolving potential conflicts, select a WooExpert or Developer for assistance. We are unable to provide support for customizations under our  Support Policy.

Removing a link

Using the following snippet would remove all links. Pick and choose according to which you want to keep.

Removing all links ↑ Back to top

To remove the feature altogether you can use something like this:

Adding a link ↑ Back to top

Adding a link is more involved. We use the same filter but also need to declare a callback function to display the link itself. This snippet will add a ‘home’ link:

The layout automatically arranges itself based on the number of links in the navigation bar. After adding this snippet, you’d see something like this:

Screen Shot 2016-05-09 at 10.43.44

Now the link is in place, but it’s missing an icon.

We need to add some CSS. Since FontAwesome is bundled in Storefront, pick and use an icon from that set.

  • Find the icon you want to use on the FontAwesome site and locate its unicode value. In this case we’ll use the home icon which has a unicode value of f015.
  • Here’s the CSS you need for the home link we created.

Note that the class name applied to the list item is based on your code in the snippet, which adds the link. If you’re using something other than ‘home,’ you need to change it.

Here’s the finished result:

Screen Shot 2016-05-09 at 10.50.44

WooCommerce - the most customizable eCommerce platform for building your online business.

Back to the top