Posted on

Remove the sidebar from WooCommerce pages on Storefront

Are you using Storefront on your shop? If yes, you noticed maybe that your shop page, and all other WooCommerce pages such as product page, category archive, etc. always have a sidebar.

By default, there’s not an option to remove it. Unless you use the Storefront extension Storefront WooCommerce Customizer.

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.

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

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

Now, all your WooCommerce pages won’t have a sidebar.

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.

15 thoughts on “Remove the sidebar from WooCommerce pages on Storefront

  1. Hi,

    I am trying to remove the sidebar just on the shop page (keep it in the products and categories), therefore I have replaced is_woocommerce to is_front_page and it worked. (Thanks for the snippet!)

    The problem is I can’t get the CSS work the way I want to, the sidebar was on the left and I just want the front page to be full width. Can you shed some light on this? thank you!

    1. I just make it work by using this CSS

      body.woocommerce #primary.content-area {
      float: none;
      width: 100%;
      }

      Anyways, thanks for the good work 🙂

  2. thanks for sharing this how-to Nicola, much appreciated!

    Patrick

    1. You’re very welcome!

  3. Hi,
    Thanks, the php code worked when I used the conditional tag so that the sidebar doesn’t show on my product pages and only on the category pages. BUT, the CSS makes full width pages across the site. It would be great if you could please share the CSS so that the Category pages are not full width but shows the sidebar next to the content instead of pushed down to the bottom of the page.

    Thanks!

    1. I searched and fiddled, and this does the trick:

      .single-product .content-area {
      float: none;
      margin-right: 0;
      width: 100%;
      }

      1. Thanks for sharing your code Doris!

  4. Still present in cart and checkout :/

  5. I’m not a professional so try this at your own risk. I just read the links provided and compiled it. To remove sidebar from all pages on your woocommerce / remove sidebar from checkout and cart pages:

    add_action( ‘get_header’, ‘remove_storefront_sidebar’ );
    function remove_storefront_sidebar() {
    if ( is_woocommerce() || is_cart() || is_checkout() || is_account_page() ) {
    remove_action( ‘storefront_sidebar’, ‘storefront_get_sidebar’, 10 );
    }
    }

    That aside, there’s not an empty space where the sidebar used to be, how do I make everything full-width, including the cart, checkout and account pages?

    Thank you!

    1. Hi,
      You can use this CSS:

      #primary {
          float: none;
          width: 100%;
          margin: 0;
      }
      

      If you don’t know how to use custom CSS you can learn it here.

  6. hello guys,

    You have been talking about removing the sidebar but I have a problem the other way around. On my homepage or FrontPage there is no sidebar. But I want the sidebar to be showen here can you help

  7. Thank you for this code, that works perfectly !

  8. So… i searched about a dozen different articles trying to get the sidebar off of my main shop page, and none of the solutions worked.. however, i was able to piece together a couple of different things and finally came up with adding this to my ‘additional css’ area:

    .woocommerce #primary {
    float: none;
    width: 100%;
    margin: 0;
    }
    .woocommerce #secondary {
    display: none;
    }

    1. Good, Jim, but this code will simply hide the sidebar. Search engines and bots will still see it because it’s there in the code, hidden.

Leave a Reply
You have to agree to the comment policy.