Customize the WooCommerce Shop Grid (Look 2)

Sep 18, 2018 | Woo | 0 comments

This tutorial provides some CSS code for customizing your WooCommerce shop/product grid. The first look is here and I just wanted to add another option. If you’re using my code for the single product pages this look would tie in well with the bordered option.

The code provides changes to the shop module, the default shop grid, and related products.

Before

Customize the WooCommerce Shop Grid – Look 2

After

Customize the WooCommerce Shop Grid – Look 2
Customize the WooCommerce Shop Grid – Look 2
Customize the WooCommerce Shop Grid – Look 2
Customize the WooCommerce Shop Grid – Look 2

Mobile

Customize the WooCommerce Shop Grid – Look 2

Elements that are changed:

  • individual shop grid items/products
  • move title above image
  • star alignment and color (if you want it different than your theme color)
  • price size
  • change hover icon to text
  • sale badge
  • mobile tweaks
    • show grid as two columns instead of one (this is done by default for the shop module now but not for the default shop page)
    • font-size adjustments
  • Find breadcrumbs and dropdown filter styling here

 

You can use whatever parts of the CSS you need. If you only want to change the icon to text just grab that bit of code, easy peasy!

 

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 🙂

css code

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

/*******************************************/
/************* SHOP MODULE GRID ************/
/*******************************************/

/*** SINGLE ITEM ***/
.woocommerce ul.products li.product {
    text-align: center;
}
.woocommerce ul.products li.product a {
	display: flex;
	flex-direction: column;
}
.woocommerce ul.products li.product:nth-child(n) {
	margin-top: 50px !important;
}
/*** PRODUCT TITLE -- THIS WILL OVERRIDE CUSTOMIZER SETTINGS ***/
h2.woocommerce-loop-product__title,
.related h2.woocommerce-loop-product__title {
	position: absolute;
	width: 75%;
	z-index: 9;
	font-size: 18px !important;
	line-height: 1.3em;
	background: #fff;
	color: #000;
	border: 1px solid #000;
	padding: 8px 12px !important;
	left: 50%; 
 	transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
/*** PRICE ***/
.woocommerce ul.products li.product .price {
	font-size: 16px;
	font-weight: 700;
    margin-top: 10px !important;
    color: #000 !important;
}
.woocommerce ul.products li.product .price del {
	font-size: 18px; /* crossed-out price on sale items */
}
/*** STAR RATING ***/
.woocommerce ul.products li.product .star-rating {
	margin-left: auto !important;
	margin-right: auto !important;
	order: 1; /* this moves stars below the price */
}
.woocommerce .star-rating span:before {
	color: #ffa500 !important; /* change color from theme color */
}
/*** PRODUCT IMAGE ***/
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
	margin: 0 !important;
	border: 1px solid #000 !important;
}
/*** IMAGE OVERLAY ***/
.woocommerce .et_overlay {
	border-color: #000;
}
/*** CHANGE OVERLAY ICON TO TEXT ***/
.et_overlay:before {
	font-family: "Open Sans", Arial, sans-serif !important; /* change font-family if you want */
	content: "VIEW";
	font-size: 20px;
	letter-spacing: 3px;
	color: #000;
	margin: 0;
	top: 50%;
	transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
/*** SALE BADGE ***/
.woocommerce ul.products li.product .onsale, 
.woocommerce-page ul.products li.product .onsale {
    background: #d100d8 !important;
	border: 1px solid #000;
    border-radius: 0 !important;
	padding: 8px 10px 8px 14px !important; /* this might need adjusting based on your font */
    color: #000;
	font-size: 20px;
	font-weight: 700 !important;
	line-height: 1em !important;
    text-transform: uppercase;
    z-index: 99;
    left: -45px !important; /* this might need adjusting based on your font */
    top: 40% !important; /* this might need adjusting based on your font */
    letter-spacing: 4px !important; /* this might need adjusting based on your font */
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	transform: rotate(-90deg);
}
@media only screen and (max-width: 768px) {
	/* make two columns on default shop page on mobile */
	.woocommerce ul.products li.product:nth-child(n) {
		width: 47% !important;
		margin-right: 6% !important;
	}
    .woocommerce ul.products li.product:nth-child(2n) {
		margin-right: 0 !important;
	}
	/* title */
	h2.woocommerce-loop-product__title,
	.related h2.woocommerce-loop-product__title {
	width: 85%;
	font-size: 15px !important;
	}
	/* sale badge */
	.woocommerce ul.products li.product .onsale, 
	.woocommerce-page ul.products li.product .onsale {
		font-size: 14px;
		left: -35px !important; /* this might need adjusting based on your font */
	}
}

 

Notes:

  • Your font choices will greatly affect a few items, see CSS comments. I’m using Divi default typography settings with headers set to bold and that’s it.
  • With the exception of the overlay and icon/text on hover (that’s a Divi thing not a Woo thing) this code is using WooCommerce classes so it can be used on non-Divi themes, but most likely it will need adjustments.