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.

24 replies
  1. Ashley
    Ashley says:

    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!

    Reply
    • Ashley
      Ashley says:

      I just make it work by using this CSS

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

      Anyways, thanks for the good work 🙂

      Reply
  2. Doris
    Doris says:

    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!

    Reply
  3. Ana
    Ana says:

    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!

    Reply
  4. henk
    henk says:

    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

    Reply
  5. Jim
    Jim says:

    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;
    }

    Reply
  6. Michelle
    Michelle says:

    I’ve done everything you right about and the sidebar was just pushed below the site content 🙁
    and I wan’t it do be removed

    Reply
  7. emily
    emily says:

    I’ve done this and yes it perfectly got rid of the sidebar, but of course left the space where the sidebar was empty. I would prefer if the content stretched to the full width of the screen so that it doesn’t look lopsided, is there a way I can do that instead?

    Reply
  8. Emma
    Emma says:

    I’m using storefront and it’s deleted the sidebar from everywhere except the cart and checkout. Is there a way to delete it from there too? I tried Ana’s solution but that didn’t work for me.

    Reply
      • Emma
        Emma says:

        Hi! sorry I’m pretty new to woocommerce. Can you tell me where I’d go to edit those pages / what I’d need to edit? Thanks so much.

        Reply
        • Nicola Mustone
          Nicola Mustone says:

          They are regular WordPress pages so you can find them in Pages > All Pages. On the right, you can find a drop-down to choose the template of the page. With Storefront active, there’s an option “Full Width” in that dropdown.

          Choose that.

  9. Stefan
    Stefan says:

    Hi!

    Your code works as expected and is one of the few that is correct on the Internet.
    But I have a question. How can you customize the CSS if some pages are with a sidebar and some are without.

    Thanks, Stefan

    Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

You have to agree to the comment policy.

This site uses Akismet to reduce spam. Learn how your comment data is processed.