Created: 06/2019
Updated: 01/2021
By: VillaTheme
Thank you for using our plugin. If you have any questions that are beyond the scope of this documentation, please feel free to request support at our Support Forum. Thanks so much!
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.
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.
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.
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
Side bar Cart icon
Menu Cart
Sticky Add To Cart Button
Checkout area on Sidebar Cart
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.
You can config the settings of the side cart at Dashboard/ Cart All In One/ Sidebar Cart
The page for designing Sidebar Cart
The options for designing Menu Cart:
AJAX ADD TO CART
ADD TO CART FOR VARIABLE PRODUCTS
STICKY ADD TO CART ON SINGLE PRODUCT PAGE
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.
Read the instruction in Sidebar Cart setting guide
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
Design Sidebar Cart Header
Design the list products on sidebar cart
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
Design the Menu Cart
Go to the Menu Cart Settings instruction to read the guide for designing the Menu Cart
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
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.
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.