WooCommerce

101 WooCommerce Theme Storefront remove sidebar super fast

Iakovos Frountas

Iakovos Frountas

In this article

Storefront is a nice starter WooCommerce theme. It is something like the Underscore_s but for the WooCommerce. This could be the base to build a beautiful e-shop. If you are using the Storefront Theme on your eCommerce site, you noticed maybe that your shop page and all other WooCommerce pages such as product page, category ... Read more

Storefront is a nice starter WooCommerce theme. It is something like the Underscore_s but for the WooCommerce. This could be the base to build a beautiful e-shop. If you are using the Storefront Theme on your eCommerce site, you noticed maybe that your shop page and all other WooCommerce pages such as product page, category archive, etc. always have a sidebar.

Unfortunately, you can’t find any option in the dashboard to remove it. Unless you use the Storefront extension Storefront WooCommerce Customizer.

WooCommerce Storefront remove sidebar
WooCommerce Storefront Homepage

But there’s also another way to remove it

If you are into coding, you can unhook some Storefront actions to remove the sidebar on all WooCommerce pages or only some of them, and with a bit of CSS you can increase the size of the main container.

In WooCommerce Theme Storefront remove sidebar

Open your functions.php file in wp-content/themes/your-child-theme-name/ and add this code at the end of it:

[prism url=”https://gist.githubusercontent.com/ifrountas/27218c261daaa8987c7d958f3dabc48a/raw” language=”php”]

Now, open your child theme’s style.css in the same location and add this code:

[prism url=”https://gist.githubusercontent.com/ifrountas/9a360961edf04febf27a9d1d3315e028/raw” language=”css”]

Now you can see that all your WooCommerce pages won’t have a sidebar anymore.

WooCommerce Theme Storefront remove sidebar for some pages

If you wish instead to remove it only from some pages, like only on product pages, you can change the condition on line 3 in the first PHP snippet and use a different WooCommerce conditional tag.

Iakovos Frountas

Iakovos Frountas

Since 2008 I have helped businesses like yours increase their online presence through powerful websites that help you easily, effectively, and affordably grow your business.

9 thoughts on “101 WooCommerce Theme Storefront remove sidebar super fast”

  1. Thanks a lot for sharing this tutorial about how to remove the sidebar in woocommerce Storefront.

    Reply
  2. great, i’ve been pasting your code to my snippet.
    my question, does this practice will increase (a bit) time of speed load ? especially on mobile because it like straightly fill the screen of device. no more load the content in the sidebar.

    i guess so, since the page will don’t need to load some DOM and stylesheet of the sidebar.

    if not, how to make this practice help us increasing the page load

    Reply

Leave a Comment

Grab a cookie!

This site is using cookies in order to provide you the best possible user experience. You can either totally accept or reject our cookies and of course you can anytime edit your preferences from the settings menu.

Accept all Reject all Settings