How to set up the plugin: #
After activating the plugin, navigate to Divi → Theme Customizer.
Scroll down, and you’ll find a new tab called “Divi Mini Cart”, located just above the WooCommerce section.
Icon Colors and Sizes #
For best results, when uploading a custom icon, use a square image.
You can also customize the following settings:
– Count Color – Change the color of the number displayed in the cart.
– Count Background Color – Adjust the color of the bubble behind the number.
– Count Text Size – Set the size of the number inside the bubble.
– Count Width and Height – Control the overall size of the bubble.
– Count Horizontal and Vertical Position – Move the count bubble to your preferred position.
– Count Bubble Border Radius – Modify the border radius for a rounded or custom bubble shape.
Header and Quantity #
You can also customize the following options:
– Enable or disable the header
– Mini Cart Header Background – Change the background color of the header
– Close Icon – Select which icon to use for closing the mini cart
– Close Icon Size – Adjust the size of the close icon
– Close Icon Color – Set the default color of the close icon
– Close Icon Hover Color – Define the color when hovering over the close icon
– Enable or disable quantity controls
– Quantity Control Design – Choose the visual style of the quantity controls
– Quantity Control Size – Adjust the overall size of the quantity buttons
– Quantity Control Color – Set the color of the quantity controls
– Quantity Control Hover Color – Change the color of the quantity controls on hover
Mini Cart Window #
Here you can customize the look of the drop-down cart window:
– Mini Cart Window Background – Change the background color of the entire mini cart window.
– Item Image Size – Adjust the size of the product image.
– Item Title – Customize the title’s size, color, line height, and font weight.
– Title Position – Set the vertical position of the item title (Top, Middle, or Bottom).
– Item Amount – Customize the text size, color, line height, and font weight of the product amount.
– Remove Link – Adjust the “X” (remove link) size, color, and position.
– Divider – Set the divider’s height (in pixels) and color. This is the line separating product items and the subtotal.
– Subtotal Text – Customize the subtotal’s size, color, line height, and font weight.
– Sum Text – Adjust the sum text’s size, color, line height, and font weight.
Mini Cart Buttons #
– Button Background Color – Set the background color of the buttons.
– Button Border – Customize the border size, color, and radius.
– Button Layout – Choose to display the buttons in a row (side by side) or in a column (stacked vertically).
– Button Padding – Adjust the top and bottom padding for better spacing.
– Button Hover Effects – Customize the hover colors for the text, background, and border.
Note: These design settings apply to both buttons unless you’ve customized the “Mini Cart 2nd Button” section separately.
If a different design is set there, the options here will apply only to the first button (the View Cart button).
Mini Cart 2nd Button #
Here you can customize the appearance of the second button (the Checkout button) if you want it to look different from the first button (the View Cart button).
If you prefer both buttons to share the same design, simply leave this section unchanged.
