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:
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 {
display:none;
}
/* stretches the product description on full width */
.postid-53 div.summary {
width: 98%;
float: none;
}
one change firefox no longer use “Firebug” they also renamed it to “inspect”
Thank you
thanks!much helpful!
Awesome!
Thank you so much, its still working 🙂
Great 🙂
Excellent article. Please, how to put the id of the category to modify the css, it appears like this: product_cat & tag_ID = 17
Thank you Alan 🙂 Would this help > https://businessbloomer.com/woocommerce-add-category-css-body-class/
My body tag don’t have any classes in it. Inspecting shows simple
Hey Otso, thanks so much for your message! Are you sure? Are you on a WooCommerce default page?
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
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 🙂
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
I found a solution now just put display:unset and it works again. Thank you any way this really helps.
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
Hey Thatthana, thank you so much for your comment! You will need to align them via CSS 🙂
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
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 🙂
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
Hey John, thanks for your comment! Have you tried any of the tips contained in this blog?
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?
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 { ... }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
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!
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
Hey Robin, thanks for your comment! Can you paste here the code you’ve tried using? Thanks 🙂
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.
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 🙂Thank you.Nice article.It helped.
Awesome!
Thank You so much for helping.my issue are done…
You’re welcome Shiwani!
Hi rodolfo,
I just wonder how to hide Short Description in woocommerce shop page (where there are all products!
Thank you for your time
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 🙂
worked perfect for me…thanks.
Awesome! Thanks for your feedback Ed 🙂
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.
🙂
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 🙂
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.
🙂
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
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?
No, I try to ask immediatly!
Thank you very much!
You’re welcome 🙂
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
Hey Rambod, thanks for your comment 🙂 As long as I see you managed to fix this, am I correct? Let me know. R
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
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 🙂
That’s too bad. Thanks for letting me know.
Cheers,
Rambod
No problem at all 🙂 Have a great day!
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
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.
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
Sure Johan, if you copy/paste your snippet and give me a link to your page I will take a look!
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
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 🙂
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
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
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
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!
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!
Thank you Hanif. what do you mean by “the stretching part does not function”? Can you provide a link or a screenshot? Thank you
Had to remove the #main to get it to work. But regardless thanks for the great info.
Awesome Neal, thanks for the feedback 🙂
Fantástic!!, What if I need to do it with a hole category, how sholud I do it?
Thanks!
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”
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 !
Hey Mikel, thanks for your message 🙂 Inside the PHP, try using this instead:
Hope this helps 🙂
Hi Rodolfo, thanks for answering, but I cannot see any code on your reply… :S
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>