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.
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 😃
Explore Divi, The Most Popular WordPress Theme In The World And The Ultimate Page Builder
You would also like one from these
Creating a Beautiful Comparison Table is super duper easy by following this tutorial. This Pricing table has so many functionalities like Sticky Element and Read More Functionality and more.
So welcome to another new tutorial. And today we'll see how to make a floating button in Divi using Divi's Position Options. Now Fixed buttons are very useful to increase sales and conversions. So It's super simple and let's get started. Keep in mind that not only...
Yoyo! What's going on? Welcoming you to my new Divi Tutorial and in this one, I'll be showing you how to show a Divi Module only then when you'll hover over to a column. I think you didn't understand but don't worry I've designed some Layouts for you which you can...