Mar 12, 2021 | Divi Resources

Divi Plus Modules for WooCommerce

Divi Plus adds lots of modules, extensions, and layouts to Divi. Three of those modules were designed specifically for WooCommerce. In this article, we’ll look at these three WooCommerce modules and see what they can do.

Divi Plus WooCommerce Woo Products

Woo Products

The Woo Products module Displays WooCommerce products in several different layouts. It provides adjustments for the content, how it displays, backgrounds, and more. This example shows Content options. Choose the view type (featured, sale, bestselling, or best rated), the number of products to show, their order, categories, etc.

Display options let you choose the number of columns, spacing, show masonry, thumbnails, price, add to cart, sale badge, and show amount or percentage off. I’m displaying 2 columns and showing the cart and sale badge. I’m hovering over the second item to show the add to cart button.

Background adjustments control the color behind the text and the product cards.

Styling options make it easy to match the module to your website. Style the text, badge, cart button, and more.

Here’s the design within the Divi Online Store layout. I’ve styled it to match the layout.

Divi Plus WooCommerce Woo Products Carousel

Woo Products Carousel displays the products within a slider. It includes the same settings as the Woo Products Module except for the layout options. Instead, it provides slider options.  

Slider effects include:

  • Slide – slides the products as a regular slider.
  • Cube – rotates the product as if it were the side of a cube.
  • Coverflow – tilts the products on the sides toward the center product.
  • Flip – spins the product around to show the next product.

Select the number of slides that display and enable loop, autoplay, adjust the speed, transition, show arrows, show dots, and more.

Adjust colors and styles for each element in the Design tab. In this example, I’ve changed the colors for the title background and the add to cart button. I’ve also added arrows and dot navigation.

This example shows the Woo Product Carousel in the Divi Leather Company layout. I’ve added arrows and dots for navigation and increased the size of the arrows. The colors are from the layout. I’ve changed the sale badge to display the percentage off. The button includes a background image from the layout.

Woo Products Categories

Woo Products Categories displays the categories with featured images, a title, and the number of items. It has two layouts. Choose the number of columns, spacing, enable masonry, show thumbnails, and show the product count. This is Layout 1 with 4 columns. You can disable the image and product counts.

Layout 2 adds a border. This example displays 2 columns.

This example shows layout 1 with 4 columns in the Stationary layout. I’ve styled it to match and added a box shadow to make it stand out.

Purchase Divi Plus

We’ve looked at only three of the many modules and extensions available in Divi Plus. For access to these WooCommerce modules and many more features, purchase Divi Plus today. There are several purchase options to choose from:

  • Single site – $59
  • Unlimited sites – $149
  • Unlimited sites annual option – $79

Have you tried the WooCommerce modules in Divi Plus? Let us know what you think about them in the comments.

Posted By:
Randy A. Brown
Randy A. Brown is a freelance writer from east TN specializing in WordPress and eCommerce. He's a longtime WordPress enthusiast and loves learning new things and sharing information with others. If he's not writing or reading, he's probably playing guitar.

0 Comments

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.

0 Comments

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.

11 Superb WordPress Form Builders in 2021 (New, Old, Free & Paid)

11 Superb WordPress Form Builders in 2021 (New, Old, Free & Paid)

Creating forms in WordPress isn’t an easy task. Though, it’s not impossible either. With the right tools and knowledge, you can get the desired results in no time. And for contact forms, WordPress Form Builders are the tools you need.  However, as WordPress...

How to Easily Design a Divi Blog Timeline Layout

How to Easily Design a Divi Blog Timeline Layout

Divi Extended recently released the 1.9.0 version of the multipurpose plugin Divi Plus. And in this tutorial, we're going to discuss one of its parts -- the Blog Timeline module. Using this module, you can easily create vertical timelines for blog pages with different...

Popular on Divi Extended

Divi Plus Divi Child Theme Divi Header Layouts