Remove Sidebar from WooCommerce Shop page

Travelify
1

Is there a way to suppress the sidebar when the WooCommerce Shop page is visible?

Thanks in advance!

2

Hi there

please provide url and i will take a look

3

Yes, I want to remove the sidebar (or just the YITH donations for WooCommerce widget) for:

• both of these product pages:

https://stubbornperseverance.org/product/sp2-pb/

https://stubbornperseverance.org/product/sp2-elec/

• and this shop page:

https://stubbornperseverance.org/shop/

I tried the following custom CSS entries for the first product, since this approach has worked for me on other pages:

.postid-1358 #main-nav {
display: none;
}

.page-id-1358 #main-nav {
display: none;
}

However I don’t fully understand what I’m doing, and neither of the approaches below seemed to work for the product link above.

And I don’t really want to kill off the full menu on these pages, just the right sidebar (or preferably just the Yith Widget for Donations). That widget is introducing confusion to the shopper experience.

Thanks!

4

hey there

If you want to remove only widgets from the sidebar go ahead and remove them from appearance > widgets and remove widgets from the sidebar you want, im little bit confused, is this a real problem?

Thanks!
Colorlib Support Team

5

I would like to keep the widget on all pages except the three listed above:

• both of these product pages:

https://stubbornperseverance.org/product/sp2-pb/

https://stubbornperseverance.org/product/sp2-elec/

• and this shop page:

https://stubbornperseverance.org/shop/

If you can tell me how to suppress the widget just on these three pages, that would be great.

If I can’t remove just the one widget without removing the whole sidebar from these three pages, I would like to know how to remove the sidebar from these three pages.

I imagine that the shop “page” (with product listings) is the most problematic, as this doesn’t have an editable page.

Thanks again!

6

hey there

Please add this CSS in appearance - customize - additional CSS

.archive.woocommerce.woocommerce-page #secondary,
.archive.woocommerce.woocommerce-page.postid-1358 #secondary
.archive.woocommerce.woocommerce-page.postid-2547 #secondary {
display: none;
}

.archive.woocommerce.woocommerce-page #content-woocommerce,
.postid-1358 #content-woocommerce,
.postid-2547 #content-woocommerce {
width: 97%;
}

Thanks!
Colorlib Support Team

7

Works perfectly. Thank you so much!

8

Thank you too :slight_smile:

I will close this case now, Feel free to contact us again if you have other questions Thanks!