• a

NEW & POPULAR DIVI CHILD THEMES

Supreme Store

Molti

Molti Ecommerce

Florence

WANT MORE?

MEMBERSHIP

Join Membership

Membership Benefits

CONTACT US

Send us a Message

Visit Documentation

RESOURCES

Our Blog

Customer Showcase

What's New?

Useful Tools

Affiliates

NEW & POPULAR DIVI CHILD THEMES

Supreme Store

Easily Setup Your Online Store with Supreme Store Child Theme.

Molti Ecommerce

Multipurpose Business/Ecommerce Child Theme for Divi.

Molti

Multipurpose Business Child Theme for Divi.

Florence

A Delicate & Innocent Business Child Theme for Divi.

WANT MORE?

Join Our Membership

Get access to all our Divi Products by Joining Membership!

Membership Benefits

See the Benefits of Joining Membership before you Join!

Send us a Message

Need Help? Send us a Message and we'll be glad to help.

Visit Documentation

Instead of waiting for us, try to find your answer in our Documentation.

Our Blog

See the Latest News, Divi Tips & Tricks and a lot more.

Useful Tools

Some Useful Divi & Web Design Tools that we use and you'll love.

Customer Showcase

See cool websites made by our Customers using our Child Themes.

Affiliates

Earn Money while Promoting our Products today.

What's New?

See what we've been working on and what's new from us.

How to Enhance your Divi Shop Module

Samar Jamil

Hey Everyone, what’s going on? 

It’s been a long time haven’t posted any tutorial, but today I’ve got a special tutorial that’ll fix your problem with the Divi Shop Module. Yeah, the Divi Shop Module is very limited because you only have 3 things to show such as Featured Image, Title, and Price and that’s it but today we’ll see how to add an Add to Cart Button and a More info button very easily.

We’ll be also adding some unique hover effects to the Product Card, so make sure you don’t miss any part of this tutorial.

So, first of all, we’ll be adding an Add to Cart and More Info button, which means we’ll add two buttons as icons to the product card. So let’s begin. Now grab this code from here and paste it into your Divi Child Theme’s function.php unfortunately, the code highlighter wasn’t able to recognize the code but clicking on the button below will show you the code.

Click to see the code

Simply copy the code from there and paste it into your functions.php at the very end like this. You can also make use of the File Manager plugin for doing this.

Now as you’re done with that you now have to style those buttons that we just added, and the Product Card, I’ve already prepared some CSS to design them, now just copy this CSS from here and paste it in Divi > Theme Options > Custom CSS Box or anywhere you like to paste your codes.

/*Styling the Add to cart and Info Button*/
.woocommerce ul.products li.product .button,
a.preview-product {
	font-family: ETModules;
	border: 2px solid #07B98A;
	color: #07B98A;
	font-size: 20px;
	padding: 4px!IMPORTANT;
	border-radius: 100px;
	height: 45px!important;
	width: 45px!important;
	text-align: center;
	transition: .3s ease;
}
/*Adding some Hover effect to buttons*/
.woocommerce ul.products li.product .button:hover,
a.preview-product:hover {
	background: #07B98A;
	color: #fff;
	box-shadow: 0px 3px 20px #07B98A36;
}


/*Disbales the icon appear when you hover to add to cart button*/
.woocommerce ul.products li.product .button:after {
	display: none
}
/*Some adjustments to More info button*/

a.preview-product {
	text-decoration: none;
	padding: 10px!IMPORTANT;
	margin-right: 10px;
}
/*Styling the Product Card*/

.woocommerce ul.products li.product {
	border-radius: 10px !important;
	box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.08);
	transition: .3s ease;
	padding-bottom: 25px !important;
	background: #fff;
}
/*Adding Hover effect to product card*/
.woocommerce ul.products li.product:hover {
	box-shadow: 0px 3px 50px rgba(0, 0, 0, 0.14);
	transform: translate(0%, -5%);
}
/*Styling the View cart button*/
.woocommerce a.added_to_cart {
	font-family: Poppins;
	letter-spacing: 1px;
	color: #07B98A;
	border: 2px solid #07B98A;
	padding: 1px 6px;
	border-radius: 3px;
	margin-left: 10px;
	transition: .3s ease;
}
/*Adding hover effect to view cart button*/
.woocommerce a.added_to_cart:hover {
	background: #07B98A;
	color: #fff;
}
/* Making product one column in Mobile*/
@media only screen and ( max-width: 479px ) {
.et_pb_shop.et_pb_shop li.product {
width: 100% !important;
}
}

So that’s it you’ve just upgraded your Divi Shop Module and it was very easy, right? And If you need a Divi Child Theme you can click on the button below to download a blank Child Theme and you can then simply install it the same way you install a Theme. It contains all the codes so that means you don’t have to put the codes mentioned above in function.php and Theme options, you just install the Child Theme and you’re good to go.

You can click on the second button to see the Live demo of what we created.

Let’s see some of the Important Changes that you should make to the Shop Module for it to look a bit cool. Here are those changes:

  • Content –>  Column Layout –> 3 Columns
  • Design Options –> Image –> Corner Radius 10px top left and 10px top right and 0px on other bottom sides.
  • Design Option –> Text Panel and Change alignment to Center.
  • You should also change the styles of the Title and Price text to your desired styles.

So, guys, that’s it for today’s tutorial I hope that you found it useful and it should have fixed your problem about the Divi Shop Module, If so then make sure to comment in the section below, and don’t forget to Subscribe to our Youtube Channel for more stuff like this.

Have a Great Day 😃

Share The Love ❤️

Written by: Samar Jamil

I Love to make beautiful and creative Divi Child Themes, Layouts and Module Designs for everyone to help them create beautiful websites with ease using Divi. I also Enjoy making helpful Divi Tutorials, Freebies, and More!