How to Hide Best Sellers Storefront Frontpage

The Storefront theme has accumulated more than 200,000 active installations in the WordPress Community. This theme is developed and designed by WooCommerce Core Developers. It was designed in a way that allows you to make customization that you need.

Table of Contents

Homepage customization is key in any online store. This is because it can attract visitors to your store and convert them to customers. In this tutorial, I am going to show you how you can hide the best sellers section in your storefront theme.

However, you need to learn how to set up the homepage template of your storefront theme for this to work. This theme has 6 sections on the Homepage:

Page Content
Product Categories section
Featured Products section
Recent Products section
Top Rated Products section
On Sale Products section
Best Selling Products section

There are a lot of reasons why you may want to remove the best-selling section. This section allows you to list best-selling products in order of popularity. This section offers you a neat way to draw attention to your main products, and give the most valuable estate to best-selling products making the most sales.

It is very easy to hide this section and all you have to do is follow these simple steps:

Steps to Hide the Best Sellers Section in Storefront Homepage

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 where we will add the function that will hide the best sellers section in the storefront homepage.
Add the following code to the php file:

function storefront_child_reorder_homepage_contant() {

remove_action('homepage', 'storefront_best_selling_products', 70 );

}

add_action('init', 'storefront_child_reorder_homepage_contant');

To see the outcome, refresh the homepage and you should see this:

It is also worth mentioning that you can use action references to further customize this section. It attaches a function to a hook as defined by do_action. For additional styling, you can use the Additional CSS section or the style.css file where you will input the CSS code.

Best-selling products

storefront_homepage_before_best_selling_products – Executed before the <section class="storefront-best-selling-products"> homepage section
storefront_homepage_after_best_selling_products_title – Executed after the <h2 class="section-title"> best-selling products section title
storefront_homepage_after_best_selling_products – Executed after the <section class="storefront-best-selling-products"> homepage section

Conclusion

It is as simple as that! In this post, I have highlighted the sections that are on the Homepage of the Storefront theme. Additionally, I have highlighted that the best sellers section can be used to increase sales as it offers you a neat way to draw attention to your main products.

However, for one reason or the other, you might want to remove this section. That is why I have shared a code snippet that you can use to remove this section. You might want to remove this section so that your homepage is not overcrowded, or you may opt to have a separate page for the best-seller products if they are many.

Editorial Staff

How to Hide Best Sellers WooCommerce Storefront Frontpage

Steps to Hide the Best Sellers Section in Storefront Homepage

Conclusion

Similar Articles

Related