Would you like to customize your Woo shop grid but you’re just not sure how to get the code to do it? If you understand some basic CSS (the basics are easy, I promise!) you can use my code snippets to customize your Divi / WooCommerce shop grid to change the look a bit and match colors to the rest of your site.

The CSS provided affects the shop module, the default shop page, and related products, be sure to read the notes at the bottom.

Update! I realized I was already most of the way there for making the code usable for more than Divi, so I’ve added a separate chunk of code to use with WordPress’s default TwentySeventeen theme.

 

I haven’t tested with other themes but they are only Woo classes so it should work for a lot of themes using WooCommerce.

Elements that are changed with the CSS provided:

• breadcrumbs
• dropdown filter
• individual shop grid items/products
• title size and colors
• star alignment and color (if you want it different than your theme color)
• price size and color
• radial gradient on hover overlay
• hover icon size and color
• sale badge

You can use whatever parts of the CSS you need. A lot of CSS is self-explanatory but I’ve added comments to help you know what changes what. I mostly wanted to provide the WooCommerce classes so you can experiment and do your own styling 🙂

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

/*** BREADCRUMBS ***/
.woocommerce .woocommerce-breadcrumb {
	font-size: 16px;
	font-weight: bold;
	color: #222;
}
/*** BREADCRUMB LINKS ***/
.woocommerce .woocommerce-breadcrumb a {
	color: #00707a;
}
/*** CHANGE COLORS ON THE FILTER DROPDOWN (THIS MAKES OTHER WOO DROPDOWNS MATCH AS WELL) ***/
select.orderby, /* woocommerce class is purposely left off so other dropdowns can match but you can add it if you prefer */
.woocommerce div.product form.cart .variations td select {
	background: #00707a;
	color: #fff !important;
	font-weight: bold;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}
/*** SINGLE GRID ITEM STYLING ***/
.woocommerce ul.products li.product {
	text-align: center; /* centers titles and prices */
	background: #f5f5f5; /* changes background color */
	padding: 1em; /* adds space around entire product */
	transition: all 0.2s;
	-moz-transition: all 0.2s; 
	-webkit-transition: all 0.2s; 
}
.woocommerce ul.products li.product:hover {
	background: #fff; /* changes background color on hover */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); /* adds shadow on hover */
	-webkit-box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); 
	-moz-box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}
/*** MAKE IMAGES TOUCH EDGES (IF ADDING PADDING ABOVE) ***/
.et_shop_image {
	margin: -1em -1em 0; /* compensates for grid item padding, leave this off if you want space around the images */
}
/*** MAKE TITLES BIGGER AND CHANGE COLOR ON SINGLE GRID AND RELATED PRODUCTS ***/
h2.woocommerce-loop-product__title,
.product .related h2 {
	font-size: 22px !important;
	color: #000; /* change color of product titles */
}
/*** CENTER STAR RATING AND MAKE STARS BIGGER ***/
.woocommerce ul.products li.product .star-rating {
	font-size: 18px;
	margin-left: auto !important;
	margin-right: auto !important;
}
/*** CHANGE STAR COLOR FROM THEME COLOR ***/
.woocommerce .star-rating span::before {
	color: #ffa500 !important;
}
/*** CHANGE PRICE COLOR IF YOU DON'T WANT IT DEFAULT THEME COLOR ***/
span.woocommerce-Price-amount.amount {
	color: red; /* this changes price color on all Woo areas */
}
/*** MAKE PRICES BIGGER ON GRID AND RELATED PRODUCTS ***/
.woocommerce ul.products li.product .price, 
.woocommerce ul.products li.product .price del, 
.woocommerce-page ul.products li.product .price, 
.woocommerce-page ul.products li.product .price del {
	font-size: 18px;
}
/*** IMAGE OVERLAY BACKGROUND ***/
.woocommerce .et_overlay {
	border: 0;
	background: #00707a; /* For browsers that do not support gradients */
    background: radial-gradient(rgba(0,173,173,1), rgba(0,112,122,0.8)); /* gradient colors */
}
/*** IMAGE OVERLAY ICON COLOR AND SIZE ***/
.woocommerce .et_overlay:before {
	color: #fff;
	font-size: 60px;
	margin: auto;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}
/*** SALE BADGE COLOR ***/
.woocommerce span.onsale, 
.woocommerce-page span.onsale {
	background: #FFA500 !important;
	z-index: 9;
}

The CSS can go in your child stylesheet OR appearance > customize > additional CSS.

/********************************/
/*** WOO AND TWENTY SEVENTEEN ***/
/********************************/

/*** BREADCRUMBS ***/
.woocommerce .woocommerce-breadcrumb {
	font-size: 16px;
	font-weight: bold;
	color: #222;
}
/*** BREADCRUMB LINKS ***/
.woocommerce .woocommerce-breadcrumb a {
	color: #00707a;
}
/*** CHANGE COLORS ON THE FILTER DROPDOWN ***/
select.orderby { /* woocommerce class is purposely left off so other dropdowns can match but you can add it if you prefer */
	background: #00707a;
	color: #fff;
	font-weight: bold;
	padding-left: 1em;
    -webkit-appearance: none;
    -moz-appearance: none;
}
/*** SINGLE GRID ITEM STYLING ***/
.woocommerce ul.products li.product {
	text-align: center; /* centers titles and prices */
	background: #f5f5f5; /* changes background color */
	padding: 1.5em 1em; /* adds space around entire product */
	transition: all 0.2s;
	-moz-transition: all 0.2s; 
	-webkit-transition: all 0.2s; 
}
.woocommerce ul.products li.product:hover {
	background: #fff; /* changes background color on hover */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); /* adds shadow on hover */
	-webkit-box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); 
	-moz-box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}
/*** CHANGE COLOR ON SINGLE GRID AND RELATED PRODUCTS (THIS IS WHERE YOU CAN CHANGE THE FONT SIZE TOO IF YOU WANT) ***/
h2.woocommerce-loop-product__title,
.product .related h2 {
	color: #000; /* change color of product titles */
}
/*** ADD TO CART BUTTON ***/
.woocommerce ul.products li.product .button {
	display: inline-block;
	box-shadow: none;
	background: #333;
	color: #fff;
	font-size: 16px;
	padding: 8px 12px;
	margin-bottom: 0.5em;
	border-radius: 4px; /* makes rounded edges */
}
/*** CENTER STAR RATING AND MAKE STARS BIGGER ***/
.woocommerce ul.products li.product .star-rating {
	font-size: 18px;
	margin-left: auto;
	margin-right: auto;
}
/*** CHANGE STAR COLOR FROM THEME COLOR ***/
.woocommerce .star-rating span::before {
	color: #ffa500;
}
/*** CHANGE PRICE SIZE ON GRID AND RELATED PRODUCTS ***/
.woocommerce ul.products li.product .price, 
.woocommerce ul.products li.product .price del, 
.woocommerce-page ul.products li.product .price, 
.woocommerce-page ul.products li.product .price del {
	font-size: 18px;
}
/*** CENTER SALE BADGE AND CHANGE COLORS ***/
.woocommerce span.onsale, 
.woocommerce-page span.onsale {
	background: #FFA500;
	color: #fff;
	letter-spacing: 2px;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}
/*** GET RID OF BLACK LINE UNDER IMAGE ***/
.woocommerce ul.products li.product img {
	border: 3px solid #fff; /* adds border around image and is optional */
	box-shadow: none;
	text-decoration: none;
}
a.woocommerce-LoopProduct-link, a.woocommerce-loop-product__link,
a.woocommerce-LoopProduct-link:hover, a.woocommerce-loop-product__link:hover,
a.woocommerce-LoopProduct-link:focus, a.woocommerce-loop-product__link:focus {
	box-shadow: none;
	outline: 0;
}
/*** REMOVE/CHANGE COLOR BEHIND PRICE ***/
.woocommerce ul.products li.product span.price ins {
	background: transparent; 
}

Notes:

• Some of these items can be changed in the Divi builder module settings (e.g. title styling), the reason I’m doing it with custom CSS is because it affects areas you can’t change using just the modules, like the related products and parts on the default shop page.
• You should change my units to what you prefer (px, %, em, rem).
• If you see !important it’s because it was necessary for the CSS to apply with Divi.
• If you have CSS for Woo already some of this might conflict. This is best applied to a site not using any existing Woo customization, unless you know how to comingle the snippets.
• I have no design settings in my Divi shop module, it is a “fresh” and untouched shop module.