Add padding to Woocommerce pages

[ladybirdenterprises]

Hi there,

I’m building my site and I need to add some padding around the edges of the Woocommerce pages (as I don’t wish to use global padding on the whole site (I have a good reason for that)). I’ve managed to achieve adding padding on the woocommerce products page by adding the following to the CSS:

.woocommerce div.product {width: 100%; padding: 0 2em 0 2em;}

However, I’ve not had any success doing something similar with the shop, cart, checkout and order confirmation pages.

I’m sure it’s just a simple bit of additional CSS, but I’ve had a look around and can’t find the classes that I need to add to fix this.

You can see on my product page the above CSS worked fine. Although I’ve got an odd floating stock count in the middle, any ideas how I can move that under the price?

Then if you have a look at my shop page, my cart, my checkout and the order confirmation, you’ll see they all need the same padding applied.

Can you help me out with the CSS classes I need to achieve that please?

Thank you,

Sarah.

[christian]

Hey Sarah,

Those are WooCommerce pages and the selector is different. The selector you need to add is .woocommerce-page .x-main so the overall code would be

.woocommerce div.product,
.woocommerce-page .x-main {
width: 100%; padding: 0 2em 0 2em;
}

Hope that helps.

[ladybirdenterprises]

That’s awesome, thank you. All fixed. Have a great rest of your day

[thai]

You’re welcome.