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 😃