Remove sidebar in Storefront – .com

In this tutorial we are going to see how to remove the sidebar from Storefront, the official free WooCommerce theme.

The sidebar at Storefront

The sidebars found on the pages of online stores are usually used to place filters, categories and relevant information for customers and potential customers.

But sometimes, due to the type of store or for another reason, we don’t need those features or we simply want a more minimalist design, and we want to remove them.

Well, Storefront allows us to make modifications using code and through the customizer. If we also use the Powerpack plugin, the options are considerably expanded as we see in the .

In this case we are going to choose to do it using only code, and we will hide the sidebar not only from the entire page, but also on specific pages. Go for it!.

Remove sidebar in Storefront using code

The first thing we are going to see is the code we need to remove the sidebar from the entire web when we have the Storefront theme activated.

This PHP code can be added in several ways to WordPress. In this case we are going to do it through a utilities pluginwhich, as we have seen on other occasions, is very useful when modifying or adding functionalities.

Let’s remember that we could also do it using other methods, if you are interested in the subject you can take a look at the tutorial.

Okay, so let’s get started. First of all we must access the WordPress dashboard, “Plugins” and deactivate our utility plugin. Once done, we need to edit the plugin code to add this modification.

For this we will use an FTP program such as Filezilla, or the file manager of the hosting where we have the site hosted. Next, we’ll add the following code snippet to the end of the plugin. Finally, we will click on save and we will activate the plugin again for the changes to take effect.

function bld_remove_sidebar() { remove_action( ‘storefront_sidebar’, ‘storefront_get_sidebar’, 10 ); } add_action( ‘get_header’, ‘bld_remove_sidebar’ );

Now that we have applied it, let’s see how the website would look without the sidebar:

As we can see, the sidebar has been removed, but the width of the product block has not changed and there is an empty space where the sidebar used to be. So we’re going to make a small change to the CSS to set the full width to fill that space.

The most appropriate way would be to make this modification in the style sheet of a Storefront child theme, although it is not the only way. We could also use the WordPress customizer, “Appearance/Customize/Additional CSS” or a Simple Custom CSS type plugin.

In this case we will see this last option. This plugin is very simple and allows you to add custom styles, which is what we are looking for. Also, the good thing about it is that the styles that we add will be maintained even if we update the theme. We are going to see how to use it, you will see how easy it is.

The first thing will be to access the WordPress dashboard, and go to “Appearance / custom CSS”. Here we will find an editor where we can paste the css code that we are going to use to modify the appearance of our site, in this case the line: body.woocommerce #primary { width: 100%; }

Then we must click on “Update the custom CSS” and we will have it ready. Let’s see what the result would be.

It fits well, right? With code we can do pretty much whatever we want. By the way, if you want to learn more about modifying Storefront with code, you can go ahead, it would be very interesting :).

Remove sidebar from specific pages in Storefront

In the previous section we saw the code necessary to remove the sidebar from the entire site. Now we are going to see what we would need for remove sidebar one page or specific pages.

Again, we will have to go to the WordPress desktop, deactivate the utility plugin, and access it through the hosting file manager or directly via FTP. When we do, we could add the following code:

function bld_remove_sidebar() { if (is_product()){ remove_action( ‘storefront_sidebar’, ‘storefront_get_sidebar’, 10 ); } } add_action( ‘get_header’, ‘bld_remove_sidebar’ );

Remember that, after adding it, we must save it and reactivate the plugin. Here what we do is indicate that we want to eliminate the sidebar (line remove_action( ‘storefront_sidebar’, ‘storefront_get_sidebar’, 10 );) only on the product page (if (is_product())). However, if instead of that code we include this other one:

function bld_remove_sidebar() { if (is_cart()){ remove_action( ‘storefront_sidebar’, ‘storefront_get_sidebar’, 10 ); } } add_action( ‘get_header’, ‘bld_remove_sidebar’);

We will be eliminating the sidebar only in the case of the page corresponding to the shopping cart. Although, the design of this particular page could also be modified from “Pages”, opening the Cart page in edit mode, and changing the “Template” to “Full Width”.

In any case, if we use code we only need to modify one line, the one that checks the page we want to customize. It would be done in the same way in other cases, we would simply have to change the condition.

Summary and conclusion

In this tutorial we have learned how to remove the sidebar from the Storefront theme. To do this we add a small piece of PHP code in a utility plugin.

By minimally modifying this code we can eliminate the sidebar from the entire site or only from the pages that interest us, as we have seen.

And you already know, if you want to learn more about , , or WordPress in general, we recommend the courses. If you subscribe you will be able to ask your questions to the support team and you will have access to all the courses. More than 6047 videos await you. Don’t miss them! 🙂