Cyber Monday Sale is Live

Shop the Sale! ×

Jun 29, 2021 | Divi Resources, WooCommerce

An Ultimate Way to Build Your Divi WooCommerce Shop in 2021

Divi WooCommerce shop is a solution for many online business entrepreneurs to bring ideas to life and provide people with something meaningful. It could be a SaaS business or an invention to the tech industry. However, not all entrepreneurs are occupied with technical knowledge, and building a Divi WooCommerce store can become challenging. Though some business owners hold solid ground in web development, they too look for the fastest way. An ultimate way to build their Divi WooCommerce shop easily with all the latest trends without spending too much time.

Therefore, in this tutorial, we’re going to see how you can build an outstanding Divi store as per the latest web design trends of 2021. We’ll use some premium modules to get our final result. And by the end of this post, you’ll be able to create your own WooCommerce Divi store in no time.

So, without any further delay, let’s get started.

Step 1: Install & Setup WooCommerce


When you’re using WordPress for your business website, it’s easier to turn it into an online store. There are many tools and ways that can help you create an eCommerce store, but the famous among all is WooCommerce.

WooCommerce for Divi

WooCommerce is a WordPress plugin that enables you to create a digital store on your website. After setting it up on your Divi website, you could manage the Login and Register page. User’s my account page, shop page, products and more. Thus, making it possible to create a complete Divi WooCommerce shop.

Divi WooCommerce Shop With WooCommerce and Divi

Now, how you can set up it on your Divi website? Just follow the below steps one by one and you’ll get your Divi WooCommerce store.

  • On your WordPress dashboard, go to the Plugins Add New.
Adding new plugin in Divi WordPress site
  • Then, search WooCommerce in the search tab, and click Install Now for the following plugin.
Installing WooCommerce in Divi
  • After this, click Activate.
Activating WooCommerce for Divi
  • And hence, WooCommerce on Divi website is successfully installed and activated. You’ll see the following four new menu items in the dashboard.
WooCommerce menu items
  • You could go to each one of them and find out what options they consist of. However, before you use it, you should set up WooCommerce according to the requirements. To do that effectively, you could follow this guide on WooCommerce to set up. After setting it up, follow the next step to know how you can create a product.

Step 2: Create WooCommerce Products


Creating WooCommerce products is easy and interesting. But before we create WooCommerce products, it’s recommended that you should first create product categories. Follow the below steps to do that.

Step 2.1 — Creating a WooCommerce Products Category

  • On your WordPress Dashboard, go to the Products → Categories. It will open a new window with a default product category and different fields that enables you to create other product categories.
Opening WooCommerce Products category option
  • Here, first, input the name of the product category in the Name field. Similarly, input slug and description in the Slug and Description field, respectively. After this, keep Display type as Default. Assign a category image in the Thumbnail option by clicking the Upload/Add image button and selecting an image in the media library.
Creating WooCommerce product category
  • Once everything assigned, click Add New Category. And your product category will appear in the list on the right side.
WooCommerce product category list

Step 2.2 — Creating a WooCommerce Product

  • To create a WooCommerce, go to the ProductsAdd New.
Adding a new WooCommerce product
  • This will open the editor that would allow you to add a new WooCommerce product. The first two options available in the editor is to define the product name and a complete description.
WooCommerce product editor starting fields
  • After this, you get the Product Data tab to add more information about the product. For example, regular and sale price. Product type – Simple, grouped, affiliate or variable product. Define product availability, whether it’s virtual or downloadable. Input inventory, shipping, linked products and more useful data.

  • Under the Product data tab, you get another tab, Product short description, allowing you to input a brief of the product.
Product short description tab in WooCommerce product editor
  • In the editor’s sidebar, you get the option to define the Product’s Category, Tags, Image and Gallery. Thus, making your Divi WooCommerce shop product’s appealing with images and informative with adequate content.
WooCommerce product editor and its sidebar
  • Use each option one by one to complete your WooCommerce product description. And once you’re done with everything, hit Publish.
Publish button for Divi WooCommerce Shop product
  • Your WooCommerce product has been created, and to view it, you need to open ProductsAll Products. Here, you’ll find all your products listed.
WooCommerce products list in Divi
  • Apart from this, if you want to check out how the products look on the Shop page, you need to go to the PagesAll Pages and click View for the Shop page.
Divi WooCommerce Shop page with default look
  • As you can see in the above screenshot, the look of your products in the shop is basic and couldn’t attract users as they should. However, you can enhance this look for your Divi WooCommerce shop. And to do that, we’ll use the Divi Plus WooCommerce modules that would allow you easily improve your Divi WooCommerce store’s look and feel. The subsequent steps are all about that.

Step 3: Get Divi Plus and Enhance Divi WooCommerce Shop


Divi Plus is a multipurpose premium plugin with lots of different Divi modules. You can use this plugin to enhance your websites performance, design and even functionality. Whether you’ve got a personal Divi website or an organization’s, you could easily benefit from this plugin. It includes over 50+ Divi modules that also include Divi WooCommerce modules. In addition to these, it hosts 04 Divi extensions, multiple free Divi child themes, 50+ pre-built templates and over 250+ design sections.

If you go for this multipurpose Divi plugin, you’d only find yourself creating beautiful websites without compromising. It will boost your designing skills and save the time you might spend creating different elements using native Divi modules.

  • Now after getting this plugin, follow these instructions to install and activate it on your website successfully. Once done that, go to the SettingsDivi Plus.
Opening Divi Plus settings
Enabling WooCommerce modules of Divi Plus
  • Once enabled the modules, click Save Changes. Now, modules will appear in the Divi Builder module library. We’ve successfully enabled our Divi Plus module for the Divi WooCommerce shop; now, let’s see how we can use them to enhance our Divi shop.

Step 4: Design Shop Page With Divi Plus WooCommerce Products Module


To use the Divi Plus WooCommerce Products module for your Divi store, there are two ways. You could directly use it on a page or tweak the shop page using the Theme Builder.

Moreover, you can also any other Divi Plus WooCommerce modules on a regular page as well, but to dynamically present the content, it’s the recommended option. When you use these modules in the Theme Builder, Divi will render the same design specifications for different elements of a particular assigned template option.

Therefore, in this tutorial, we’ll use the module in the Theme Builder.

Step 4.1 – Edit the Shop Page in Divi Theme Builder

  • On your WordPress Dashboard, go to the DiviTheme Builder.
Opening Divi theme builder
  • Once Theme Builder opens, click Add New Template.
Add New Template in Theme Builder Library
  • It will open the Template Settings in which you need to select Shop in the WooCommerce Pages option and then hit Create Template.

  • A new template will be added to the theme builder. Now, you need to click the Add Custom Body option to design the shop’s body content. Then again, select Build Custom Body.
Shop template in Divi Theme Builder
  • To deploy builder canvas without any pre-inserted elements, select BUILD FROM SCRATCH.
Selecting build from scratch option in Divi Theme Builder
  • Once Divi Visual Builder gets deployed, insert a new row and then insert DP Woo Products.
Inserting Divi Plus WooCommerce Products module
  • As soon as you insert the module, it will bring WooCommerce products on the page with the following default look.
Default WooCommerce products look by Divi Plus Woo Products module
  • Move to the next step to see how we can utilize the Content tab’s settings to optimize products look and feel.

Step 4.2 – Enhancing Divi WooCommerce Products Design

  • The first setting available in the Content tab is Content settings with the following options,
Divi Plus WooCommerce Products module content settings
  • Product Type View – It provides you with further options to select what type of products you want to display on your Divi WooCommerce Shop. It includes Default which showcases all types of products. Then comes the Featured Products, Sale Products, Best Selling Products, and Top Rated Products.
Product Type View option in Divi Plus WooCommerce Products module
  • Using this particular option, you can easily create distinction in the shop and even exclude certain type of products. Thus, making it possible for you to build a store with exclusive WooCommerce products. After Product View Type, you get the option to apply a loop on the shop page using Use Current Loop. How does this work? Well, when you select a particular Product View Type, for example, Top Rated Products. And you use theme builder for categories. Then it would only display top rated products from those categories.

  • After loop, the module allows you to display products in two different layouts.
Divi Plus WooCommerce Products layout option
  • The Layout 1 keeps Add to Cart button placed under the regular and sale price.
Divi Plus WooCommerce Products layout 1
  • Whereas Layout 2 places Add to Cart button at the right side of the price text.
Divi Plus WooCommerce Products layout 2
  • Then comes the Number of Products, which allows you to define the value of how many products you want to display on the Divi WooCommerce shop. If you got 20 products, you could easily show them together. Just input the value in the field.
Number of products and order option
  • Order option will make it possible to sort products in Descending and Ascending order. And Order by would enable you to further define sorting order type — Date, Modified Date, Title, Slug, ID, Random, and None.
Order by option in the WooCommerce Products module
  • After Order and Order by, you get a product hiding option that is out of stock. To do that, all you have to do is check to Hide Out of Stock Products as YES.

  • And the last option available in the Content settings is to select product categories. The Include Categories option will provide you with all the WooCommerce categories. If you don’t select any, then the module will render products from all categories.

  • It’s a nice and easy way to include or exclude products from different categories. You could select a single category or multiple; it’s all up to you.

Display settings

  • The Display settings of the Content tab enables you to customize products appearance. Plus, show and hide certain products elements with the following options,

Divi Plus WooCommerce Products Display settings
  • The first option available is the Number of Columns. It allows you to show Divi WooCommerce shop’s products in up to 6 columns.
  • Then using Column Spacing, you could easily create space between those products. If you want to show shop products in masonry format, you could do that as well. Simply check Enable Masonry to YES. And keep Thumbnail Size as WooCommerce Single. We will discuss this option later.
Enabling Masonry format for WooCommerce Products
  • And this is how your products will look like in the shop in masonry format.
Divi Plus WooCommerce Shop products in Masonry format
  • By default products thumbnail is enable in Divi Plus WooCommerce Products module. However, if you want to disable them, you need to check Show Thumbnail as NO.
Products thumbnail option
  • With that, your products thumbnail will hide, and the option to keep thumbnails aligned with each other also. Nevertheless, if you keep thumbnails, then the module will provide you with the Thumbnail Size option.
Thumbnail Size option in the Divi Plus WooCommerce Products
  • WooCommerce Thumbnail — Keeps all thumbnails in similar height. At the same time, WooCommerce Single will show product thumbnails of their individual dimensions. To have an idea, look at the below screenshot.
WooCommerce Products Thumbnail Size Variation
  • Then comes the Pricing and Add to Cart button option.
Divi Plus WooCommerce Pricing and Add to Cart button option
  • If you want to disable pricing, check Show Price as NO. And if you want to disable Add to Cart button, then check Show Add to Cart as NO.
Show Add to Cart button on Hover
  • However, when displaying Add to Cart button, it also provides you with the option to show it on hover. To do that, you need to check Show Add to Cart on Hover as YES. And this is how it would get displayed.

  • The last option available in the Display settings is to display the Sale Badge. Plus, you could also change the layout using the Badge Text option. It allows you to display Sale Label and Sale Percentage.
Sale Badge options

Background Settings

  • The Background settings available in the Content tab, enables you to customize products’ background with color, gradient, and Image.
WooCommerce Products with background customizations
  • Simply go to the settings and apply customizations as required.

Step 4.3 – Customizing Divi Plus WooCommerce Products’ Element in the Design Tab

  • Once tweaked all the option in the Content tab, the Design tab provides you with the option to take that modification to the next level. The following options are available in the Design tab,
Divi Plus WooCommerce Products module and its design tab
  • Text — Here, you can apply text customisation to the product’s title. Change heading level, apply different font family, type, weight and style. You could also change color, alignment and much more using this particular setting.
Divi Plus WooCommerce Products Title Text Customizations
  • The Price settings enable you to customize price text for both Regular and Sale price. Except for the heading level, the text customizations you could do for the product’s title text can be done for the price as well.
WooCommerce Products Regular and Sale price tweak options
  • After Price text customisation, you get the option to customize the sale badge in the Sale Badge settings. Here you could change sale badge background color, text style and even apply rounded corners. In the following illustration, I’ve changes the sale badge color as well as applied rounded corners.
WooCommerce Products with customized sale badge
  • The Add to Cart settings allow you to customize the button background with color, gradient and image.
Add to Cart button design customization options
  • You could also change Add to Cart’s text style and even apply rounded corners to it. WooCommerce products with customized Add to Cart button having rounded corners could look the same as the following screenshot.
Divi Plus WooCommerce Products with customized add to cart button
  • After Add to Cart settings comes the Spacing settings that allow you to customize Product Content and Image Padding according to the requirements.
WooCommerce Products Spacing settings
  • Then comes the Border settings using which you can easily define rounded corners, border styles, border width and much more for the products.
WooCommerce Products Rounded Corners and Border Styles options
  • And the last option available in the Design tab of Divi Plus WooCommerce Products is Box Shadow settings.
Box Shadow settings for the WooCommerce Products
  • Using this particular setting, you could easily apply box shadow to the products. WooCommerce products with customized rounded corners, border styles and box shadow look like the below screenshot.
WooCommerce Products with box shadow and border styles applies

We’ve explored all the option of the Divi Plus WooCommerce Products module. Now, it’s time to add another module to the shop template and see what it could do to improve Divi shop.

Step 5: Add Divi Plus WooCommerce Products Carousel to the Shop Page



Another WooCommerce module available in the Divi Plus plugin is WooCommerce Products Carousel. Using this module, users can display their Divi eCommerce’s product on a slider. And not only slider but they can also apply different sliding effects as well. The module is a nice choice whether you want to bring uniqueness to the page simply. Or you’d want to mix multiple things. For example, on a top-rated products shop page, you might also want to display bestselling products to recommend to the users.

Therefore, products carousel is the most suitable approach. The following will help you how to insert this module on the page. And further, use it at its best.

Step 5.1 – Insert Divi Plus WooCommerce Carousel Module

  • You could create a new page or use the same shop template you used in the previous step. Then, add a new row and insert the DP Woo Products Carousel module.
Inserting Divi Plus WooCommerce Products Carousel module
  • Upon insertion, it will start to display products on the carousel, and you’d have the Content tab open with all the settings.
  • The next step will guide you to use the module’s Content tab’s settings effectively.

Step 5.2 – Customizing WooCommerce Products Carousel Content

The first two settings available in the Content tab are Content and Display. Both consist same options and features as the WooCommerce Products module. Content settings allow you to select Product View Type, Layouts, Number of Products and more.

Content settings of the Divi Plus WooCommerce Products Carousel module

The Display settings provide you with the options that you can use to Show and Hide products elements. Like thumbnail, price, add to cart and sale badge.

Display settings of the Divi Plus WooCommerce Products Carousel module

We’ve explored these settings already in the WooCommerce Products module. Therefore, we’re going to skip them and move to the next one, which is Slider.

Slider Settings

  • The first option available in the Slider settings is the Slide Effect. It includes four different WooCommerce products carousel effects that you can easily apply to your shop. The four slide effects are Slide, Cube, Coverflow, and Flip.
WooCommerce Products Carousel Slide Effects
  • And this is how WooCommerce products carousel looks with each slide effect.

Slide WooCommerce Products Carousel Effect

Cube WooCommerce Products Carousel Effect

Coverflow WooCommerce Products Carousel Effect

Flip WooCommerce Products Carousel Effect

  • When you select the Slide and Coverflow effect, they open some additional options also. Using them, you can enhance the products carousel look even more. Let’s check out what they are, and they work.

Slide Effect Additional Options

  • Upon selecting Slide effect, it provides you with Number of Products Per View, Number of Slides Per Group, and Space Between Slides options.
Slide Effect options in Divi Plus WooCommerce Products Carousel
  • The Number of Products Per View option let you define how many products you want to display on the carousel at a single time. It allows you to select the number of products per view in up to 10 products. To use this option, you need to click the drop-down menu and select your value.
  • Then comes the Number of Slides Per Group option. It provides you with the control to slide up to 10 products at a single time. By default, it’s 1 product slide at a time, but you can easily change that using this option.
Number of Slides per group
  • And the last additional option that becomes active upon selecting the Slide effect is the Space between slides. This allows you to increase or decrease the gap between each product on the carousel.

Coverflow Effect Additional Options

  • With Coverflow WooCommerce products carousel effect, you get Space between slides, Slide Shadow, Coverflow Rotate, and Coverflow Depth as additional options.
Coverflow effects option in WooCommerce Products Carousel Module
  • Like the Slide effect, the Space between slides option of the Coverflow effect enables you to increase or decrease the gap between carousel products.
  • And if you want to apply a shadow effect on the carousel products, then you can check Enable Slide Shadow as YES. It further provides you with the option to choose different shadow colors. Coverflow Rotate option makes it possible to increase or decrease the tilt angle of the products on the carousel. And the last option, Coverflow Depth, allows you to zoom in and zoom out on the products. The more Coverflow depth’s value would be, the more it will zoom out. Nevertheless, if you keep Coverflow depth at a lower value, then products will be seen enlarged.

Common Slider Setting’s Slide Effects’ Options

  • The common options available in the Slider settings for each carousel effect are the following,
Common slider settings for WooCommerce Products Carousel
  • The Equalize Slides Height option makes it possible to bring each carousel product to a similar height as some products may have different image dimensions and a longer title. So, they could create non-uniformity in the layout. But using this option, you could easily create uniformity among all the products.
Equalize Slides Height and Loop option in WooCommerce Products Carousel
  • Then comes the Enable Loop, which allows you to apply a loop on the products carousel. To do that, all you have to do is check Enable Loop as YES. And your Divi WooCommerce shop’s product carousel will rotate without stopping once.
Divi Plus WooCommerce Products Carousel module and its autoplay options
  • By default, the products carousel is set to slide automatically. But if you want to turn that off, then you could easily do that by checking Autoplay to NO. However, if you keep autoplay on, then you could also set the value for autoplay start with the Autoplay Delay option.
Pause on Hover and Transition Duration option
  • After the autoplay option, you get Pause On Hover and Transition Duration. If you don’t want to stop the carousel when users hover on it, check Pause On Hover as YES. And with Transition Duration, you can decide how much time the carousel should take to showcase all the products completely.
Show Arrows on WooCommerce Carousel
  • After these, you get Slider Arrows and Pagination options. To display slider arrows, check Show Arrow as YES. It further opens the options to select the icon for Previous and Next arrows. Plus, Show Arrows On Hover.
Dots Pagination option and its styles
  • To enable pagination, check Show Dots Pagination as YES. It further provides you with the option to change the dots pagination style. This is how the products carousel looks with each dots pagination style.

Divi Plus Woo Products Carousel with solid dot pagination

Solid Dot

Divi Plus Woo Products Carousel with transparent dot pagination

Transparent Dot

Divi Plus Woo Products Carousel with stretched dot pagination

Stretched Dot

Divi Plus Woo Products Carousel with line dot pagination

Line

Divi Plus Woo Products Carousel with rounded line pagination

Rounded Line

Divi Plus Woo Products Carousel with squared dot pagination

Squared Dot

Background Settings

  • The Background setting of the Divi Plus WooCommerce Products Carousel module is the same as the previous module. It allows you to change the products background with color, gradient and image.
Woo Products Carousel Background options
  • Simply go to the settings and apply customizations according to the needs.

Step 5.3 – Customizing WooCommerce Products Carousel Design

  • The Design tab of the products carousel module consists of the same settings with the same functionalities as the WooCommerce Products module.
Divi Plus Woo Products Carousel Design tab
  • You can apply customizations to the carousel products as you could with the WooCommerce products module, except for Slider and Spacing settings. The Slider setting available in the Design tab allows you to change Arrow Padding, Font Size, Color and Background. Plus, you could also apply an arrow background border with background border color.
Woo Products Carousel Slider options in Design tab
  • What else it allows you to do is change color for active and non-active (inactive) pagination dots.
Woo Products Carousel Slider pagination options in Design tab
  • With Spacing settings, you could change the Padding of the Slider Container, Product Content and Image.
Woo Products Carousel Spacing options in Design tab
  • Apart from these, all the other options are the same as the Divi Plus WooCommerce Products module.

Step 6: Create Divi WooCommerce Shop Categories With Divi Plus Woo Products Categories Module


Divi WooCommerce shop is incomplete without working on its categories. Therefore, Divi Plus includes another WooCommerce module that enables you to customize the category archive page. Or you could use any regular page where users can easily find all the categories. The following steps will help you how to use the products categories module in Divi effectively.

Step 6.1 – Insert Divi Plus WooCommerce Products Categories Module

  • To create customized WooCommerce products categories, insert the DP Woo Products Categories module on a page.
Inserting Divi Plus Woo Products Categories module
  • Upon insertion, it will display products categories that include some products assigned to them. Categories without any product won’t get displayed.
Woo Products Categories module

Step 6.2 – Customizing WooCommerce Products Categories in Content Tab

  • The first setting available in the Content tab is Content. Here you can select layout and categories to display.
Divi Woo Shop Products Categories and their layout option
  • Layout 1 showcases product categories thumbnail with title and product count underneath, as shown in the above screenshot. Whereas, Layout 2 showcases product title and product count on thumbnails with a content background.
Woo Products Categories in Layout 2

Display Settings

  • Display setting allows you to select Number of Columns in which you want to display product categories. It allows up to 6 number of columns for now.
Woo Products Categories and Number of Columns
  • Then Column Spacing to assist you to increase or decrease the gap between category tiles.

  • If you want to enable masonry format on Divi WooCommerce shop’s product category, then you could do that by checking Enable Masonry as YES.
Enabling Masonry format on WooCommerce categories
  • After this, you get the option to show or hide the category thumbnail. By checking Show Thumbnail as NO, you could hide thumbnails. And if you want to display, do the opposite.
Woo Products Categories thumbnail size option
  • However, when you choose to show thumbnails, you get the Thumbnail Size option which provides you with further options — WooCommerce Thumbnail and WooCommerce Single.
Woo Products Categories and their thumbnail size variations
  • And the last option available in the display settings is to display product count on categories. To display, check Show Product Count as YES. It further opens the option to Show Content on Hover.
Woo Product Categories Product Count option

Background Settings

  • Like the previous Divi Plus WooCommerce modules, the Background setting, available in the Woo Product Categories, allows you to customize the product’s content background with color, gradient and image.
Woo Product Categories background customizations
  • Simply apply the customizations as required.

Step 6.3 – Customizing WooCommerce Products Categories in Design Tab

  • The following additional settings are available in the Design tab of the Divi Plus Woo Products Categories module.
Design tab of the Woo Products Categories module
  • Title — It allows you to customize the text style of the products categories title.
Text settings in Design tab of Woo Categories module
  • Product Count – Using this particular setting, you could easily customize the text style of product count.
Product Count text settings in Design tab of Woo Categories module
  • With Border settings, you can apply rounded corners around products categories thumbnail and different border styles.
Border settings of the Woo Products Categories module
  • And the Box Shadow settings make it possible to enhance product categories look with different shadow on them. This is how products categories look with a customized box shadow and rounded corners.
Woo Products Categories with rounded corners and box shadow

Wrapping Up


So, this was our take on Divi WooCommerce and Divi Plus modules for the WooCommerce shop. Using these modules, you could take your Divi shop to a new level. And help users find their favorite products without any effort. If this article helped you find out the best solutions to create your amazing Divi eCommerce store and you’ve got any thoughts in mind. Let us know in the comments.

Till then, happy Divi web designing.

Posted By:
Mohd Arif
Dreamer, Schemer, Music & Technology enthusiast. He enjoys building things that speak HTTP. Arif is Development Head at Elicus and has over 8 years experience in the WordPress development industry.

1 Comment

  1. Iman

    plz plz plz add out of stock label and some option that we can only show one specific product

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

1 Comment

  1. Iman

    plz plz plz add out of stock label and some option that we can only show one specific product

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

cyber-monday-sale-banner

Popular on Divi Extended

Divi Plus Divi Child Theme Divi Header Layouts