WooCommerce Variations to Cart

The WooCommerce Variations to Cart add-on provides you with the ability to select multiple variations of a product along with its prices, without leaving the product page.

Video Tutorial

Watch the tutorial video below for a quick walkthrough of the add-on’s features and setup process.

For detailed instructions, please continue reading the full documentation. If you still have any questions, feel free to submit a support ticket.

Installation

• Install the WooCommerce plugin & activate it.
• Install the WooCommerce Variations to Cart add-on and activate it.
• There will be a new “Variations to cart” entry within the WooCommerce menu.

Activate Your License Key

The license key can be configured from the License Settings tab, found on the “Variations to Cart” menu. License keys will be sent to your email address when you purchase the add-on.

Insert your license key in the field and then click on Activate.

General Settings

Enable Bulk Discount on User Roles

Enabling this option to select user roles eligible for a discount. If no user role is selected, the discount feature applies to all user roles. Otherwise, the discount feature applies only to the selected user roles.

Enable Variation Label

Enabling this option will display each variation title on the product page. This option only works for the “Table” Layout style.

Enable Stock Quantity

Enabling this option will display each variation’s stock quantity on the product page.

Enable Change Variations in Cart

Enabling this option allows customers to change product variations directly from the cart page. If it is disabled, customers will not be able to change the product variation added to the cart on the cart page.

Enable Debug Logs

Enable this option to track license validation activities and errors. It is useful for troubleshooting errors. When this option is enabled, a new “Debug Logs” tab will become visible. Similarly, when the option is disabled, the “Debug Logs” tab will no longer be visible.

Select Theme Color

From here, you can select the color of the Quantity Increment background and the Add to Cart button.

Font Family

The selected font will be displayed on the variation price, quantity, and the Add To Cart button.

Button Text

From here, you can change the button text on the variable product’s product page.

Layout Style

From here, you can change the layout style for displaying variations on the variable product’s product page. You can choose from the following layout styles:

1. Table
2. Card Grid
3. Card Slider

Create variable products

Navigate to the WordPress dashboard, select Products from the menu, and click on “Add New”. To create a variable product;

• Set the product title & description.
• From the “Product Data” dropdown, select the Variable product type.

• Next, after setting the Inventory and Shipping, add the product attributes.
• In the first field, add the attribute name and then add its values.
• Don’t forget to enable the checkboxes of “Variable on product pages” and “Used for variations”.
• Click on the “Save Attributes” button.

• Next, navigate to the Variations tab and click the “Generate variations” button.

• This will create all possible variations.

• Now, click the individual variations and set their prices and other relevant settings.

• Set the featured product image.
• Next, navigate to the “Variation to Cart Settings” tab.
• Enable the “Enable Variations to Cart” toggle if you want to allow customers to add multiple product variations to the cart. When disabled, only one variation can be added to the cart per order.
• Enable the “Enable Bulk Variation Discount” toggle if you want to enable quantity-based discounts for these product variations. Here, you need to select whether you want to apply a percentage-based discount or a fixed amount discount from the “Discount Type” option and provide the discount rules.

• Finally, click on the “Publish/Update” button.

Here is how the product looks on the front end

Developer’s Doc

Action and Filter Hooks

wn_cart_total_hide

Purpose: Hide the Cart total.

Parameters: 

• 0 or 1 (Integer)

wn_button_color

Purpose: Change the button color.

Parameters: 

• #000000 to #FFFFFF (Hex color code)

wn_product_table

Purpose: Change the product table color.

Parameters: 

• #000000 to #FFFFFF (Hex color code)

wn_product_quantity

Purpose: Change the product quantity button color (“+” and “-”).

Parameters: 

• #000000 to #FFFFFF (Hex color code)

wn_table_scrollbar

Purpose: Change the product table scrollbar color.

Parameters: 

• #000000 to #FFFFFF (Hex color code)

FAQ’s

Changelogs

1.2.0

• New: User role–based access control for quantity-based discount.
• New: Quantity-based discount support applied per product based on the total selected variation quantity.
• New: Ability for customers to change selected variation attributes directly from the cart without removing items.

1.1.8

• Fix: Resolved issues with slider slides not rendering correctly.
• Fix: Addressed security issues identified by PHPCS in compliance with WordPress Codex.
• Fix: Improved overall plugin performance by resolving PHPCS-reported issues.

1.1.7

• Fix: Fixed the “Stock Quantity” option.
• Fix: Resolve the security issues for the plugin.
• Fix: Resolve the performance issues for the plugin.
• New: Added two new layout Card Grid and Card Slider appearance for variations.

1.1.6

• Fix: Fixed the issue where attribute names were displaying with an incorrect prefix.
• Fix: Fixed responsiveness issues related to the quantity and price totals.

1.1.5

• Fix: Fixed license module functionality.

1.1.4

• New: Added a new “Stock Quantity” column.
• New: Added a filter to change the color of individual items and hide the total cart.

1.1.3

• Fix: Ensure variation-specific quantity limits override global limits.
• Fix: Fix size column display and unrestricted variation options.
• Fix: Preserve price and quantity values after a page reload.
• Fix: Ensure cart and checkout reflect accurate prices and quantities.
• Fix: Implement proper decimal formatting based on WooCommerce settings.

1.1.2

• New: Added React-based Admin UI.

1.1.1

• New: Added an option to customize the “Add to Cart” button text.
• Fix: Removed the WooCommerce default “Add to Cart” button.
• Fix: Corrected the functionality for displaying variation names.
• Fix: Resolved the issue where the “Add to Cart” button did not work for non-logged-in users.

1.1.0

• New: Added a new feature for UI settings.
• New: Updated the UI for Variations in the cart.
• New: Added a new option for UI customization.

1.0.4

• New: Added new feature to show the attribute name.

1.0.3

• Fix: Fixed issue with incorrect price decimal values displaying.
• New: Added new feature to change the color for buttons.
• New: Added new feature to change the font style.

1.0.2

• Fix: Resolved issue with variation check not functioning properly when managing stock is checked.

1.0.1

• Added License Module.

1.0.0

• Initial release.