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 tutoraspire.com FREE
* @author Tutor Aspire
* @testedwith WooCommerce 5.0
* @donate $9 https://www.tutoraspire.com
*/
/* 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;
}