How to Customize WooCommerce Storefront Mobile

Many people use mobile phones to access the internet. According to a mobile behavior study by Iacquire, about 40% of visitors doing mobile searches will leave a site if it is not mobile-friendly. Additionally, they will go to a competitor’s shop.

Table of Contents

Storefront Customize Mobile

It is worth mentioning that devices are becoming ubiquitous, and consumers will only become more comfortable buying those devices. If you are starting a WooCommerce store, you need to get on board with the mobile program. This means that your site must be mobile-friendly.

WooCommerce enables you to create an eCommerce site on WordPress. It can be mobile-friendly, but it depends on the theme that you are using.

The official WooCommerce theme, Storefront, is mobile-friendly. This theme has a responsive design, meaning that the site adjusts to the size of the user’s device. It works well on all devices like smartphones, tablets, laptops, and desktops.

However, it is important to note that a responsive theme is not a golden ticket. It would help if you made some customization to fit your brand.

In this post, I will share some snippets to customize the mobile version of the WooCommerce Storefront theme. Before that, here are some WooCommerce mobile tips that can help you:

Speed is very important, as shoppers will abandon a site that takes more than 3 seconds to load.
Keep your texts short. People need good content, which is also important for search engine optimization. However, you should only add relevant information.
Make your menu easy to navigate so that users can easily find what they are looking for without clicking around.
You should always test the mobile experience of your WooCommerce store. Pay attention to how visitors can successfully make a purchase and make everything visible.

With that said, let us look at some customization that you can make on the mobile version of WooCommerce.

WooCommerce Storefront Mobile Customization

1. Change Size of Mobile Menu Button Storefront Theme

To change the size of the mobile menu button, add the following CSS code in the Additional CSS section:

button.menu-toggle{

font-size: 19px;

}

Here is the outcome:

2. Change Size of Mobile Header Storefront Theme

To change the size of the mobile header, add the following code in the Additional CSS section:

/* Masthead */

#masthead.site-header {

height: 155px!important;

margin-bottom:0px

}

Here is the outcome:

3. Adding a Menu in the Mobile Version

It is very easy to add a menu in the Storefront mobile version using the WordPress customizer. Once you have opened the customizer, click on the Menu link > Secondary menu. Here you can add items to the mobile menu as shown below:

4. Hide the Storefront Mobile Cart Icon

To hide the Storefront mobile cart icon, add the following code in the Additional CSS section:

.footer-cart-contents{

display: none!important;

}

Here is the outcome:

5. Hide the Storefront Mobile Footer

To hide the Storefront mobile footer, add the following code in the Additional CSS section:

#colophon .storefront-handheld-footer-bar {

display: none;

}

Alternatively, you can add it in the function.php file of the Storefront theme:

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

Here is the outcome:

Conclusion

In summary, I have shared some of the tweaks you can make on the Storefront Mobile version. Moreover, I have shared some tips on enhancing the mobile experience of visitors to your WooCommerce Store.

The storefront theme is dubbed the official WooCommerce theme. I highly recommend using this theme, as it is responsive and can work on any device. It would be best if you also made your menu easy to navigate so that users will not have a hard time finding what they are looking for in your store.

Editorial Staff

How to Customize WooCommerce Storefront Mobile

Storefront Customize Mobile

WooCommerce Storefront Mobile Customization

1. Change Size of Mobile Menu Button Storefront Theme

2. Change Size of Mobile Header Storefront Theme

3. Adding a Menu in the Mobile Version

4. Hide the Storefront Mobile Cart Icon

5. Hide the Storefront Mobile Footer

Conclusion

Similar Articles

Related