How to Add a Sidecart to your Divi site with Divi Side Cart for WooCommerce

Introduction

With Divi Side Cart for WooCommerce you can easily add a Side Cart functionality to your Divi and WooCommerce store.

Step 1: Download and install

The Divi Side Cart for WooCommerce plugin is only available for All Access Pass Member, so to download it go to Divi Life Customer Portal > All Access Pass Downloads

1. Go to WordPress dashboard > Plugins > Add new
2. Upload plugin
3. Choose file > Select divi-side-cart-for-woocommerce.zip

Step 1: Setting up Divi Side Cart for WooCommerce

Once the plugin is installed, your new Side Cart will be enabled on your site. So after installed, you can set up additional settings, triggers and custom CSS.

General tab

1. Auto Open: When any product is added, the side cart will be opened automatically.
2. Ajax Add to Cart: Add to cart without page refresh.
3. Loading Icon: Show preloader/check icon while adding to cart.
4. Reset Cart Form: Resets quantity, removes “View cart” button.
5. Head Title: Here you can change the title of your side cart.
6. Shipping Text: Change or remove your Shipping text.
7. Cart Button Text: Change your text button. By default is “View Cart”.
8. Checkout Button Text: Change or remove the Checkout button text.
9. Continue Button Text: Change or remove the Continue Button text.
10. Continue Button URL: Change the URL of the Continue Button. By default is “#” to keep on the same page.
11. Product total: Show/Hide the product total count.
12. Redirect to Cart: Redirect to the cart page after successful addition.
13. Enable Basket: Show/Hide the Cart Basket on your site.
14. On Cart & Checkout Page: Show/Hide the Cart Basket on Cart and Checkout pages.
15. Hide Basket Pages: Exclude specific pages separated by coma via URL, page ID or post type.
16. Product Count: Show/Hide product count.

 

Design tab

1. Head Font Size: Change the font size of the header.
2. Open From: Change the position of the Cart Basket.
3. Container Height: Change the height of the Cart Basket.
4. Container Width: Change the width of the Cart Basket.
5. Body Font Size: Change the font size of the body.
6. Product Image Width: Set the width of the product image.
7. Footer Buttons Margin: Margin of the footer buttons.
8. Basket Position: Set the position of the cart basket button.
9. Basket Background Color: Set the background color of the cart basket icon.
10. Basket Icon Color: Set the icon color of the cart basket.
11. Basket Icon Size: Set the size of the icon of the cart basket.
12. Count Background Color: Change the background color of the product count.
13. Count Text Color: Change the text color of the product count.

 

Advanced tab

1. Custom CSS: Add custom CSS to your side cart basket.
2. Custom triggers: Create a custom class that can be added into any Divi module or menu item to trigger the side cart.

 

CSS Selectors

Header:

.divilife-wsc-header

 

Body:

.divilife-wsc-body

 

Footer:

.divilife-wsc-footer

 

Subtotal title:

.divilife-wsc-subtotal

 

Shipping text:

divilife-wsc-shiptxt

 

Footer buttons: Buttons as Cart, Checkout and Continue Shoping buttons:

.divilife-wsc-footer a.button

 

Each specific footer button.
Cart button:

a.divilife-wsc-cart

Checkout button:

a.divilife-wsc-chkt

Continue shopping

a.divilife-wsc-cont

 

 

Pin It on Pinterest