Disable the Sidebar on Product pages in WooCommerce Storefront Theme

I use Storefront for all of my plugin demos. As such, I have made a child theme and done some basic customisations to bring the theme inline with my branding.

One of the customisations I made was to hide the sidebar on product pages. There’s a few tips around on how to do this, but required adding some CSS which I didn’t want to do. The following snippet disables the sidebar with no additional CSS required, whilst still making the product page content area 100% wide.

You can add this code to the functions.php file in your Storefront child theme. If you’re not using a child theme, try the Code Snippets plugin.

13 Comments

  1. Ken says:

    Hi there – I have a problem that’s closely related to this. My wordpress blog sidebar (widget) shows up on my Woocommerce single product page. How would I remove it without display: none; ? Any help is appreciated. Thanks!

  2. Sam says:

    How do I do this but also on the “shop” page for instance? I got it to work on product pages but not on shop pages.

    Thanks!

  3. Calcu Lataur says:

    When I use your snippet on storefront the footer widgets disappear from those pages

  4. Adam says:

    Thanks James, that works perfectly !

  5. Pedro says:

    thanks for your tip! it worked perfectly!

  6. Zac says:

    Perfect, had been looking for a way to do this which didn’t require a load of CSS!

  7. Thanks for this. Now I need to make a full width product area only when sidebar is hidden.

  8. Albano says:

    thanks a lot!

  9. The best! 🙂 Worked like a charm!

  10. Other option: Remove all items in Main Sidebar, and use a custom sidebar for blogposts etc.

  11. Vladimír Vojík says:

    Hello, nice script, thank you.

    I am new in WordPress – could you please just shortly explain from where there are these variables (as parameters) $is_active_sidebar and $index.

    Thank you.

  12. David D says:

    I am trying to make the product image wider and the summary less wide. I have tried a number of css selectors including the below without luck. If I remove your snippet from functions.php then the css works fine. Any ideas?

    @media (min-width: 768px){
    .storefront-full-width-content.single-product div.product .woocommerce-product-gallery{
    width: 56.5217391304%;
    float: left;
    margin-right: 4.347826087%;
    margin-bottom: 3.706325903em;
    }
    }

    @media (min-width: 768px){
    .storefront-full-width-content.single-product div.product .summary {
    width: 39.1304347826%;
    float: right;
    margin-right: 0;
    margin-bottom: 3.706325903em;
    }
    }

Leave a Reply

Your email address will not be published. Required fields are marked *