Cart 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 Content, Design 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:
- Cart Format
- Cart Icon/Image
- Cart Icon Placement
- Cart Icon Visibility
- Cart Contents Visibility
- Cart Contents Layout
- Show Empty Cart Contents
- 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:
- Count - the number of items in the cart
- Text - the word "Items"
- 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 colors, spacing, borders, box 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.
