Cart All In One for WooCommerce

Support Purchase

Cart All in One For WooCommere is a powerful tool which helps to create the sidebar cart, mini cart, menu cart, sticky add to cart … on your WooCommerce Store. The plugin also provides users with many useful tools to design sidebar cart and menu cart, sticky add to cart bar, recently viewed products,  which makes them eye-catching and to work effectively.

THE PLUGIN FEATURES

SIDEBAR CART

Display Sidebar cart pop-up with all features of the cart page. Customers can add coupons, select quantity, remove items, go to check out page directly from the sidebar cart. This option helps to reduce the checkout time  and increase the conversion rate of your store.

• Sidebar cart icon: display a small sidebar cart icon at the corner of the screen. Let the customer know how many products they have in their cart. And allow them to open the sidebar car pop-up.
• Sidebar cart pop-up: the sidebar cart pop-up appear when a customer adds a product to cart or click on the sidebar cart icon. The pop-up allows them to view their cart, use coupons or go to check out page directly.
• Product information: the sidebar cart pop-up displays the information about products in the customer’s cart including product name, product image, price, quantity.
• Change quantity: customers can change the quantity of each product directly in their cart.
• Remove Product: a remove button appear next to each product name, allow customer to remove that product from their cart.
• Cart Subtotal: display the subtotal amount, this amount does not include tax, shipping… and be same with the subtotal amount in your cart page.
• Cart total: display the cart total amount.
• Update Cart button: when customer change quantity/remove product in their cart, the update button allows them to update the cart total amount.
• Use Coupon: Coupons can be applied on the sidebar cart pop-up. If the coupon is added successfully, the subtotal amount will be reduced and the plugin will display a successful message. If the coupon can not be used, the plugin will display an unsuccessful message with the reason.
• Checkout: a checkout button allows customers to go directly to the checkout page if they decide to purchase your items.
• View Cart: go to the cart page directly with the View Cart button.
• Related products: the related product option allows to display related product at the bottom of sidebar cart. You can choose to display the best selling products, recently viewed products, or top rated product.
• Assign page: choosing the pages which display the sidebar cart.

MENU CART

The plugin adds a cart icon into the menus. It allows the customer to view the cart by hovering their mouse on the menu bar.

• Menu Cart icon: the plugin will display a cart icon on selected menus. The icon will display the number of items in the cart.
• Dropdown cart: display cart dropdown when customers hover their mouse over the menu cart icon. The dropdown display information about products, variation, image, quantity, subtotal.
• View cart button: redirect customers to your cart page.
• Checkout button: allow customers to go to the checkout page directly.

AJAX ADD TO CART

The AJAX Add to Cart option allows customers to add products to cart from single product pages or quick view pop-up without reloading the page. Beside that, the user can choose the products which are not to applied ajax add to cart.

ADD TO CART FOR VARIABLE PRODUCT

The plugin offers a custom Add to Cart button for the variable product. The customers can select variations and add the product to cart in archive pages without going to the single product page.

• Select option pop-up: in archive pages, when a customer clicks on the add to cart button of variable product, a pop-up will appear allowing them to select the product variations. With the variation pop-up customer can select product variations, quantity and then add the product to cart.
• Change the add to cart button label: change the label of the add to cart button to “select options” or any text you want. This option applies to variable products only.

STICKY ADD TO CART BUTTON

The plugin can display the Sticky add to Cart  on single pages which helps to increase the rate of adding products to cart from customers because Customers can add products without scrolling the bar to find the add to cart button.  Moreover, there are options for excluding products or categories from showing the Sticky add to Cart.

RECENTLY VIEWED PRODUCTS

The plugin have an option for adding recently views products to the WooCommerce stores to remind customers about what they are interested in and helps them to buy the items they want quickly. Recently viewed peoducts can add to the single product page or anywhere with the shortcode.

CHECKOUT DIRECTLY ON SIDE BAR CART

With the plugin, Checkout steps are integated to Sidebar Cart. Customers can checkout directly on sidebar cart without going to checkout page. This feature will encourage the customers to complete their orders quickly and boost your sales.

DESIGN

The plugin allows you to design the front-end of sidebar cart,  menu cart and Sticky add to Cart button to match with your website. The designs can be visible on settings area before publishing.

Sidebar Cart

• 2 styles: there are 2 sidebar cart style full height and pop-up.
• 4 position: you can put the sidebar cart in 4 positions.
• 8 styles of Sidebar trigger Event
• 12 loading type and change the color loading bar
• Automatically open sidebar cart when adding products to the cart.
• Flying cart animation: animation display the product go to customer cart.
• Open the sidebar cart when add products to cart.
• Add to cart animation: display an animation of the product “fly” to cart when clicking the add to cart button.
• Header: change background change, title, title color, apply coupon button color in the header area.
• Product list: background color, product image radius, product title color, remove icon color. Change the title color when hover mouse on the product.
• Footer: change the background color, checkout button text, checkout button color, view cart button text, view cart button color, cart total text color in the footer area.

Side bar Cart icon

• 4 front-end styles
• 45 cart icon
• Cutomize the size of cart icon
• Customize the position of cart icon
• Shadow for box
• Background color
• Cart icon color
• Product quantity color

Menu Cart

• Navigation page: choose to redirect to the cart page or checkout page when clicking on the menu cart icon.
• Show content: display the content of the cart when hover mouse on the menu cart icon.
• 45 cart icons for you to select.
• Change the color of the cart icon and cart hover color.
• Cart icon text: choose to display product quantity, total price, or both quantity and total price on the cart menu.
• Choose to show subtotal or total price on menu cart
• Change the text color of the menu cart.

Sticky Add To Cart Button

• Slect Product to Preview: Help user design sticky add to Cart button easily and effectively
• Templates: There are four template of sticky add to cart button to choose
• Positions: Set the positions for sticky add to Cart button.
• Display of Product ratings and Product Quantity.
• Set up the colors by color picker of text, background, icon…
• Ajust the Border radius, image width, size of buttons…

Checkout area on Sidebar Cart

• Customize the steps of checkout.
• Change the title of steps.
• Chose the icon displayed on checkout area on sidebar Cart
• Set up the color for back ground, icon, button and border radius.

Go Dashboard/ Plugins/ Add New and install the plugin using the installable zip file.

Guiding video on how to install and set up:

 

After successful install the plugin, go to Dashboard/ Cart All In One to config its settings.

The plugin offers features: the sidebar cart, the menu cart, AJAX Add to Cart button and the select variation pop-up for variable products.

You just need to enable these options to use, assign the pages you want to display sidebar cart.

In Menu Cart Tab, enable it and select the menu to display the Menu Cart

In Add To Cart Button Tab, do all settings relating to AJAX add to Cart, Add to Cart for variable products and Sticky Add to Cart on single product page.

Go to design to customize all the designs ralating to Sidebar Cart, Sidebar Cart Icon, Sidebar Cart header and footer, Sidebar Cart List Products, Menu Cart, Sticky Add to Cart Button. To get more detail, please read the “How does it work” section.

Sidebar Cart

You can config the settings of the side cart at Dashboard/ Cart All In One/ Sidebar Cart

1. Enable the sidebar cart on front-end.
2. Enable it to display sidebar cart on Mobile
3. Visible empty sidebar cart icon: this option allows you to choose if you want to display the sidebar cart icon when the cart is empty/
4. Assign page: This option allows you to assign the pages which display the Sidebar Cart
5. Design: Clicking on “go to design” will navigate to a page that helps you to design the Sidebar Cart

The page for designing Sidebar Cart

1. Display Sidebar Cart content: there are two styles of displaying content on Sidebar Cart: Style one and Style two.
2. Sidebar Cart Position: You can choose position to display Sidebar Cart, top left, top right, bottom left or bottom right.
3. Border Radius for Sidebar Cart Content (px): adjust the radius of Sidebar Cart border.
4. Fly to Cart: enable it to create an effect that make the products fly to the Cart when customers click on add to cart button.
5. Cart effect after add product: Choose the effect of Cart after adding product to the Cart.
6. Sidebar trigger event type: The Sidebar Cart content will be shown after click on the Cart icon or hover mouse on it.
7. Sidebar Trigger Event Style: Choose a style for appearing of Sidebar Cart
8.  Loading Type: Choose the type of loading for Sidebar Cart.
9. Loading Color: Choose the color of loading.

Menu Cart

1. Enable the Menu cart on front-end. This option will add a menu cart to your selected menus.
2. Mobile enable: Enable this option to display menu cart to your selected menu on the mobile
3. Visible empty menu cart: enable it to display the menu cart even when it is empty
4. Menus: choose menus which you want to display the menu cart, all your menus will appear here to choose.  Remeber to click on save button before going to design to ensure all your settings on design page are also updated to the  menu you assigned.
5. Go to design: Click on the link to go to design page for  designing the menu cart

The options for designing Menu Cart:

1. Navigation Page: Choose the Cart page and checkout page to redirect when customers click on Menu Cart
2.  Show content cart:  enable it to show the content of cart in menu cart.
3. Cart icon type: Choose the icon for Menu cart
4. Cart icon color: Select color for the cart icon
5. Cart icon hover color: Select the color for cart icon when hovering mouse over
6. Menu Cart Text: Choose the type of text next to cart icon. You can choose one of three types: Price, product counter, product counter and price
7. Menu Cart price: Choose the price displayed on Menu Cart: Total or Subtotal
8. Text  color: Select color for the text of Menu cart
9. Text Color hover: Select color for the text of Menu cart when hovering mouse over

Add to Cart Button

AJAX ADD TO CART

1. Enable AJAX Add to Cart button. This option allows your customers to add products to cart in product pages, pop-up… without reloading the page.
2. Exclude products: Add the product which are not applied ajax add to cart.
3.  Notification : Enable it to display the notification of adding to cart successfully when reloading page.

ADD TO CART FOR VARIABLE PRODUCTS

1. Select variation pop-up: This option will display a “select variation pop-up” when customers add a variable product to cart in the shop, categories pages.
2. Add to cart label: Enable this option to edit the add to cart button label of variable products.
3. Add to Cart button label: Change the label of add to cart button with variable products. Write your own label “select variations” “select options”…

STICKY ADD TO CART ON SINGLE PRODUCT PAGE

1. Enable sticky add to cart on single product page: Enable this to display sticky add to cart on single product page.
2. Mobile enable: Display sticky add to cart on mobile.
3. Exclude products: This option allows you to add the products which are not displayed sticky add to cart
4. Exclude Categories: This option allows you to add the Categories which are not displayed sticky add to cart
5. Design: Click on the link ” Go to design” to design “Sticky add to Cart”

 

1. Select product to preview: This option allow you to select a product to go with sticky add to cart to preview and do settings.
2.Template: There are four templates of sticky add to cart for you to choose
3.Position: Choose the position of sticky add to cart on single product page on desktop bottom or top
4. Position on mobile: Choose the position of sticky add to cart on single product page on mobile: bottom or top
5. Box Shadow color: choose the color of shadow  sticky add to cart box
6. Sticky bar background color: Choose the color of sticky bar background
7. Padding: Set the padding for sticky add to cart bar
8. Border Radius: Change the Border radius of sticky add cart barProduct ratings: Enable it to display product rating on sticky add to cart

9. Product quantity: Enable it to display product quantity selection on sticky add to cart bar
10. Border Radius of Product Quantity (px):Set the Radius of Product Quantity Border
11. Product image Width (px): Change the product image (width)  on sticky add to cart
12. Product image Height(px): Set the Height of Product image.
13. Product Name Color: Set the Color of Product name
14. Regular Price Color: Set the Color of Regular Price
15. Sale Price Color: Set the Color of Sale Price
16. Cart Button Text: Enter the Cart Button Text, you can set the text as you want.

17. Cart icon Type: There are many types of cart icon in sticky add to cart to choose
18. Cart Button Background Color: Set the Color of Cart button Background
19. Cart Button Text Color: Set the Color of Cart button Text
20. Border Radius of Cart Button(px): Set the Radius of Cart button Border
21. Font size of Cart Button(px): Set the font size of Cart Button on sticky add to cart
22. Cart Button Background Color on Moblie: Set the Color of Cart button Background on Mobile
23. Cart Button Text Color on mobile: Set the Color of Cart button Text on mobile
24. Border Radius of Cart Button(px) on mobile: Set the Radius of Cart button Border on mobile
25.Font size of Cart Button(px) on mobile: Set the font size of Cart Button on sticky add to cart on mobile.

Recently Viewed Products

1.  Shortcode: You can copy and paste the shortcode to any page you want to display the recently viewed products by customers
2. Enable it to display recently viewed products on single product pages
3. Mobile enable: Enable it to display recently viewed products on single product pages on mobile
4. Position on single product page: Choose position of recently previewed products on single product pages. There are three positions to choose: Before and after single product summary
5. Tilte: You can change the title of recently viewed products
6. Products limit: Enter the number of products which you want to show. The maximum number of recently viewed products displayed is 15
7. Number of columns:  The columns of recently viewed products on single product pages.
8. Infinite loop: Enable it to start over when reaching the end of slide
9. Number of carousel items that should move on animation: enter the number of items you want to move each time carousel moves on slideshow
10. Auto play: Enable it to play slideshow automatically
11. Slideshow speed: You can adjust the speed of slideshow by adding the slideshow speed (milliseconds as you want)
12. Pause on hover: Enable it to pause the slideshow when customers hover mouse over it

Sidebar Cart

Read the instruction in Sidebar Cart setting guide

Sidebar Cart icon

1. Cart Style: You can choose styles for cart and there are four cart styles.
2. Enable Box Shadow: Enable it to display the shadow of sidebar cart icon
3. Sidebar Cart size: You can set the size for sidebar cart. This new size parameter need to be the a ratio compared with original icon size, example: 1.5- It means that the new size will be 1.5 times bigger than the original one.
4.  Sidebar Cart size when hovering: You can set the size of sidebar cart size when hovering. This new size parameter need to be the a ratio compared with  icon size when not hovering over.
5. Cart Icon radius (px): Change the radius of Cart icon
6. Sidebar Cart Horizontal (px): You can move to set the Sidebar Cart horizontaly to the position you want
7. Sidebar Cart Vertical (px): You can move to set the Sidebar Cart verticaly to the position you want.

8.Cart  icon Type: There are 45 cart icon types for you to choose.
9.Cart Icon background color: Set the color of Icon background
10. Cart icon color: Set the color of sidebar cart icon.
11.Product counter Background color: Set the color of product counter Background.
12.Product Counter border radius (px):  Set the radius of Product Counter border

Sidebar Cart Header

Design Sidebar Cart Header

1. Background color: set the color of header background.
2. Header Border Style: Set the style of Header Border. There are four styles: No border, Solid, Dotted, Dashed
3. Header Border Color: Set the color of header border
4. Cart Title: Set the title of the Cart on sidebar header
5. Title color: Set the color of the title on sidebar header
6. Enable Coupon: Enable this option to allow customers apply the coupon code directly on Sidebar Cart
7. Coupon Input Radius(px): set the radius of Coupon input
8. Apply coupon button background color: Set the Color of  apply coupon button background
9. Apply coupon button hover background color: Set the Color of  apply coupon button background when hovering
10. Apply coupon button Radius (px): Set the radius of Apply coupon button
11. Apply Coupon Button Hover Text Color: Set the color of of Apply coupon text when hovering
12. Apply Coupon Button Radius: Ajust the Button Radius of Apply Coupon Button

 

 

Sidebar Cart List Products

Design the list products on sidebar cart

1. Update Cart when changing the product quantity: Enable it to update the cart when changing product quantity
2. Background Color: Set the color of list products background
3. Enable image Box shadow: Enable it to display the shadow of image box
4. Product image border radius (px): set the border radius of product image
5. Name color: Set the color of product title
6. Name hover color: Set the color of product title when hovering over
7. Price color: Set the color of price displayed
8. Quantity border color: Set the color of quantity border
9. Quantity border radius (px): Set the radius of quantity border
10. Trash icon styles: choose the trash icons.There are 11 trash icons to choose
11. Font Size for Trash icon: Set the size of Trash icon
12. Trash icon color: Set color of trash icon
13. Trash icon hover color: Set color of trash icon when hovering over

Sidebar Cart Footer

Design Sidebar Cart Footer:

1. Background color: set the color of footer background.
2.Footer Border Style: Set the style of Footer Border. There are four styles: No border, Solid, Dotted, Dashed
3.Footer Border Color: Set the color of Footer border
4.Price to display:  Choose the price to dislay: Total or Subtotal
5. Total Color: Set the color of Total
6. Price Color: Set the color of price
7.Button Enable:  Choose to enable the View cart button or checkout button.
8.Checkout Button Text: You can add the text of checkout button as you want
9.Button background color: set the color of checkout button background
10.Button text color: set the color of checkout button text

11.Button Hover Background: Set the color of  background button when hovering over
12.Button Hover Text Color: set color of button text when hovering
13.Button radius: Set the radius of update cart button
14.Custom message: add the message you want to display
15.Show products Plus: choose the type  of suggested products: Best selling products, Recently viewed products or top-rated products.
16.Product Plus title: Enter the name of suggested product title on sidebar cart footer
17.Product Plus Title Color: Set the color of product plus title
18.Number of  products to show: Add the maximum number of suggested products you want to show. You can not display the number of products bigger than 15

19.Cart button text on Product Plus:  Change the text of Add button on Product plus as you want. You also use the shortcode {cart_icon} to add cart icon to the button
20.Cart icon Type on Product Plus: Choose the type of icon for the the Add button. There are 20 icons to choose
21. Cart button background Color on Product Plus: Set the color of Cart button background on Product Plus
21. Cart button text Color on Product Plus: Set the color of Cart button text on Product Plus
22. Cart button hover Color on Product Plus: Set the color of Cart button on Product Plus when hovering over
23. Cart button hover text Color on Product Plus: Set the color of Cart button text on Product Plus when hovering over

 

Menu Cart

Design the Menu Cart

Go to the Menu Cart Settings instruction to read the guide for designing the Menu Cart

Sticky Add to Cart Button

Design the Sticky add to Cart button.

Go to Add to Cart setting instruction to read the guide for designing sticky add to cart button

Checkout

You can set up for customers to checkout directly on sidebar Cart and design the checkout sidebar:

1. Enable: Enable it to allow customers to check out directly without going checkout page
2.Mobile enable: Enable it to allow customers to check out directly without going checkout page on checkout
3. Background color: Set color of background
4. Keyboard Navigation: Enable it to allow customer to use arrow keys in checkout process
5. Display “Billing” and  “Shipping”  in the same time: Enable it to display both “Billing” and “shipping” information in one step
6. The Tiltle of Billing and Shipping Step
7. Display Both “Order” and “Payment” in One step
9.The title of Order naf Payment Step

10. Back to Cart button enable: enable it to display the back to cart button
11. Back to Cart button text:
12.Back icon type:
13.Back to Cart button background color
14. Back to cart button color
15. Back to Cart button hover background color
16. Back to cart button hover color
17. Back to cart button radius(px)
18. Next button text
19.Next button background
20. Next button  color
21. Next button hover background color
22. Next button hover color
23. Next button text Radius
24. Previous button text
25. Previous button background
26. Previous button color
27. Previous button hover background color
28. Previous button hover color
29. Previous button text Radius
30.Place order button text
31. Place order button background
32. Place order button color
33. Place order hover background color
34. Place order button hover color
35. Place order button Radius
36. Display the Bar for moving between steps
37. Moving bar color
38. Moving bar color when hovered mouse in
39.Moving bar color when selected.

 

Custom CSS

You can custom CSS yourself here.

Thank you for your attention!

If you have any question, please create a topic at our FORUM, we will support within 24 hours.