Support » Plugin: WooCommerce » Targetting css to specific product page

  • Resolved grahamcopestake

    (@grahamcopestake)


    Hi,
    I’m trying to apply css to a particular product bundle page. There are three i’d like these css codes to be applied to which will change the layout of the grid style to fall beneath the picture. However i use the class .postid-1175 to target that product page it doesn’t work. If i remove the .postid-1175 it does work but then applies it to all product pages. Please help!

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support Senff – a11n

    (@senff)

    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;
    }
    Thread Starter grahamcopestake

    (@grahamcopestake)

    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.

    Plugin Support Senff – a11n

    (@senff)

    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%;
    }
    Thread Starter grahamcopestake

    (@grahamcopestake)

    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

    Plugin Support abwaita

    (@abwaita)

    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.

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.