How To Add Variations & Add To Cart On Shop Pages Using WooCommerce

This tutorial shows you how to enable variation buttons on shop pages and allow customers to add products to cart directly from the shop page using the Variation Buttons Pro plugin.

Prerequisites

• WooCommerce installed and activated
• Variation Buttons Pro plugin installed and activated
• Variable products with attributes set up

Step 1 : Configure Global Settings

1. Navigate to WooCommerce > Variation Buttons > General tab
2. Check “Enable variation buttons globally for all variable products”
3. Select your color attribute from the dropdown (e.g., “Color”, “Colour”, “Shade”)
4. Assign colors to each attribute value using the color pickers
5. Set selected colors for each attribute value (optional)
6. Choose your button size (Small, Medium, or Large)

Step 2 : Enable Variation Buttons on Shop Pages

1. Navigate to WooCommerce > Variation Buttons > Shop tab
2. Check the box next to “Enable variation buttons on shop and archive pages”
3. Select where the buttons should appear:

• Before Price
• After Price (default)
• Before Add to Cart
• After Add to Cart

4. Select the button size for shop pages:

• Extra Small (30px)
• Small (40px)
• Medium (50px, default)
• Large (60px)

Step 3 : Enable Add to Cart from Shop Pages

1. In the Shop tab settings, check the box next to “Enable Add to Cart”

• The full label reads: “Enable customers to add products to cart from shop/archive pages”

2. Save your settings

How It Works

Once enabled, customers can:

• See variation buttons for each product on the shop page
• Click buttons to select attributes (e.g., Color: Red, Size: Large)
• Once all required attributes are selected, the add to cart button appears
• Click add to cart to add the product with selected variations directly to the cart
• The cart updates via AJAX without requiring a page refresh

Optional Customization

The Variation Buttons Pro plugin offers additional customization options for shop pages:

• Use Variation Image: Display variation images as buttons instead of text or color
• Use Product Image as Fallback: Use the main product image when a variation has no image
• Variation Image Size: Select the image size (Thumbnail, Medium, Large, Full Size)
• Hide Variation Names: Hide the text on buttons
• Hover Color Type: Override global hover settings for shop pages
• Selected Color: Set a specific color for selected buttons

Note : On shop/archive pages, attribute labels are automatically hidden and buttons are centered for a cleaner appearance.

Testing

After configuring your settings:

1. Visit your shop page
2. Look for variable products – you should see variation buttons instead of dropdowns
3. Click different variation buttons to see the hover and selected states
4. If “Enable Add to Cart” is enabled:

• Select all required attributes for a product
• Verify the add to cart button appears
• Click it and confirm the product is added to your cart
• Check that the cart updates without a page refresh

Troubleshooting

If variation buttons don’t appear on shop pages:

• Verify “Enable on Shop Page” is checked in the Shop tab
• Ensure the product is a variable product with attributes set up
• Check that variation buttons are enabled globally or for that specific product
• Clear any caching plugins

If add to cart doesn’t work :

• Verify “Enable Add to Cart” is checked in the Shop tab
• Ensure all required attributes are selected
• Check browser console for JavaScript errors
• Verify WooCommerce is up to date

If colors don’t display correctly :

• Check that you’ve selected the correct color attribute in global settings
• Verify colors are assigned to attribute values
• Check if product-level settings are overriding global settings