Divi + WooCommerce Single Product Page CSS Styling

Sep 1, 2018 | Woo | 0 comments

If you’d like to style your WooCommerce single product pages on your Divi store to match the rest of your site these code snippets will help get you started. Use the provided CSS and tweak to your needs to achieve a look you like, all on your own!

The basics of CSS are very intuitive and a lot is self-explanatory, and I’ve added comments in the code to help you know what changes what, so have fun experimenting 🙂

Be sure to read all notes at the bottom.

I’ve updated this post to include a colored border option for the tabs section, plus with or without a gap between the tabs.

Before

WooCommerce Single Product Page CSS Styling

After

I’ve updated the code to have a gap between the tabs if you want them.

WooCommerce Single Product Page CSS Styling
WooCommerce Single Product Page CSS Styling
WooCommerce Single Product Page CSS Styling

Tabs with borders (gap or no gap)

Read the comments in the code to see how to show the option you want.

WooCommerce Single Product Page Tabs with Borders
WooCommerce Single Product Page Tabs with Borders
WooCommerce Single Product Page Tabs with Borders

Elements that are changed:

  • variable dropdown
  • “disabled” button
  • categories/tags
  • sale badge color
  • product tabs section
    • tab titles
    • tab content titles and text
    • review comment fields
  • Find breadcrumbs styling here

The CSS can go in your child stylesheet OR appearance > customize > additional CSS OR Divi theme options > custom CSS box.

css code for top half (images and pricing)

/******************************************************************************/
/************ WOO SINGLE PRODUCT PAGE - TOP AREA ABOVE TABS SECTION ***********/
/******************************************************************************/
/*** VARIABLE DROPDOWN ***/
.woocommerce div.product form.cart .variations td select {
	background: #00707a;
	color: #fff !important;
	font-weight: bold;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}
/*** DISABLED (GRAYED OUT) BUTTONS ***/
.woocommerce button.button:disabled, 
.woocommerce button.button:disabled[disabled],
.woocommerce button.button.alt.disabled {
	color: #fff;
	background: #666;
}
/*** REMOVE LINE ABOVE META INFO ***/
.product_meta {
	border-top: 0;
}
/*** MAKE CATEGORY AND TAGS STAND OUT ***/
.woocommerce span.posted_in,
.woocommerce span.tagged_as {
	background: #ffa500;
	color: #000;
	font-weight: bold;
	padding: 3px 8px;
	display: inline-block;
	margin-bottom: 5px;
}
/*** CATEGORY AND TAG LINK COLOR ***/
.woocommerce span.posted_in a,
.woocommerce span.tagged_as a {
	color: #fff;
	font-weight: bold;
}
/*** REMOVE SKU INFO IF YOU DON'T USE IT ***/
.woocommerce span.sku_wrapper {
	display: none;
}
/*** SALE BADGE ***/
.woocommerce span.onsale, .woocommerce-page span.onsale {
	background: #ffa500 !important;
	font-size: 20px;
}

 

css code for tabs with no borders

/***************************************************************/
/************ WOO SINGLE PRODUCT PAGE - TABS SECTION ***********/
/***************************************************************/
/*** OUTERMOST BOX ***/
.woocommerce .woocommerce-tabs {
	border: 0 !important; /* remove border */
}
/*** REMOVE COLOR BEHIND TABS AND CENTER ALIGN ***/
.woocommerce div.product .woocommerce-tabs ul.tabs {
	background: transparent !important;
	text-align: center;
}
.woocommerce div.product .woocommerce-tabs ul.tabs:before {
	border-bottom: 0 !important;
}
/*** REMOVE BORDER ON TABS ***/
.woocommerce div.product .woocommerce-tabs ul.tabs li { 
	border: 0 !important;
}
body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li {
	border-bottom: 0 !important;
    margin: 0 4px !important; /* this adds gaps between the tabs if you want them */
}
/*** BACKGROUND COLOR OF NON ACTIVE TABS ***/
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: #333 !important;
	font-size: 16px;
}
/*** NON ACTIVE TAB TITLE COLOR ***/
body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li a {
	color: #999 !important; 
}
/*** BACKGROUND COLOR OF ACTIVE TAB ***/
body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li.active { 
	background-color: #00707a !important; /* this color should match the panel background color below */
    border: 0 !important;
}
/*** ACTIVE TAB TITLE COLOR ***/
body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li.active a {
	color: #fff !important; 
}
/*** MAIN ACTIVE PANEL ***/
.woocommerce div.product .woocommerce-tabs .panel {
	background-color: #00707a;
	color: #fff;
	font-size: 16px;
    border: 0;
}
/*** CHANGE COLOR AND CAPITALIZE H2 TITLE ON MAIN PANEL ***/
.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.woocommerce-tabs h2 {
	text-transform: capitalize;
	color: #00BFBF;
}
/*** COLOR OF TEXT INSIDE OF PANELS ***/
.woocommerce #reviews #comments ol.commentlist li .meta,
.woocommerce table.shop_attributes th {
	color: #fff;
}
/*** REVIEW COMMENT FIELDS ***/
.woocommerce-tabs #commentform input[type="email"], 
.woocommerce-tabs #commentform input[type="text"], 
.woocommerce-tabs #commentform input[type="url"], 
.woocommerce-tabs #commentform textarea{
	background: #fff;
	color: #333;
}
/*** MEDIA QUERIES FOR MOBILE (YOU MIGHT NOT NEED THIS SEE BELOW) ***/
@media only screen and (max-width: 767px) {
	body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li {
		margin: 0 auto !important; /* you only need this if you have gaps between tabs */
		max-width: 90%; /* you only need this if you want the tabs to be skinnier on mobile */
	}
}

 

css code for tabs with borders and/or gap

/*****************************************************************************/
/************ WOO SINGLE PRODUCT PAGE - TABS SECTION  ****************/
/*****************************************************************************/
/*** OUTERMOST BOX ***/
.woocommerce .woocommerce-tabs {
	border: 0 !important; /* remove border */
}
/*** REMOVE COLOR BEHIND TABS AND CENTER ALIGN ***/
.woocommerce div.product .woocommerce-tabs ul.tabs {
	background: transparent !important;
	text-align: center;
}
.woocommerce div.product .woocommerce-tabs ul.tabs:before {
	border-bottom: 1px solid #000 !important;
}
/*** BORDERS ON TABS + GAP OPTION ***/
body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li {
	border-top: 1px solid #000 !important;
	border-left: 1px solid #000 !important;
	border-right: 1px solid #000;
	border-bottom: 0 !important;
	margin: 0 4px !important;
	/* margin: 0 -5px 0 0 !important; USE THIS LINE INSTEAD if you do not want the space between the tabs */
}
/*** BACKGROUND COLOR OF NON ACTIVE TABS ***/
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: #00adad !important;
	font-size: 16px;
}
/*** NON ACTIVE TAB TITLE COLOR ***/
body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li a {
	color: #333 !important; 
}
/*** BACKGROUND COLOR OF ACTIVE TAB ***/
body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li.active { 
	background-color: #f0f0f0 !important; /* this color should match the panel background color below */
    border-right: 1px solid #000 !important; 
}
/*** ACTIVE TAB TITLE COLOR ***/
body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li.active a {
	color: #333 !important; 
}
/*** MAIN ACTIVE PANEL ***/
.woocommerce div.product .woocommerce-tabs .panel {
	background-color: #f0f0f0;
	color: #333;
	font-size: 16px;
    border-left: 1px solid #000;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
}
/*** CHANGE COLOR AND CAPITALIZE H2 TITLE ON MAIN PANEL ***/
.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.woocommerce-tabs h2 {
	text-transform: capitalize;
	color: #00BFBF;
}
/*** COLOR OF TEXT INSIDE OF PANELS ***/
.woocommerce #reviews #comments ol.commentlist li .meta,
.woocommerce table.shop_attributes th {
	color: #333;
}
/*** REVIEW BOX FIELDS ***/
.woocommerce-tabs #commentform input[type="email"], 
.woocommerce-tabs #commentform input[type="text"], 
.woocommerce-tabs input[type="url"], 
.woocommerce-tabs #commentform textarea{
	background: #fff;
	color: #333;
}
/*** MEDIA QUERIES FOR MOBILE (FOR BORDERED TABS) ***/
@media only screen and (max-width: 767px) {
	body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li {
		margin: 0 auto !important;
		max-width: 90%; /* remove this line if you do not want the tabs to be skinnier on mobile */
	}
	body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li, 
	body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li.active, 
	body.woocommerce div.product .woocommerce-tabs ul.tabs li, 
	body.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
		border-bottom: 0 !important;
	}
}

Notes:

  • I’ve only set up a basic Woo installation but if you have additional WooCommerce plugins or extensions then you likely have elements that need additional coding. If you need help styling those elements, or if you see something I’ve left out, just let me know in the comments and I can update this tutorial (I might need to see a live example if you have third-party plugins).
  • Don’t feel like you have to change everything I did, you can use whatever parts of the CSS you need. I purposely used high-contrast colors that would make me have to alter more elements so I could provide as many classes as possible, but if you’re not using a dark background color (for example) you likely won’t need to change all the text elements.
  • My default link color and button style is set in the customizer settings.
  • Unfortunately a lot of instances of !important are required with Divi.