Cart Settings

  1. Content Settings
  2. Design Settings
  3. Advanced Settings

To enable the Divi MadMenu Cart element open the module settings modal, go to the Content->Elements section and click Enable Cart

When the Cart element is enabled it's  ContentDesign and Advanced settings all become available.

1. Content Settings

The Cart element's Content settings are located in the Content->Cart settings section

The following settings are available:

  1. Cart Format
  2. Cart Icon/Image
  3. Cart Icon Placement
  4. Cart Icon Visibility
  5. Cart Contents Visibility
  6. Cart Contents Layout
  7. Show Empty Cart Contents
  8. Cart Contents Live Update

Cart Format

The Cart Format setting allows to select the the cart elements you would like to display: cart icon, cart contents or both the icon and contents.

Cart Image/Icon

There are two choices for the cart icon: Icon and Image. Selecting the Icon option will display Divi's default cart font icon

Whereas selecting the Image option allows uploading any custom image icon(s) both for the Normal and Fixed headers(if the Use Fixed Header Cart Image setting is enabled) as well as for each device(Desktop, Tablet and Phone)

Cart Icon Placement

The Cart Icon Placement setting is available only if both the cart icon and cart contents are enabled(if the Icon and Contents option of the Cart Format setting is selected) and allows to place the cart icon above, to the right, below or to the left side of the cart contents.

Cart Icon Visibility

This setting allows to control the cart icon visibility responsively.

The Cart Icon Visibility setting should not be confused with the Show Cart setting available in the Advanced->Visibility section which is used for controlling the responsive visibility of the Cart element.

Cart Contents Visibility

The cart contents consists of three parts: 

  1. Count - the number of items in the cart
  2. Text - the word "Items"
  3. Price - the cart subtotal

and the Cart Contents Visibility setting allows to set which of these parts of the cart contents to display(responsively).

Cart Contents Layout

By default all the cart contents are displayed in a row but it is possible to display them as column as well using the Cart Contents Layout setting. The contents layout can be set differently for each device.

Show Empty Cart Contents

By default the cart contents are displayed even if the cart is empty (the cart contents look like this:  0 Items $0.00). If you do not want to display the empty cart contents you can simply disable this setting. When the Show Empty Cart Contents setting is disabled the cart contents will be displayed only if the cart has items added to it.

Cart Contents Live Update

Enable this setting if you want the cart contents to be updated without reloading the page. This feature uses the WooCommerce cart fragments functionality, so, in order to use it first you need to enable the Enable AJAX add to cart buttons on archives in WooCommerce->Settings->Products->Add to cart behaviour

The Cart Contents Live Update setting is enabled by default and will become available only if the the AJAX add to cart is enabled in WooCommerce settings(as indicated above).

2. Design Settings

The  Design settings of the Cart element are located in the Design tab of the module settings.

The  Cart Order setting allows to set the Cart element order relative to other enabled header elements, it is located in the Design -> Layout:General section. The element order value can be different for each device.

To align the Cart icon  vertically and horizontally and to set its column width use the layout settings located in the Design->Layout:Elements->C tab

The Cart text design settings (for the cart contents) are located in the Design->Text:Cart section.

The design options set of the Cart element includes  colorsspacingbordersbox shadow and sizing options which are located in the Design->Cart section. The options sets for the normal and fixed headers are placed into two different tabs - Normal and Fixed, similar to all other header elements.

In addition to the available design options set, the cart and it's contents can also be customized by adding custom CSS into the custom CSS fields available in the Advanced->Custom CSS section.

3. Advanced Settings

To control the responsive visibility of Cart element use the Show Cart setting in the Advanced->Visibility section. 

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.