WooCommerce Variations to Cart

The WooCommerce Variations to Cart add-on provides you the ability to select the 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 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.

Select Theme Color

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

Font Family

The selected font will display on the variations price, quantity and on 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 the 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 mark enable the checkboxes of “Variable on product pages” and “Used for variations”
• Click on the “Save Attributes” button.

• Next, navigate to the variations, and from the dropdown select “Add variations from all attributes” and click on the “Go” button.

• This will create all possible variations.

• Now click on the individual variations and set its price and other relevant stuff.

• The last step is to set the featured product image and click on the Update.

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.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.