Posted by April Sadowski and filed under WooCommerce, Wordpress

So you have a product on your WooCommerce-based site and it’s going to need to allow the customer to choose sizes. Then you have options that affect the price? How do you do that?

First off, you want to select “Variable Product” from the “Product Data” dropdown. Simple product is the default output.

WooCommerce Variable Product Header

From there, you need to go to the attributes menu. This allows you to have both global attributes than be applied to a product (set in the Products > Attributes menu on the left admin sidebar if you want to set globals) or on a per-product basis. You can see I’ve added one for pant pattern. If you want to give the customer the option of selecting it and it appearing as part of their selection in their order, make sure “Used for variations” is checked.

WooCommerce Variation

Once checked, make sure you click the “Save attributes” button. Then you can go to the Variations tab.

WooCommerce Variations Example

You can see now that I’ve added variations. This is done by choosing an option (see highlighted area in red), in this case the pant pattern. I did this because the pants affect the price. If they didn’t I could have had it set to “Any Pant Type…” You just need to make sure you have at least one (even if it is “Any” across the board). You can bulk edit the fields available with the “Choose a field to bulk edit…” dropdown. You will need at least one variation to set the Price and shipping (even if it doesn’t matter what variations the customer chooses).

On the front-end, you will see that no “Add to cart” appears without selecting attributes and the variation.

WooCommerce Variation No Selection

When you make your value selection, the price and “Add to cart” buttons appear.

WooCommerce first selection

When the attribute for pant type is changed the price adjusts accordingly as well.

WooCommerce first selection

About April Sadowski

Part designer and part developer, April has been working full-time for over a decade. She has a long line of ADDY Awards and published design and is the go-to person for HTML/CSS/LESS needs and front-end development. On her off-hours she can be found writing novels (she's published several), doing voice acting or audio production, or gaming. Find April at Stack Overflow

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>