How to Hide Mobile Footer From Storefront WooCommerce

Do you want to remove the handheld footer bar in the Storefront theme? The footer bar helps to reduce bounce rate and increase pages viewed by users.

Table of Contents

The Storefront theme is the official WooCommerce theme. With more than 200,000 active installations in the WordPress community, this theme is very customizable. This means it can be used in many ways. For example, you can add a blog to your WooCommerce store.

Storefront Hide Handheld Footer Bar

Additionally, many people use the Storefront theme with WooCommerce but only as a catalog, so customers can look at the products but not buy them.

In this case, you probably do not need the Cart and Checkout pages, so you remove them. However, Storefront still shows a menu in the Footer area when you visit the site on a mobile device. This menu leads you to the Cart page as well, which you removed.

In this tutorial, I am going to share how you can remove the handheld footer bar. I will share two solutions that you can use to achieve the same result.

Steps to Hide the Handheld Footer Bar in the Storefront Theme

The best thing about choosing WooCommerce and the Storefront theme is that you can modify and customize your website entirely. The code and content on your site are yours to change in whatever way you want.

To tailor the look and functionality of your site, you can make adjustments by adding code. In this case, we want to hide the mobile footer in the Storefront theme.

Here are the steps that you need to follow:

Log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file to add the function to hide the handheld footer bar in the Storefront theme.
Add the following code to the function.php file:

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

To see the outcome, refresh the site on a mobile device, and you will see that the footer bar has been removed:

Alternatively, you can also use CSS to hide the footer bar. I recommend using the Additional CSS section to make this customization, as you have a real-time preview of all the changes you make.

To hide the handheld footer bar, we will use the following CSS code:

#colophon .storefront-handheld-footer-bar {

display: none;

}

Here are the steps that you need to follow:

Log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on Appearance Menu > Customize.
Navigate down to Additional CSS in the left sidebar that appears.
Add the CSS rule, as shown below:

Conclusion

In summary, I have shared how you can remove the handheld footer bar in the Storefront theme. I started by making changes to the function.php file and then the theme’s stylesheet. If you are using the functions.php file, I recommend using a child theme. This is because when you update the Storefront theme, you will lose all the changes you made.

Editorial Staff

How to Hide Mobile Footer From Storefront WooCommerce

Storefront Hide Handheld Footer Bar

Steps to Hide the Handheld Footer Bar in the Storefront Theme

Conclusion

Similar Articles

Related