Nicola Mustone

Happiness Lead @ Automattic

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.

Before implementing any code changes, always ensure your site is backed up. This will help you restore things in case of unforeseen errors. I recommend using Jetpack Backup for real-time backups and one-click restores.

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

add_action( 'get_header', 'remove_storefront_sidebar' );
function remove_storefront_sidebar() {
if ( is_woocommerce() ) {
remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
}
}
view raw functions.php hosted with ❤ by GitHub

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

body.woocommerce #primary {
float: none;
width: 100%;
}
view raw style.css hosted with ❤ by GitHub

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.

Advertisements

Subscribe to This Blog

Receive new articles from this blog directly in your inbox! No spam guaranteed!

Join 651 other subscribers

Contribute to Improving This Blog

Did you enjoy this article? Was it helpful? Contribute to help me write more articles! The funds collected from this blog are reinvested directly into improving my skills or the blog so that I can provide more and better content!

One-Time
Monthly
Yearly

Make a one-time donation

Make a monthly donation

Make a yearly donation

Choose an amount

€5.00
€15.00
€100.00
€5.00
€15.00
€100.00
€5.00
€15.00
€100.00

Or enter a custom amount

€

Your contribution is appreciated.

Your contribution is appreciated.

Your contribution is appreciated.

DonateDonate monthlyDonate yearly
,
Advertisements

More Posts That You Might Like…

32 responses to “Remove the sidebar from WooCommerce pages on Storefront”

  1. Ashley Avatar
    Ashley

    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
    1. Ashley Avatar
      Ashley

      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
      1. erkange Avatar
        erkange

        Hi thanks for reply, but this one make category pages with 100% also.
        can you share the code only for single product page?

        Reply
  2. Patrick Avatar
    Patrick

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

    Patrick

    Reply
    1. Nicola Mustone Avatar
      Nicola Mustone

      You’re very welcome!

      Reply
  3. Doris Avatar
    Doris

    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
    1. Doris Avatar
      Doris

      I searched and fiddled, and this does the trick:

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

      Reply
      1. Nicola Mustone Avatar
        Nicola Mustone

        Thanks for sharing your code Doris!

        Reply
      2. erkange Avatar
        erkange

        thanks for sharing. this works great.

        Reply
  4. Andre Avatar
    Andre

    Still present in cart and checkout :/

    Reply
  5. Ana Avatar
    Ana

    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
    1. Nicola Mustone Avatar
      Nicola Mustone

      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.

      Reply
  6. henk Avatar
    henk

    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
  7. Fred Avatar
    Fred

    Thank you for this code, that works perfectly !

    Reply
    1. Nicola Mustone Avatar
      Nicola Mustone

      You’re welcome!

      Reply
  8. Jim Avatar
    Jim

    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
    1. Nicola Mustone Avatar
      Nicola Mustone

      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.

      Reply
    2. John Edward Avatar
      John Edward

      This worked for me. Thanks!

      Reply
  9. Michelle Avatar
    Michelle

    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
  10. emily Avatar
    emily

    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
    1. Nicola Mustone Avatar
      Nicola Mustone

      Hi Emily,
      The CSS code in the second snippet does exactly that, did you add it to your theme?

      Reply
  11. Emma Avatar
    Emma

    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
    1. Nicola Mustone Avatar
      Nicola Mustone

      Hi Emma,
      You can edit those 2 pages and set their template to Full Width. This snippet is only for the shop pages. Any other page can use the template.

      Reply
      1. Emma Avatar
        Emma

        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
        1. Nicola Mustone Avatar
          Nicola Mustone

          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.

  12. Stefan Avatar
    Stefan

    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
  13. Bo Herrmannsen Avatar
    Bo Herrmannsen

    i tried this and what ana suggested November 4, 2017 at 4:33 PM

    the side bars are still there 🙁

    Reply
  14. Kassim Avatar
    Kassim

    Please help, I had uploaded the child theme and added all the snippest code as above but still things didnt change, I had tried to activate the child theme, then only side bar get removed but still the white space where the sidebar existed remained blank.

    Any comment please?.
    I’m not good in coding.

    Reply
  15. Rob Avatar
    Rob

    Hi – How I would use function to remove the sidebar from all pages, apart from the shop pages – where I want to keep the sidebar?

    Reply
  16. Joshua Avatar
    Joshua

    Hello .. been trying these options above and none has worked for me,… kindly help

    Reply
  17. pixup marketing Avatar
    pixup marketing

    That snippet works fine with storefront. Thanks bro!

    Reply
    1. Nicola Mustone Avatar
      Nicola Mustone

      You’re welcome!

      Reply

Leave a Reply

Advertisements

Categories

Newsletter

Receive new articles from this blog directly in your inbox!

No spam guaranteed!

Join 651 other subscribers

About The Author

Hi, I’m Nico! Support Lead at Automattic, championing WordPress.com & WooCommerce. Off-duty, I’m at Elemental Beacon, leading epic D&D adventures. Let’s connect, whether it’s about WordPress or a quest!

Advertisements

Don't Miss a Thing!

Receive new articles from this blog directly in your inbox!

No spam guaranteed!

Join 651 other subscribers

Continue Reading

%d bloggers like this: