Styling The WooCommerce Title and Description

This tutorial takes a look at how to style the WooCommerce Title and Description using CSS to edit things such as the colour, margins and overall design.

In this post we’re taking a look at how to customise the WooCommerce Title and description. We’ll take a look at using CSS to style the title and description boxes / fonts and overall look to make sure the design fits in with your brand and overall website look.

Styling the Title

So let’s take a look at the title first, the code for this is:

.product_title.entry-title 

This should generally be the same on most sites with most themes unless the theme has specifically re-named / added classes to it. However as it’s generated by WooCommerce in most cases it will be as above.

So to style this would look like this:

.product_title .entry-title {
Color: orange;
}


In the above example we’re just setting the font colour to Orange of the title.

Another example would be:

.product_title .entry-title {
Font-weight: 500;
Font-size: 50px;
}


In this example we’re setting the font weight which is the thickness of the text to 500 which is a medium bold font and the font size to 50px.

Another useful styling example would be to set the background to black and colour to white this would look like this:

.product_title .entry-title {

Background: black;
Color: white; 

}

So as shown above you can add pretty much any generic CSS style to the title just by targeting those two classes together.

The Description:

Next we’re taking a look at how to style the short description. Within most themes the short description is shown next to the product images and beneath the title section. This area is designed to give a quick overview of all the main features of a product with the main description tabs providing additional information.

The code to assign CSS to this again is just one easy class:

woocommerce-product-details__short-description

So an example of styling this may be:

Woocommerce-product-details__short-description {

Background-color: Orange;
Padding: 5%;


}

In the above example we’re setting the short description to have a background colour of orange with padding of 5% on each side of the text.

Further examples of this would be:

Woocommerce-product-details__short-description {

Width: 75%;
Text-align: center;

}

In the above code we’re setting the Width of the description box to 75% and aligning the text to the center.

Styling the text within the description will be slightly different as it will depend on what element has been used to wrap the text elements within the box.

So for example if you’ve added a <h2> and <p> tags for a title and some text they will use the code that is applied to all product pages throughout your theme or to every <h2> and <p> element throughout your site.

To add code to these you would need to use:

h2.Woocommerce-product-details__short-description

And

p.Woocommerce-product-details__short-description

So an example of this would be 

p.Woocommerce-product-details__short-description {

Color: white;

}

The above code will set all code within <p> tags within your short description to have a font color of white.

If you’re new to WordPress and aren’t sure of how to add CSS take a look at our full tutorial here.

Summary:

We hope this has helped to give you an idea of how to style the WooCommerce Product titles and descriptions. We’d really appreciate a comment or a share if it has thanks!

Newsletter Updates

Enter your email address below to subscribe to our newsletter

Leave a Reply

Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124