WooCommerce: Apply CSS to One Product Only

Interesting topic. A client of mine asked me to remove the image from only one single product page – butย not from ALL the product pages. The same story applies if you want to apply CSS changes to any specific woocommerce page. Here’s how I did it.

1. Access you website and go toย the page or product page you want to “CSS-ify”

If you’re on Google Chrome, right click on your mouse and click on “inspect element”. If you’re in Firefox, useย Firebug. In both cases, you can see the page’s HTML source code and identify one of the very first lines, where the <body> tag starts:

woocommerce-css-target-product-single
“Inspect Element” in Google Chrome

In this case, we found a unique identifier of a product called “postid-745“. The same thing applies on any WooCommerce page: by looking at the source code, you should be able to find a unique identifier such as “page-id-9“.

2. Use the unique identifier in your CSS

For example, if you want to remove the image on one of your product pages and have its description cover the full page, simply use its identifier as a prefix:


/**
 * @snippet       Apply CSS changes to one WooCommerce page/product only
 * @how-to        Paste @ style.css
 * @source        https://businessbloomer.com/?p=342
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.4.3
 */

/* removes the image on product id = 53 */
.postid-53 div.images {
display:none;
}

/* stretches the product description on full width */
.postid-53 div.summary {
width: 98%;
float: none;
}

Where to add this snippet?

You can place PHP snippets at the bottom of your child theme functions.php file (before "?>" if you have it). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such files - if you need more guidance, please take a look at my free video tutorial "Where to Place WooCommerce Customization?"

Does this snippet (still) work?

Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7+.

If you think this code saved you time & money, please join other Business Bloomer supporters and avail of 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce Customization?

Check out these free video tutorials!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP

Rodolfo Melogli

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as a WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza.

65 thoughts on “WooCommerce: Apply CSS to One Product Only

  1. Thank you so much, its still working ๐Ÿ™‚

    1. Great ๐Ÿ™‚

  2. Excellent article. Please, how to put the id of the category to modify the css, it appears like this: product_cat & tag_ID = 17

  3. My body tag don’t have any classes in it. Inspecting shows simple

    1. Hey Otso, thanks so much for your message! Are you sure? Are you on a WooCommerce default page?

  4. Hello Rodolfo …… nice tutorial

    I am trying to add acction to one specific product only. I have added action and it is working, But it is showing on all the products. How can I limit it to just one specific product only ?

    Help would be appreciated.

    Thanks very much

    1. Hey Indy, thanks so much for your comment! I suggest you take a look at “conditional logic”: https://businessbloomer.com/conditional-logic-woocommerce-tutorial/ and https://businessbloomer.com/woocommerce-conditional-logic-ultimate-php-guide/. Let me know ๐Ÿ™‚

  5. Hi Rodolfo, thank you for the code. They still work.

    But now i have some problem with the image gallery of a single product page. I am not able to zoom in – out anymore and the animated effects are gone too. I assume it caused by this lines of code

    /* removes the image on product id = 53 */
    .postid-53 div.images {
    display:none;
    }

    What is the correct to revert this code?

    Thank you
    Thatthana

    1. I found a solution now just put display:unset and it works again. Thank you any way this really helps.

    2. unfortunately there is another issue when inserted this snippet the title, add to cart button are automatically relocated. How can I keep them where they are in default?

      Thank you

      1. Hey Thatthana, thank you so much for your comment! You will need to align them via CSS ๐Ÿ™‚

  6. Hi,

    Great blog ๐Ÿ™‚

    I know it’s an old post, but I can see you reeeally know your way around WooCommerce – so I’ll give it a shot!

    What if it is product category specific; how do I do that?
    If I want CSS to apply to an entire category and not just page/product. Is it possible?

    (Case: I need the site’s main header to have a different color on a handful of categories and the products within)

    Thanks in advance / Katrine

    1. Hey Katrine, thanks for your comment! Yes, you can target a specific category by selecting its body class e.g. “.term-34”. Inspect element as per the tutorial and you should find something like that ๐Ÿ™‚

  7. Hello

    I have a similar requirement – I have to display a custome product page for 1 product in my catalog (ie. All products should display the standard single product page – except 1 product which should display a custom wordpress page)

    Any idea how to implement?

    Thanks
    John

    1. Hey John, thanks for your comment! Have you tried any of the tips contained in this blog?

  8. Hello Rodolfo, thanks for the guide.
    Im having a problem trying to edit single product page for only one product. You see, i got different products and i need the product summary to have different widths on each product. But they all just take the width that was last declared on the CSS file even when using the unique postid.

    For example if i use this code to try and make each summary of different width:

    .postid-290 .woocommerce div.product div.images, .woocommerce div.product div.summary  {
        margin-bottom: 2em;
        margin-top: 2em;
        width: 400px;
        margin-top: 0px;
        padding-left: 10px;
    }
    .postid-540 .woocommerce div.product div.images, .woocommerce div.product div.summary  {
        margin-bottom: 2em;
        margin-top: 2em;
        width: 300px;
        margin-top: 0px;
        padding-left: 10px;
    }
    

    Both postid-540 and postid-290 end up having 300px of width. And if i place an !important tag on the width of the post-id 290 then also postid-540 adopts the 400px width.

    Is this something that can’t be achieved via CSS?

    1. Hey Manuel, thanks for your comment! Even the second call, after the comma, needs the .postid call, you forgot that. The correct call is:

      .postid-290 .woocommerce div.product div.images, .postid-290 .woocommerce div.product div.summary {
      ...
      }
      
      1. Hello Rodolfo, thank you so much for the reply.

        But it doesn’t seems to be working for me. When i put the .postid after the comma just like you suggested, the CSS doesnt work. Non of the elements im trying to target are being changed and they all take the default styling.

        When i eliminate the second postid. The elements get the style im trying to apply but i get the same problem in which the last style is applied to every postid.

        Any idea why this might be happening, is there anything else i can share with you?

        Have a great day

        1. Manuel, it could be you’re not giving this CSS enough “power” to be called first in the cascade, and therefore Woo default CSS overrides your calls. Sorry but this is specific to your site and cannot give support here. Thank you!

  9. It,s Similar to Mikel!s query.On product page I have placed thumbnails horizontally right side of product main image .So that the main image and thumbnails have same size and height and sit horizontally next to each other.Category one has two thumbnails and category two has three thumbnails.how can i add css in php and put condition in function.php that category one uses one css snippet and cat 2 uses the other css snippet.Thank you

    1. Hey Robin, thanks for your comment! Can you paste here the code you’ve tried using? Thanks ๐Ÿ™‚

      1. Thank you for the reply.

        To achieve the results for above stated problem ,i have tried putting conditional css in functions.php but its not working.

        1. Robin, maybe the ideal thing to do here is adding the product category to the classes, so that you can target them via CSS. I just published an article to help you with this: https://businessbloomer.com/woocommerce-add-category-css-body-class/. Let me know ๐Ÿ™‚

          1. Thank you.Nice article.It helped.

  10. Thank You so much for helping.my issue are done…

    1. You’re welcome Shiwani!

  11. Hi rodolfo,
    I just wonder how to hide Short Description in woocommerce shop page (where there are all products!
    Thank you for your time

    1. Hey Tonino, thanks for your comment! The short description does not show on the default WooCommerce Shop page, so it must be your theme. I would recommend to ask your theme support, as I’m afraid I can’t provide a complementary fix here on the blog. Thanks a million ๐Ÿ™‚

  12. worked perfect for me…thanks.

    1. Awesome! Thanks for your feedback Ed ๐Ÿ™‚

  13. Hi, Rodolfo.
    I just wonder how to hide Related Woocomerce product on specific product.
    Let’s say i have product with postid=4216
    Then i add this CSS:

    .postid-4216 .related.products {
    display: none !important;
    }

    But it didn’t work.
    Have any idea?
    Thanks. I really appreciated.
    ๐Ÿ™‚

    1. Hey Taufan, thanks for your comment! Display:none is not recommended CSS, however the one you posted works perfectly on my test website. Try clearing your cache ๐Ÿ™‚

  14. Hi, Rodolfo.
    I just wonder how to hide Related Woocomerce product on specific product.
    Let’s say i have product with postid=4216

    .postid-4216 .related.products {
    display: none !important;
    }
    

    But it didn’t work.
    Have any idea?
    Thanks. I really appreciated.
    ๐Ÿ™‚

  15. Hi Rodolfo,
    In my homepage I have the wordpress categories with static icons.
    How can I apply animation to icons of my wordpress categories? (Transition left to right, appear from center, etc…)
    Thank you in advance!
    Regards
    Andrea

    1. Hey Andrea, thanks for your comment! I’m afraid this is custom CSS and it’s independent from WordPress/WooCommerce. Have you tried asking on a CSS Facebook Group maybe?

      1. No, I try to ask immediatly!
        Thank you very much!

        1. You’re welcome ๐Ÿ™‚

  16. Dear Rodolfo,
    Thank you for your excellent tutorial, as always.
    I’m trying to exactly what you have described, but instead of a single “simple” product, I need it for a “variable” one.
    Please have a look: https://pocket-tripod.com/store/8-0-mm-pocket-tripod/

    What I like to do is to have certain sections under the product description to hide, depending on which variation is chosen. Because some of the information won’t be applicable to all variations (ex, Type: Adapters Only).

    The description section is created using the plugin Visual Composer, and lets me mark various sections with classes. Thanks to that, I can use these classes in a custom CSS for hiding/unhiding sections.

    However, I don’t know how I can indicate in the CSS which variation is selected. I’ve tried

     
    .postid-9413 .skip-if-ad {
            display: none;
        }
    

    Where the product’s page ID is 9410 and the specific targetted variation ID is 9413. Unfortunately, it’s not having no effect.

    Is there any way that you can help me out with this? I would really appreciate it if you can help me find a solution.

    Thank you,
    Rambod

    1. Hey Rambod, thanks for your comment ๐Ÿ™‚ As long as I see you managed to fix this, am I correct? Let me know. R

      1. Hey Rodolfo, thanks for the quick response!
        No, I haven’t been able to figure it out yet. If you look at my code in my comment, you’ll see that I’ve used “.postid-9413” to identify the variation. However, this doesn’t seem to have any effect. It only works if it was a simple product with that ID, but the product page’s parent ID is 9410. The 9413 is one of its variations.

        Can you help me find a way to target the CSS at variations products within the same product page?

        Thank you!
        Rambod

        1. Hello Rambod, I’m afraid you can’t do that with PHP. Once a specific variation is selected, some Javascript triggers and the price, add to cart and variation-specific content is displayed.

          You can therefore only achieve that by coding in JS, which – I’m afraid – is pretty custom work and I can’t provide the fix right here in the comments. Hope this makes sense ๐Ÿ™‚

          1. That’s too bad. Thanks for letting me know.

            Cheers,
            Rambod

            1. No problem at all ๐Ÿ™‚ Have a great day!

  17. This is exactly what I have been looking for. Would you know how I might be able to customise the ‘Main Theme Color’ for individual products? I’d like to use a color scheme that compliments the product. Or maybe my real question is where I should put this custom CSS, would Theme Options for shopkeeper theme suffice? Thanks

    1. Hey Justin, thanks for your message!

      Using .postid-53 should be totally sufficient for what you’re trying to do there, unless I misunderstood ๐Ÿ™‚ All your CSS changes and PHP customization should be placed in your child theme.

  18. Hey Rodolfo,

    Thanks for this tutorial!

    Unfortunately, I can’t get it work and I am not sure what the others meant with removing #main (as there seems nothing more to be removed?).

    Could you help me out a bit more?

    Thanks in advance,

    Kind regards,

    Johan

    1. Sure Johan, if you copy/paste your snippet and give me a link to your page I will take a look!

      1. Thanks, Rodolfo!

        It is about the following: I use Gravity Forms, Woocommerce and Gravity Forms Woocommerce Add-on, to show a form on my homepage (www.greenhouseghana.com) to raise money for children to go to school in Ghana (it is called โ€˜Support Education Fundโ€™).

        The problem is, I can not use the Form-widget of Gravity Forms, as I am using the Woocommerce Add-on to use the form as a product in Woocommerce. Therefore, I use the plugin/widget โ€˜Enhanced Textโ€™ with as content the shortcode โ€˜[product_page id="399"]โ€˜ to show the product page of the Gravity Forms product. But, even when the product image is hidden on the single product page, it does show up (or the โ€˜no imageโ€™-image of Woocommerce) in the form on the homepage (now you will see a blank rectangle, as I tried to upload that as image).

        I am using the Divi-theme.

        Thanks a lot for your help!

        Kind regards,

        Johan

        1. Thanks Johan. Have you tried hiding the image via custom CSS with the following rule:

          .home .woocommerce div.product div.images img { display:none !important }

          This should work ๐Ÿ™‚

          1. Hey Rodolfo,

            You are a genius! Thanks so much (I have literally spent 15 hours on finding the solution…)! Just last question if it’s ok: the form does not shift to the left now, to fill up the gap (even not when I do at .home .woocommerce on the snippet. Any idea about that ๐Ÿ™‚ ?

            Once again thank you very, very much for your help! Highly appreciated ๐Ÿ™‚ .

            Regards,

            Johan

            1. Uhm… 15 hours ๐Ÿ™‚ Glad I was able to help. Not sure I fully understand “the form does not shift to the left now, to fill up the gap” – maybe send me a screenshot or something so maybe I can help! R

          2. Hey Rodolfo,

            What I meant, was that now the product image is gone, there is a big white space on the left on the product page.

            Do you know how to make the rest of the product page ‘full width’ (so filling up the space of the removed image)?

            Kind regards,

            Johan

            1. Johan, two things:

              1) remove the image div completely:

              .woocommerce div.product div.images, .woocommerce-page div.product div.images, .woocommerce #content div.product div.images, .woocommerce-page #content div.product div.images {display:none !important}

              2) make the description on the right as full-width:

              .woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {
              float: none;
              display: block
              width: auto;
              }

              Enjoy!

  19. great technique!! though i have been trying this for hours, it removes the image, but the stretching part does not function, any idea? the #main also removed!

    1. Thank you Hanif. what do you mean by “the stretching part does not function”? Can you provide a link or a screenshot? Thank you

  20. Had to remove the #main to get it to work. But regardless thanks for the great info.

    1. Awesome Neal, thanks for the feedback ๐Ÿ™‚

  21. Fantรกstic!!, What if I need to do it with a hole category, how sholud I do it?

    Thanks!

    1. Thanks for your feedback! If you want to apply it to a whole category, you will need to add some PHP code in your functions.php and say… “if this product belongs to category ID = XXYY, apply this CSS”

      1. Hi Rodolfo,

        Following your last response to Santiago I have tried to develop a php function that applies determinated CSS to all those products that are under some categories

        /**
        * Show table only in cat1 and cat2 products
        */
        function show_table_sizes() {
        if( is_product_category( array( ‘cat1’, ‘cat2’) ) ) {
        ?>

        .sizes { visibility: visible !important; }

        <?php
        }
        }
        add_action( 'content-single-product', 'show_table_sizes' );

        I have added that bit into my functions.php of my child theme

        And in custom CSS I already have defined:
        /*Hide sizes table in all*/
        .sizes
        {visibility: hidden !important;}

        But it's not working… ๐Ÿ™ Could you assist? Thank you !!!

        PS: very interesting blog full of bits of knowledge, I am learning a lot here !

        1. Hey Mikel, thanks for your message ๐Ÿ™‚ Inside the PHP, try using this instead:

          Hope this helps ๐Ÿ™‚

          1. Hi Rodolfo, thanks for answering, but I cannot see any code on your reply… :S

            1. Ouch, you’re right, the WP editor must have deleted it ๐Ÿ™‚

              Let’s try again! ๐Ÿ™‚

              
              /* you should change .sizes {..} to this */
              
              <script>
              .sizes { visibility: visible !important; }
              </script>
              
              
Questions? Feedback? Support? Leave your Comment Now!
_____

If you are writing code, please wrap it between: [php]code_here[/php]. Failure to complying with this (as well as going off topic) will result in comment deletion. You should expect a reply in about a week - this is a popular blog but I need to get paid work done first. Please consider joining #BloomerArmada to ask me 1-to-1 WooCommerce questions. Thank you :)

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.