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 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”. If you’re in Firefox, useΒ Firebug. In both cases, you can see the page’s HTML source code and identify the PAGE ID class of the body HTML tag:

“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        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 5.0
 * @community     https://businessbloomer.com/club/

/* removes the image on product id = 53 */
.postid-53 div.images {

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

Where to add custom code?

You should place custom PHP in functions.php and custom CSS in style.css of your child theme: where to place WooCommerce customization?

This code still works, unless you report otherwise. To exclude conflicts, temporarily switch to the Storefront theme, disable all plugins except WooCommerce, and test the snippet again: WooCommerce troubleshooting 101

Related content

  • WooCommerce Visual Hook Guide: Single Product Page
    Here’s a visual hook guide for the WooCommerce Single Product Page. This is part of my “Visual Hook Guide Series“, through which you can find WooCommerce hooks quickly and easily by seeing their actual locations (and you can copy/paste). If you like this guide and it’s helpful to you, let me know in the comments! […]
  • WooCommerce: Disable Variable Product Price Range $$$-$$$
    You may want to disable the WooCommerce variable product price range which usually looks like $100-$999 when variations have different prices (min $100 and max $999 in this case). With this snippet you will be able to hide the highest price, and add a “From: ” prefix in front of the minimum price. At the […]
  • WooCommerce: Hide Price & Add to Cart for Logged Out Users
    You may want to force users to login in order to see prices and add products to cart. That means you must hide add to cart buttons and prices on the Shop and Single Product pages when a user is logged out. All you need is pasting the following code in your functions.php (please note: […]
  • WooCommerce: Add Custom Field to Product Variations
    Adding and displaying custom fields on WooCommerce products is quite simple. For example, you can add a “RRP/MSRP” field to a product, or maybe use ACF and display its value on the single product page. Easy, yes. Unfortunately, the above only applies to “simple” products without variations (or the parent product if it’s a variable […]
  • WooCommerce: Show Number Of Products Sold @ Product Page
    WooCommerce database already stores the number of products sold for you. Therefore, you may want to show such number on the product page, close to the Add To Cart button. As we’ve seen in my book Ecommerce and Beyond, showing the number of sales for each product can increase your sales conversion rate. All you […]

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent 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. Follow @rmelogli

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

  1. one change firefox no longer use “Firebug” they also renamed it to “inspect”

  2. thanks!much helpful!

  3. Thank you so much, its still working πŸ™‚

    1. Great πŸ™‚

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

  5. 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?

  6. 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 πŸ™‚

  7. 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 {

    What is the correct to revert this code?

    Thank you

    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 πŸ™‚

  8. 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 πŸ™‚

  9. 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?


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

  10. 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!

  11. 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.

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

    1. You’re welcome Shiwani!

  13. 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 πŸ™‚

  14. worked perfect for me…thanks.

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

  15. 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 πŸ™‚

  16. 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.

  17. 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!

    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 πŸ™‚

  18. 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,

    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!

        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.


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

  19. 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.

  20. 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,


    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,


        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 πŸ™‚ .



            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,


            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;


  21. 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

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

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

  23. FantΓ‘stic!!, What if I need to do it with a hole category, how sholud I do it?


    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; }

        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*/
        {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 */
              .sizes { visibility: visible !important; }
Questions? Feedback? Customization? Leave your comment now!

If you are writing code, please wrap it like so: [php]code_here[/php]. Failure to complying with this, as well as going off topic or not using the English language will result in comment disapproval. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining the Business Bloomer Club to get quick WooCommerce support. Thank you!

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