Styling the WooCommerce Product Tabs

This article takes a look at how to style the WooCommerce product tabs that exist within individual product pages. We'll look at adding CSS to match your site.

In this article we’re going to take a look at how to style the WooCommerce Product Description Tabs.

These may already be styled on your site or have a different style to the screenshot below depending on the theme that you have.

In most cases though you should still be able to style them using the same classes that we outline, unless your theme overrides them and uses a different tab structure.  

The Classes Used to Style the WooCommerce Tabs:

Adding Background Colours:

First we’re going to style the active tab, this may appear slightly larger, or as the first tab in the list. It just shows which section is toggled.

.woocommerce-tabs ul li.active a {

Background-color: Teal;

}

The above code sets the background colour of the active tab to Teal as shown here:

Next we’ll assign a colour to the inactive tab, which in the instance of this example is the reviews tab. The code for this is:

.woocommerce-tabs ul li a {

Background-color: Gold;

}

This looks like this:

As you can see from the above image the tab that isn’t active is now gold. If there were more tabs in the example they would also all be gold as well.

The Text Within the Tabs:

So next up let’s take a look at styling the text within these tabs, first we’ll look at the active tab.

.woocommerce-tabs ul li.active a {

Color: Gold;

}

The above text styles the colour of the active tab and sets the text to gold.

Next let’s assign a colour to the inactive tab text:

.woocommerce-tabs ul li a {

Color: Teal;

}


As shown by the above it’s nice and easy to change the text of the tabs and for the inactive tabs the text colour will apply to all of them.

The Tab Borders:

Next we’re taking a look at how to style the tab borders. First let’s add a 5px solid teal border to the active tab to make it stand out more when active:

.woocommerce-tabs ul li.active a {

Border: 5px solid teal;

}

Next let’s take a look at the inactive tab / tabs:

.woocommerce-tabs ul li a {

Border: 3px solid teal;

}

As shown above the code adds a solid 5px teal border to the active tab and a smaller solid border to the inactive tab.

Tweaks like this can enhance the user experience of your website and make it easier for users to clearly see what they’ve clicked on or may need to click on.

The Main Tab Box:

The main container box for the tabs has a border at the bottom as shown in earlier images so let’s take a look at how to remove this and further style the overall tab container box.

.woocommerce-tabs ul {

Border-bottom: unset;

}

Next let’s take a look at adding a background to the tabs section:

.woocommerce-tabs ul {

Background: #f4f4f4;
Padding: 5%;

}

The above code sets a background for the box and padding to better space and align the tabs within the section.

Hover Effects:

Next up we’re taking a look at how to customise the hover effects for each of the tabs.

For the active tab the code would look something like this:

.woocommerce-tabs ul li.active a :hover {

Color: orange;

}

For the inactive tabs the code would look something like this:

.woocommerce-tabs ul li a {

Color: orange;

}

In the above examples we’re setting the colour of the text for the tabs when hovered. However as this class is for the overall tab, you could also add background colour styling, border styling and more so that the tab has a full hover over effect.

Further Reading:

Adjusting The WooCommerce Related Products Position

Summary:

We really hope you found this useful, styling the tabs within your product page can really make the page appear more on-brand and will help to keep the entire website consistent, especially if you’re using a custom theme.

If you found this useful we would really appreciate a share and a comment thanks!

Default image
Tech Typed
Articles: 102

Leave a Reply