Join Patrick Rauland for an in-depth discussion in this video Product variations, part of WordPress Ecommerce: WooCommerce.
- [Instructor] Up until this point, we've only covered simple products, which are products that don't have any options, but if you have a product that comes in different colors, sizes, or styles, you may want to create one product page and let users pick the option that best suits them. Let's create a new product for some H+ Sports apparel. I'll go over here to New and then click Product. We have a new product called Dance Pants. We'll add a title and a description, and then we'll scroll down to the Product Data tab where it says Simple product.
Let's go ahead and click this and then click Variable product. Notice now there's a new tab called Variations. If we click this, we'll see that we first have to create attributes to be able to use these variations. Let's go to Attributes, and then under Custom product attribute, we'll click Add. Let's add a name for this attribute. Since we have clothing with different colors, we'll just call it Color. Then for each color we'll have to add it in this box as a value.
So we have Black, we have Navy Blue, and we have Evergreen. Separate each value by the pipe character, and you'll definitely want to check Used for variations. If you leave this unchecked, it just lists the product attributes on the product page and doesn't give the user an option to select one. Let's go ahead and save attributes to see what a product with one option looks like. Let's go to Variations, and click Add Variation. You'll now see a drop-down with Any Color.
If we open that up, we can see all of the product data that we can fill out. You can add stock settings, shipping settings, tax settings, images, prices, et cetera. For right now, let's just add a price and see what this looks like on the front end. I'll add a price of $20. I'll click Publish, and let's take a look at what this looks like. Everything looks the same, except now I have a drop-down right next to Color. The user can select any of these three options, and then they can add the product to their cart.
This is the simplest type of variable product, where all of the options have the same settings and the same price. Let's add a bit of customization. Sometimes, different sizes or colors cost more to make. Let's go back to the admin and show you how to do that. We'll click Edit Product. I'll go back to the Edit Product page, scroll down, and Add a new variation. This time, instead of Any Color, I only want it to apply to the Black variation. Then open this up and set a higher price.
$21 instead of 20. Let's click Save changes. Publish again, and then click View Product. Notice that WooCommerce displays a price range instead of a single number. If you select Evergreen or Navy Blue, we'll see the lower price, and if you select Black, we'll see the higher price. If you don't see the price change here, it's probably because WooCommerce didn't properly save the variation. You can go back to Edit Product to your Variations, drag these around, click Save changes, click Update, and you should be good to go.
Now we haven't set an image yet. Let's set an image for the group of products and then an image for each individual color. I'll go back to Edit Product, and I'll scroll down to Variations. I'll open up the Black one. I'll click Upload an Image, and I'll select one of the images from the Media Library that I uploaded earlier. I'll click Set Variation Image, and it's set right there. I'll close this and now I'll add a separate image for each color. I'll change Any Color to Navy Blue, and I'll set the Navy Blue image, and I'll add one more variation, and drag it down, and set that to Evergreen, and I'll set that to the green image, and I will not forget, add the price.
I'll click Save changes, and then Update. If I go to the front end here, and scroll down, as I choose a different option, different images and prices will appear. There's one more thing I'd like to do before we make this variable product a little bit more complex. I'd like to set a default image, so that way when someone comes to the page without having set anything, they see something right here. I'll go back to Edit Product, and under Product Image, I will add one. Just to show you that a different image is appearing, I'm going to use the gray image, but you could use any image you want.
We've done an awesome job, but this is a one-dimensional variable product. With clothing, there's usually a size selector. Let's add that in. This time, I'm going to show you how to create global attributes that can be reused between products. It's very useful for standard attributes like size. I'll go back to the admin, and under Products, Attributes, I'll add a new Size. You can leave all of these set to the defaults, click Add Attribute, and you'll see it over here on the right.
If you click this little gear icon that says Configure Terms, you can add specific sizes. I'll add Small, Medium, Large, and Extra Large. Now let's go back to our product. If I scroll down, under Attributes I can now select Size, and click Add. You can select all the terms, or move any that don't apply to this particular product. I'll add all of them, and then I'll click Used for variations so that people can select them on the front end.
Click Save attributes, and then click Variations. Now you'll see existing color options next to any size. Let's update our product just to make sure everything is saved correctly. Now a user can select both a Color and a Size, and then they can add the product to their cart. That's probably as far as I want to go with my products, but if you want, you can take this a step further and have a different image or price for each variation. Sometimes for example, you might want to charge a little bit extra for the Extra Large sizes, so let's add a variation, set it to Black, Extra Large, and then we could set this to even more than the standard Black variation.
If I save this, if a user selected bothBlack and Extra Large, they'd now pay $22 instead of $21, but for my store, I won't be needing this. I'll click Update products just to make sure we're all set, and that is how you add variable products.
- Why WooCommerce?
- Installing WooCommerce
- Setting up your store
- Adding products, including images and data
- Creating a subscription product
- Setting up shipping
- Configuring payment options
- Setting up taxes
- Customizing your theme
- Connecting Google Analytics and MailChimp
- Managing orders and reports