Targetting css to specific product page

Hey @grahamcopestake

For the page you linked in your original post, you’ll need to use the class postid-1135. For example, this will add a green border to just that particular page, and no other page in your site:

.postid-1135 {
border: solid 10px lime;
}

Hi there,
Sorry when i typed .postid-1175, I actually meant .postid-1135.
The .postid-1135 doesn’t work for me to target that specific page.

If you check out this page https://www.petoramapetshop.co.uk/product/10-build-your-own-bundle, it shows 3 columns of bundled images, however on large desktops it needs to be at least 4 columns of products as the products look to large otherwise.

Hence i added this css to target them, but changes all pages not just this one.

.postid-1135 .woocommerce ul.products.columns-3 li.product, .woocommerce-page ul.products.columns-3 li.product {
width: 20% !important;
}

.postid-1135 .woocommerce ul.products li.last, .woocommerce-page ul.products li.last {
margin-right: 3.8%;
}

Please help me sort this.

Hey @grahamcopestake

You may be mixing up some products a bit.

You can use classname postid-1135 for this particular product (￡20 Build Your Own Bundle).

However, to target this product (￡10 Build Your Own Bundle), you will need to use postid-1136 as the classname.

Another thing you should look at, is that every rule in your CSS has this classname. In the code you pasted, you’re using .woocommerce-page ul.products.columns-3 li.product which targets every product.

So, for example to target only the ￡10 Build Your Own Bundle product, use this code:

.postid-1136 .woocommerce ul.products.columns-3 li.product, 
.postid-1136 .woocommerce-page ul.products.columns-3 li.product {
width: 20% !important;
}

.postid-1136 .woocommerce ul.products li.last, 
.postid-1136 .woocommerce-page ul.products li.last {
margin-right: 3.8%;
}

Thanks @senff that’s helpful, however can you please check out the quantity on this page.
https://www.petoramapetshop.co.uk/product/10-build-your-own-bundle/

At the moment the Quantity is on its own line which looks odd and messy so I want the Quantity to sit on the left of the Add To Basket button. Which i would like your help to achieve please.

Can you please help with the appropriate css code for this page only.

Thank you

Hi @grahamcopestake,

Just checked your site, I see that you were able to move the quantity field to the left of the “add to basket” button. Therefore, I’ll go ahead and mark this thread as resolved.

Please feel free to create a new thread if you have further questions.

Thanks.