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

Share:

Leave a Reply