Divi Smart Cart

⌘K
  2. Home
  4. Divi Smart Cart
  6. Get Started
  8. Divi Smart Cart Module Documentation

Divi Smart Cart Module Documentation

Welcome to the Smart Cart Module, your best solution to reducing cart abandonment and enhancing your WooCommerce store’s user experience. Designed for seamless integration with Divi, this module offers a sleek and modern way for customers to access, view, and manage their cart without leaving the page.

Key Benefits:

  • Quick Access to the Cart: A floating cart icon ensures the cart is always within reach.
  • Real-Time Updates: Customers can modify their cart instantly without page reloads.
  • Enhanced Customization: Full control over the cart’s design, layout, and behavior.
  • Minimized Cart Abandonment: With easy access and a smooth user experience, customers are more likely to complete their purchases.

Setting Up the Smart Cart Module

Step 1: Installation

  1. Download the Smart Cart Module plugin file from your account.
  2. Go to your WordPress dashboard and navigate to Plugins > Add New.
  3. Click Upload Plugin, select the downloaded file, and click Install Now.
  4. Once installed, click Activate Plugin.

Step 2: License Activation

Upon activating the plugin, a popup will appear asking you to activate your license. Follow these steps:

  1. Enter the license key provided during your purchase.
  2. Click Activate License to validate.

Step 3: Enabling the Smart Cart Module in Divi

Divi Smart Cart Module Documentation 1
  1. Navigate to Divi > Theme Builder in your WordPress dashboard.
  2. Create or edit your Footer template and add the Smart Cart Module from the Divi Builder interface.
  3. Configure the module settings to fit your design and functionality requirements.
Divi Smart Cart Module Documentation 2

Content Settings

The Smart Cart Module comes with a variety of configuration options designed to give you full control over its functionality and appearance. Below is a detailed explanation of the options available in the Content Settings (the first tab of the module).

Enable/Disable Features

Divi Smart Cart Module Documentation 3
Divi Smart Cart Module Documentation 4
Divi Smart Cart Module Documentation 5
Divi Smart Cart Module Documentation 6

Toggle the following features on or off based on your preferences:

  • Enable Item Remove:
    • Show or hide the option to remove items from the cart.
    • Default: Yes.
  • Enable Item Thumbnail:
    • Display a thumbnail image of each product in the cart.
    • Default: Yes.
  • Enable Item Price:
    • Show the price of each item in the cart.
    • Default: Yes.
  • Enable Item Quantity:
    • Allow users to adjust the quantity of items directly in the cart.
    • Default: Yes.
  • Enable Item Subtotal:
    • Display the subtotal price for each item.
    • Default: Yes.
  • Enable Apply Coupon:
    • Show an input field to apply coupon codes.
    • Default: Yes.
  • Enable Clear Cart:
    • Add a “Clear Cart” button for users to empty their cart.
    • Default: Yes.
  • Clear Cart Text: Default: “Clear Cart”.
  • Enable Cross-Sells:
    • Show related or recommended products directly in the cart.
    • Default: Yes.
  • Enable Cart Totals:
    • Display the total cost, including taxes and fees.
    • Default: Yes.
  • Enable View Cart Button:
    • Add a button to view the full cart page.
    • Default: Yes.
  • View Cart Button Text: Default: “View Cart”.
  • Enable Checkout Button:
    • Show a button to proceed directly to the checkout page.
    • Default: Yes.
  • Checkout Button Text: Default: “Checkout”.
  • Enable Continue Shopping:
    • Include a button to continue browsing products.
    • Default: Yes.
  • Continue Shopping Button Text: Default: “Continue Shopping”.
  • Cart Header: Personalize the header section of the cart, which includes the title and header icon.
    • Header Icon: Select a custom icon or use the default cart icon.
    • Header Title: Change the cart’s title (default: “Your Cart”).

Controls (Popup Behavior)

Divi Smart Cart Module Documentation 7
  • Open Popup After Add to Cart:
    • Automatically open the cart popup after a product is added to the cart.
    • Options: Yes or No.
    • Default: Yes.
  • Click Outside to Close:
    • Allows users to close the popup by clicking outside the cart area.
    • Options: Yes or No.
    • Default: Yes.
  • Click Escape to Close:
    • Enables users to close the cart popup by pressing the Esc key.
    • Options: Yes or No.
    • Default: Yes.

Cart Layout

Now open the Design tab of the module.

Divi Smart Cart Module Documentation 8
  • Cart Style:
    • Choose between two cart styles:
      1. Side: A cart that slides in from the side.
      2. Popup: A centered popup cart for better focus.
    • Default: Side Drawer.
  • Side Position (Available only for Side style):
    • Select whether the side drawer opens from the left or right.
    • Default: Right.

Opening and Closing Animations

  • Opening Animation:
    • Choose from a range of animations to create a smooth opening effect, such as:
      • Fade In
      • Slide In Left
      • Slide In Right
      • Slide In Up
      • Slide In Down
    • Default: Fade In.
  • Closing Animation:
    • Select a closing animation for when the cart is hidden. Options include:
      • Fade Out
      • Slide Out Left
      • Slide Out Right
      • Slide Out Up
      • Slide Out Down
    • Default: Fade Out.

Floating Cart Icon

Under the Floating Cart Icon, you can customize everything; from choosing your preferred icon to controlling all colors, borders, sizes …etc

Divi Smart Cart Module Documentation 9

Control Everything!

Divi Smart Cart Module Documentation 10
Divi Smart Cart Module Documentation 11
Divi Smart Cart Module Documentation 12
Divi Smart Cart Module Documentation 13

We have only discussed the main options of the module, but you can customize all the fonts, colors, backgrounds, borders… for every section of the cart, you have total control over the design just like any built-in module and more.

Ajax Add to Cart

The module will allow you to add products to the cart using AJAX. This means adding products without page refresh. This is very fast and more convenient than the default behavior of WooCommerce.

  • When you activate the plugin, this AJAX effect will be activated automatically on single product pages.
  • On archive pages/modules (shop, category, tag pages, cross-sells, upsell and related products), you will need to activate it by going to your admin dashboard > WooCommerce > Settings > Products tab > enable “Enable AJAX add to cart buttons on archives.”
Divi Smart Cart Module Documentation 14
Screenshot

After enabling the AJAX on archive modules, the smart cart module will add an “Add to Cart” button to all these modules. You can customize this button to match your website’s design under the smart cart module’s design tab > Archive Add to Cart Button.

Divi Smart Cart Module Documentation 15

This Is Just The Beginning!

This is the initial release of the smart cart plugin, more features to come. We need your suggestions to make this plugin better. Please reach out using this form and all your suggestions are very welcomed.

Get the Smart Cart Plugin Now

How can we help?