Sidebar

Hey darren.goulden,

How are you doing today?

If the theme that you’re using doesn’t have full width page templates which you can select when creating pages the easiest way to do this would be to use CSS to hide it.

You can use page ID class in the selector to target CSS on specific pages only. If you want to do this please post links to those pages and I’ll try to help with some custom CSS.

Cheers,
Bojan

Hey Bojan,

Thanks for offer, appreciated.

The home page is https://effyswaxmelts.com/

I’d like to hide the sidebar on the shop page https://effyswaxmelts.com/shop/ and the products https://effyswaxmelts.com/product/extra-large-melt/ for example.

Thanks!
Darren

Hey Darren,

Please try adding the following CSS code in the style.css file of your child theme or if your theme doesn’t have custom CSS tab add it in your site using the following plugin:

https://www.ads-software.com/plugins/simple-custom-css

body.archive.post-type-archive.post-type-archive-product.woocommerce.woocommerce-page.js #secondary, .single-product #secondary {
    display: none;
}

body.archive.post-type-archive.post-type-archive-product.woocommerce.woocommerce-page.js #primary-mono, .single-product #primary-mono {
    width: 100%;
}

This should remove sidebar from shop and single product pages.

Hope this helps ??

Cheers,
Bojan

Worked a charm, thanks Bojan!

Glad I could help ??

Cheers,
Bojan

Hey Bojan,

Could you explain how to generate the page CSS line? for example

body.archive.post-type-archive.post-type-archive-product.woocommerce.woocommerce-page.js #primary-mono, .single-product #primary-mono {
width: 100%;
}

If I wanted to do this for the checkout or a custom page, is there an easy way to get this? I’ve looked at the inspect element in Chrome but unsuccessful so far!

Thanks

Hey darren.goulden,

Usually I’d just use page id class which you can find on all pages, you can check for that class when inspecting a page in the body element of the page, please see screenshot of your home page for example https://screencast.com/t/7QTX3S41Qlac.

The shop page you wanted this removed on doesn’t have one, so what I did was just targeted an element with ID that we want which is in this case #primary-mono and added all other classes from the body element from that specific page in the selector to make sure we don’t affect other pages
https://screencast.com/t/xrRG0S4f.

So the code will affect element with that ID only on a page that has those specific classes in the body element if that makes sense.

You can find more information on how to use dev tools in chrome for example here: https://developer.chrome.com/devtools.

Hope this helps ??

Cheers,
Bojan

Thanks Bojan, that explanation works perfectly ??

One other (minor) issue I have is the variations, if you select the ‘Loaf (extra large)’ product which has 4 variations there is a lot of padding in the cart area and the email that is sent out once ordered, see https://prntscr.com/8wzgbc, I’ve tried adjusting the 0.25em but it will only increase as opposed to decrease, how can I fix this?

oh and how do I display more than 10 products on the shop page? there is space for 2 more products to show on my 1st shop page but it takes the last 2 over to the 2nd page! =/

Hey there darren.goulden,

You should be able to overide this with the following:

td.product-name dl.variation dd {
    padding: 0;
    margin-bottom: 5px;
}

As for displaying more then 10 products on shop page you can try using settings from Settings -> Reading and set Blog pages show at most to 12.

Hope this helps and have a great weekend ??

Cheers,
Bojan

Aha it’s tied into the reading settings, doh! thanks!

CSS works perfectly, thank you!

Glad I could help ??

Cheers,
Bojan