3 Easy Ways to Apply CSS To WooCommerce Product Pages Only

Do you want to apply CSS To WooCommerce Product Pages Only and not the rest of the website?

Well, It’s quite simple,

Apply CSS to product pages.
Apply CSS for a specific product page.
Apply CSS on page level with Plugin.

Apply CSS To WooCommerce Product Pages

To apply CSS to all products pages. All you have to do is write single products selector before your CSS code snippet like an example below.

/*This css will work only on product pages for .button selector*/
.single-product .button
{
color: black;

Notice .single-product before the rest of the CSS snippet? This will apply the css only on single products page and not anywhere else on your website.

Apply CSS to only one specific product

In case you want to apply CSS to one specific product on your woocommerce store, All you need to know is the product ID of that product.

You can find the product ID by hovering on your product title from the WordPress dashboard.

Here is the short video, I found on youtube which is little old but still accurate.

After you know the ID of your product,

You can apply CSS to that particular product with the help of a unique id, similar to the example below.

.postid-1992 .button
{
color: black;

In the above snippet, number 1992 is our product ID. When we write .postid-1992 we tell the browser to only apply this snippet on a particular page. And, not on the rest of the website.

Add CSS on product level with the help of Plugin

You can also use plugins like simple CSS to add to CSS on a specific page level.

This plugin will add meta box under the post, product or page editor and will only output CSS on the frontend.

In fact, You can also replace the default WordPress CSS editor with this plugin. As it’s like having a full-fledged CSS text editor right in your dashboard.

Also read: Add CSS in Wordpress admin dashboard