Last Updated on July 3, 2019
WooCommerce Shop Grid CSS Styling (Look 1)
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 🙂
css code for Divi
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; }
css code for TwentySeventeen
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.
great.. Thanks a lot..
very helpful.. m using it in my project..
That’s great, so glad it was useful 😀
Hi,
Do you know a way to make the product thumbnails larger? And for some reason the thumbnails jump down the page when you click on them. Please see http://visionsok.com/product/ic-berlin-anne-k/
so you can see what I’m talking about.
Thank you for your time!!!
Hi Brenda! Your thumbnail images are only 200 px wide, that’s quite small, if you try using bigger images that should help. There are also settings in WooCommerce to change your thumbnail size.
This worked awesome thanks
Glad to hear it! Thanks for checking out my site 🙂
Hello, I need a small help- Please open the following url and do mouse hover on product https://www.leoca-paris.fr/maison-parisienne/femme/pantalons-et-jeans-femmes/ you will see sizes once you do a mouse hover, i wanted to know if you are aware of the plugin through which this can be done.
This website is in Divi WordPress.
Hi Shubhang!
It looks like it’s this wishlist plugin: https://wordpress.org/plugins/ti-woocommerce-wishlist/
The way I found that out is by right-click > view page source > I searched for “wishlist” since I could tell it was a wishlist feature but if you’re not sure you can also search “plugin” in the source code to see what plugins are on the site.
https://ibb.co/sKRqb6D
AMAZING!!!!!!!!!!!!!!!!!!!!!!!
This is the best tutorial for Divi de Woocomerce (CSS) I thank you very much.
Thanks JR! 🙂
Are you able to help provide what CSS should be added to allow for 2 products per row specifically on the woocommerce ‘Shop’ and ‘Product Category’ pages? I’ve tried to google a bunch of options and so far cannot figure it out.
Hi Tina! I may be able to help, is this what you mean? https://ibb.co/b73q13V
Lifesaver – I tried a ton of other CSS modifications that didn’t work – yours did. Thank you so much!
Awesome, thank you!!
Hi, my store and product pages currently have absolutely zero margin. I want to make it so that there is actually space between the content and the content and the edge of the page. Is there a way to do this through css?
Hi Katherine, my apologies for not getting to this sooner! It looks like you already figured it out, thanks for stopping by my site anyway 🙂
Many thanks for the code, it worked perfectly!
Do you know, how to move the woocommerce sidebar from the left to the top of the page?
Greetings
Awesome, thanks! Would it be possible to share the link to your site? I don’t happen to have a demo site with the Woo sidebar showing on the left so I’d need to see an example to possibly give you some code. You can also email it to agirlandhermac at gmail dot com if you prefer 🙂
I am so desperately trying to figure out how to restructure how the Shop Module displays on mobile devices. Can you help? I’ve spent 4 hours with 0 success.
If you go here, everything looks great on desktop. But on Mobile I would like to ditch the two column layout for the products. That is easy enough. But I’d like it to display in Amazon format with the product image on the left and the Product name and price on the right.
I’ve messed around with trying to use css flexboxes and all that and I just can’t get it. The best I was able to do was get the Product image on the Left and the name on the right, but the price was still underneath the image.
I would be so grateful if you had insight for me.
Hi Steve! It looks like you already got it figured out using grid.. nice!
Thank you very much, very cool work
Thanks Adnan!