How to Enhance your Divi Shop Module

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 Icon to the product card. So let’s begin. Now grab this code from here and paste it in your Divi Child Theme’s function.php but unfortunately the code highlighter wasn’t able to recognize the code but clicking on the button below will show you the code.

Simply copy the code from there and paste in your functions.php at the very end like this. You can also make the 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 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 look a bit cool. Here are those changes:

  • Content –>  Coulmn Layout –> 3 Coulmns
  • 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 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 😃

Make Beautiful websites with ease using our Handmade Beautiful Child Themes

For Divi

By Samar Jamil

I provide beautiful and creative Divi Child Themes, Layouts and Sections for everyone to create beautiful websites with ease using Divi.

Explore Divi, The Most Popular WordPress Theme In The World And The Ultimate Page Builder

 

You would also like one from these

Easiest Way to Create Inline Email Optin Form  in Divi

Easiest Way to Create Inline Email Optin Form in Divi

Hey Everyone, what's up? The Newsletter is the best way to communicate with your audience and give them special content that other users may miss but did you ever think that without a beautiful looking Newsletter form you'll not get more Audience and you'll also miss...

How to Create Stretchy Navigation in Divi

How to Create Stretchy Navigation in Divi

In today’s’ tutorial, we’ll see how to create a very modern and next level Stretchy navigation in Divi. It works like a charm on any Screen Size with beautiful Animations and more.

Pin It on Pinterest

Share This