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

↑ Back to top

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

	add_filter( 'storefront_handheld_footer_bar_links', 'jk_remove_handheld_footer_links' );
	function jk_remove_handheld_footer_links( $links ) {
	unset( $links['my-account'] );
	unset( $links['search'] );
	unset( $links['cart'] );

	return $links;
	}

view raw

functions.php

hosted with ❤ by GitHub

Removing all links

↑ Back to top

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

	add_action( 'init', 'jk_remove_storefront_handheld_footer_bar' );

	function jk_remove_storefront_handheld_footer_bar() {

	remove_action( 'storefront_footer', 'storefront_handheld_footer_bar', 999 );

	}

view raw

functions.php

hosted with ❤ by GitHub

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:

	add_filter( 'storefront_handheld_footer_bar_links', 'jk_add_home_link' );
	function jk_add_home_link( $links ) {
	$new_links = array(
	'home' => array(
	'priority' => 10,
	'callback' => 'jk_home_link',
	),
	);

	$links = array_merge( $new_links, $links );

	return $links;
	}

	function jk_home_link() {
	echo '<a href="' . esc_url( home_url( '/' ) ) . '">' . __( 'Home' ) . '</a>';
	}

view raw

functions.php

hosted with ❤ by GitHub

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.

	.storefront-handheld-footer-bar ul li.home > a:before {
	content: "\f015";
	}

view raw

style.css

hosted with ❤ by GitHub

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

Customize links in the handheld footer bar

WooCommerce