Skip to main content

Divi Shop Builder

Expand the functionality of the Divi builder past the product page into every aspect of WooCommerce. Divi Shop Builder allows you to set up and design fully custom WooCommerce shop and cart pages with the Divi Builder.

  • Naturally incorporated in the Divi Builder Modules:
    • Cart List
    • Cart/Checkout Notice
    • Cart Totals
    • Checkout Billing
    • Checkout Coupon
    • Checkout Order
    • Checkout Shipping
    • Woo Shop +
    • Thank you
  • No setup required
  • Lightweight

Requirements#

  • Self-Hosted WordPress Installation
  • Divi Theme by Elegant Themes
  • WooCommerce plugin by Automattic
  • PHP version 7.3 or greater
  • memory_limit 128M
  • post_max_size 160M
  • max_execution_time 180
  • upload_max_filesize 160M
  • max_input_time 180
  • max_input_vars 5000
  • MySQL version 5.6 or greater OR MariaDB version 10.0 or greater.
  • HTTPS support
  • Nginx or Apache with mod_rewrite module

Introduction#

Follow the instructions below to install and configure the Divi Shop Builder plugin.

Note

For the Divi Shop Builder plugin to work, you must have Divi from Elegant Themes. If you do not have it you can purchase it here. Once you have it, please install it on your self-hosted WordPress website before attempting to install Divi Shop Builder. Also, please install the WooCommerce plugin, you can get it here.

Installation#

From Wordpress Dashboard#

  1. Navigate to the ‘Add New’ in the plugins dashboard
  2. Navigate to the ‘Upload’ area
  3. Select divi-shop-builder.zip from your computer
  4. Click ‘Install Now’
  5. Activate the plugin and enter your License Key

Then go to Plugins > Divi Shop Builder and click "Settings" - you will be redirected to the Divi Shop Dashboard:

Go to the last tab in the Divi Shop Builder dashboard - "License Key" and activate your license key.

You can always access the Divi Shop Builder settings panel in Divi > Shop Builder.

Brief description of the modules#

Now that you have downloaded and activated your new plugin, you're all set!

IMPORTANT

Before using the modules, please make sure that Divi pages for cart and checkout are created and set them as those pages in WooCommerce > Settings > Advanced > Page setup:

Checkout modules should all be placed in the same section except for the coupon code field which must be in a different section, and no other modules containing HTML forms (<form>) can be in the same section as the checkout modules. Modules that can be used on the Cart Pages are:

Modules that can be used on the Checkout Pages are:

Before using Woo Shop + module, create a dedicated page for Shop and set it in WooCommerce > Products > Shop Page:**

A module that can be used on the Shop page is:

Before using the Thank You module, create a dedicated page for Thank you page and set it in WooCommerce > Settings > Advanced > Thank you page:

Now, you can create a new Page or Post and activate the Divi Builder as you normally would. Add a new section, add a row layout and add a new module. You will find that among the Divi Builder modules you know and love, there have been incorporated 9 new modules:

with these new Divi Shop Builder modules, you can showcase your shop and cart pages like never before!

Cart List Module#

Using this module, you're able to control every aspect of your cart list and its' details such as buttons and captions, impossible to be personalized before!

Here is how the Cart List module looks like by default:

You can also change the appearance of every element in the Design tab of the module.

Cart/Checkout Notices Module#

This module simply controls the notice shown on the cart/checkout page. You can set every detail of it as well:

Cart Totals Module#

Using this module, you're able to change every aspect of the cart totals section.

Also, the design properties as well:

Here's how the module looks like by default:

Checkout Billing Module#

Next, coming to the checkout page modules, we have the ability to control the appearance of the billing section:

Checkout Coupon Module#

We can personalize the additional coupon section as well:

Checkout Order Module#

Using this module we can adjust the order placement section:

Checkout Shipping Module#

The module allows to customize the shipping form details and appearance:

Woo Shop+ Module#

The module enables creating a Shop page and customizes its appearance.

Note

Before using the Woo Shop+ module, please make sure that a dedicated page for Shop and set the following page in WooCommerce > Products > Shop page.

You can showcase the list of products using a set of available options:

  • Sale Badge
  • New Badge
  • Featured Image
  • Title
  • Ratings
  • Price
  • Add To Cart Quantity *
  • Add To Cart Button
  • Categories
  • Stock Status
  • Description
Warning

"Add to cart quantity" element in the Woo Shop + module doesn't work if the "Enable AJAX add to cart buttons on archives" option is unchecked in WooCommerce > Settings > Products > Add to cart behavior

You may display only selected types of products….

The displayed products quantity can be customized by the following option:

The result might be sorted according to your preferences:

The product description excerpt - you might set different values for desktop, mobile and tablet devices.

The layout of presented products is defined by you:

The grid:

The list:

The grid/list with switch

The products columns can be changed as follows

You can set columns number based on device - Desktop/Tablet/ Mobile:

The description of product - you can display a default short description of product or customize description in single product.

Control of elements that are displayed on Shop page - sorting element, pagination and results.

Sale season? No problem! Now you can switch “Sale” badge and control how it is displayed on your shop.

Displaying quantity input directly in product card:

Finally, show only desire elements on a single product card:

Just a reminder! Every shop page element can be customized in tab “Design”:

Thank you Module#

The module enables creating a "Thank you" page and customizes its appearance. Your page with Thank you page module needs to be created and should be set under the WooCommerce > Settings > Advanced > Thank you page. Then, when an order is placed, it will redirect to the page which was set under the Woocommerce settings.

Thank you module allows you to change order received messages and order section titles. The page will have content displayed after making a purchase and demo data will be displayed if “Test Mode” is enabled. By default, the page will be empty. “Test Mode” setting should be disabled for live sites.

Changelog#

See the Changelog text for this plugin by following this link: https://divi.space/product/divi-shop-builder/?changelog=1