I was building a custom “Add to cart” button for variable products on a WooCommerce store. The button sent the product to the cart in the background, without reloading the page, so it felt fast. Simple products worked perfectly. But on variable products, every click returned the same error:

“Please choose product options by visiting [product name].”

The strange part? I had chosen the options. The colour and size were both selected. Here is what was really going on, and how I fixed it.

What the error means

A variable product in WooCommerce is a parent product (for example, “Hoodie”) with child products called variations (for example, “Hoodie – Black – Large”). Each variation has its own ID, price and stock.

You can’t add the parent “Hoodie” to the cart. You can only add a specific variation. When WooCommerce receives the parent without knowing which variation you want, it stops and shows “Please choose product options.”

So the error doesn’t really mean “you didn’t pick a colour.” It means WooCommerce never received the variation it needed.

My first mistake: sending the parent ID

My script posted to WooCommerce’s AJAX endpoint, /?wc-ajax=add_to_cart, with two values:

• product_id = the parent product ID
• variation_id = the selected variation ID

That looked correct to me. But when I read how this endpoint works in WooCommerce’s code, I found the real cause: it ignores variation_id completely.

Instead, it only looks at product_id. If that ID belongs to a variation, WooCommerce works out the parent by itself and adds the right item. If it belongs to the parent, WooCommerce has no idea which variation you meant, and you get the error.

The fix

For variable products, send the variation ID as product_id:

const form = document.querySelector('form.variations_form');
const variationId = form.querySelector('input.variation_id').value;
const qty = form.querySelector('input.qty').value || 1;

// Stop if no variation has been selected yet
if (!variationId || variationId === '0') {
  return;
}

const data = new FormData();
data.append('product_id', variationId); // the variation, not the parent
data.append('quantity', qty);

fetch('/?wc-ajax=add_to_cart', { method: 'POST', body: data });

After this one change, variable products went into the cart just like simple ones.

Other things that cause this error

While fixing my store, I found a few more ways to trigger the same message. If the fix above doesn’t solve it for you, check these:

1. A button outside the form. Sticky “Add to cart” bars or extra “Buy now” buttons sometimes sit outside the product form. When clicked, they submit the form without the hidden variation_id field, so WooCommerce receives an empty variation.
2. Hiding the dropdowns with display: none. Custom colour swatches often replace WooCommerce’s dropdowns. If you hide the real dropdowns completely, WooCommerce’s own script may not update the variation properly. Hide them visually instead, and keep them in the page.
3. Forcing the button to be clickable. WooCommerce disables the button until a valid variation is chosen. Removing that disabled state with custom code lets people click too early.
4. A missing “Used for variations” setting. If an attribute like Size isn’t ticked as “Used for variations” in the product settings, WooCommerce won’t show it as an option at all.

An old notice can make it look unfixed

One last trap: WooCommerce stores error notices in the session. Even after my fix worked, an old “Please choose product options” message sometimes showed up on the next page load, which made me think the bug was still there. Clearing the cart or opening a private window is a quick way to test with a clean session.

Key takeaways

• The error means WooCommerce didn’t receive a variation, not that the shopper did something wrong.
• The wc-ajax=add_to_cart endpoint expects the variation ID in product_id for variable products.
• Keep every add-to-cart button inside the product form, and don’t fully remove WooCommerce’s own dropdowns.
• Test in a fresh session so old notices don’t fool you.

Stuck on a WooCommerce bug like this? Get in touch, I’m happy to take a look.