Is everybody still with me? Last week we did a ton of stuff to get us ready for this part, the part where we are actually going to show you how we can clone any online store with Divi and WooCommerce. We’ll keep hopping between the Abercrombie & Fitch site and our Divi install and talk you through how we go about translating that design to a Divi site.

Due to the number of settings and custom code, we’ve simplified the blog posts to focus on sharing the code or other relevant info. Please watch the video to go through the actual module settings and properties. We’ve conveniently linked timestamps to the video for each Snippet you’ll find below.

Please let us know if this approach works better for you guys, after all, we are doing this for you!

Video Tutorial

Snippet 1: Change Slider Animation to Fade from Right

Unfortunately, Divi does not give us a setting to change this animation, but if you add the code below, we can get the effect we are looking for.

Slider Module > Advanced > Custom CSS > Slide Description

Snippet 2: Vertically Center Modules in Row Column

Sometimes things just look better when they are vertically centered, and if you look at our inspiration, their header also centers the text and buttons vertically. It is pretty interesting that this is not a native Divi feature as it is just one easy line of CSS code.

Let’s take a look.

Column 1 > Advanced > Custom CSS > Main Element

Snippet 3: Change Button Width

To give our buttons that skinny wide look, we need to adjust the width as well a recenter the text.

Button Module > Advanced > Custom CSS > Main Element

Snippet 4: Place Button Modules Inline Next to Each Other

Another feature that seems to be missing from Divi is the ability to place two buttons next to each other in a single column row. You can check out the tutorial we wrote on How to Add Two Divi Button Modules Inline Next to Each Other, or just copy and paste the code below.

Divi > Theme Options > Custom CSS

Snippet 5: Remove Product Bottom Margin

We need to fix the spacing of our New Arrival products to match that of the Abercrombie & Fitch site and we manage to get most of it with the Shop Module settings, but a little bit of margin was left on the bottom.

Shop Module > Advanced > Custom CSS > Product

Snippet 6: Remove Title, Rating Container, Star Rating, Price, & Old Price

We need to do a little more work on the Shop Module as Divi does not yet allow you to specify exactly which elements you’d like to see in this product loop.

To get that clean layout with just the product image, we need to manually remove elements like the Title, Rating Container, Star Rating, Price, and Old Price with some CSS wizardry.

Shop Module > Advanced > Custom CSS > Title

Shop Module > Advanced > Custom CSS > Rating Container

Shop Module > Advanced > Custom CSS > Star Rating

Shop Module > Advanced > Custom CSS > Price

Shop Module > Advanced > Custom CSS > Old Price

Snippet 7: Remove Price “artifact”

Despite our best efforts to completely remove the extra elements in this shop module, we are left with a weird “artifact” that needs to go. Upon inspection it seems to be part of the product price, so we just need to hide that as we did the other elements in the previous snippet.

Code Module > Code

Time to lose those kicks, we are home baby!

Conclusion

Great job, you! We have a Homepage that very closely resembles the Abercrombie & Fitch site and have proven that we absolutely are capable of Cloning Any Online Store with just Divi and WooCommerce. Yes, I know, I’m getting ahead of myself, but we are on a roll now.

As I mentioned, keep an eye out this week for the other steps in Part 2 which are using the Theme Builder to build out the Header and Footer for our site.

Definitely head to our Youtube Channel and subscribe to make sure you don’t miss a single thing because this is going to be valuable for you and your design agency!

Catch you folks next week!