How to Make Attributes Selectable Options in WooCommerce: A Beginner’s Guide
So, you’re selling products with variations – like t-shirts in different sizes and colors, or mugs with different designs. Great! That’s where WooCommerce attributes come in. But you might be facing a frustrating problem: your attributes aren’t showing up as selectable options on your product page. Instead, they are just displayed as text, or worse, they aren’t showing up at all!
Don’t worry; you’re not alone. This is a common issue for WooCommerce beginners. This guide will walk you through the steps to make your attributes selectable and beautiful so your customers can easily choose their perfect product.
What are Attributes and Why Do We Need Them?
Think of attributes as characteristics or features that define your products. For example:
* For a T-shirt: Size, Color, Material
* For a Mug: Design, Capacity, Material
* For a Laptop: Processor, RAM, Storage
Attributes help you organize your products, filter them, and, most importantly, create variations. Let’s say you’re selling a “Personalized Coffee Mug.” The “Design” attribute would be key. Your customer needs to select *which* design they want! That selection process uses selectable options. Without it, you can’t effectively sell variations.
Step 1: Defining Global Attributes (If Necessary)
WooCommerce allows you to create attributes globally. This is useful if you’ll use the same attributes across multiple products (like “Size” for clothing). Otherwise, you can create product-specific attributes directly on the product edit screen.
Here’s how to define a global attribute:
1. Go to Products > Attributes in your WordPress admin.
2. Enter a Name for your attribute (e.g., “Size,” “Color,” “Design”).
3. Enter a Slug (usually a lowercase, URL-friendly version of the name; WooCommerce often automatically generates this).
4. Enable Archives? This determines whether an archive page is created for this attribute. This is useful if you want customers to be able to browse products based on the attribute. It is often disabled though as it can duplicate content and hurt your SEO.
5. Click Add attribute.
Now, you need to add terms (values) to your attribute (e.g., “Small,” “Medium,” “Large” for the “Size” attribute).
1. Click the Configure terms link under the newly created attribute.
2. Enter a Name for each term (e.g., “Small”).
3. Enter a Slug (same as before).
4. Click Add new [attribute name]. Repeat for all your terms.
Step 2: Adding Attributes to Your Product
Now, let’s add these attributes to your product.
1. Go to Products > All Products and edit the product you want to add attributes to.
2. Scroll down to the Product data meta box.
3. Select Variable product from the “Product type” dropdown. This is crucial. If you leave it as “Simple product,” you won’t see the “Attributes” or “Variations” tabs.
4. Click on the Attributes tab.
5. In the “Add attribute” dropdown, select either:
- Custom product attribute: If this attribute is unique to this product, you can create it on the fly.
- One of your previously created global attributes: If you created a global attribute (e.g., “Size,” “Color”), select it from the dropdown.
- Small – Red
- Small – Blue
- Medium – Red
- Medium – Blue
- Large – Red
- Large – Blue
- Add a price: This is required. Without a price, the variation won’t be available for purchase.
- Add a SKU: This is optional but recommended for inventory tracking.
- Manage stock: If you want to track inventory for this specific variation, enable this option.
- Add an image: Display a different image for each variation (e.g., a red t-shirt image for the “Red” color variation).
6. Click Add.
Now, you’ll see options for your chosen attribute:
* Value(s): Select the terms (values) that apply to this product. For global attributes, you’ll see a list of the terms you created. For custom attributes, you can enter the values directly, separated by the `|` (pipe) character (e.g., “Red | Green | Blue”).
* Visible on the product page: Check this box to display the attribute on the product page (e.g., in the “Additional Information” tab). While *important*, this does not create selectable options.
* Used for variations: THIS IS THE KEY! YOU MUST CHECK THIS BOX TO MAKE THE ATTRIBUTE SELECTABLE. This tells WooCommerce that this attribute will be used to create product variations.
7. Click Save attributes.
Step 3: Creating Variations
This is where the magic happens! After saving your attributes, go to the Variations tab.
1. In the “Add variation” dropdown, choose Create variations from all attributes.
2. Click Go.
WooCommerce will automatically generate variations based on all possible combinations of your attributes. For example, if you have “Size” (Small, Medium, Large) and “Color” (Red, Blue), it will create variations for:
3. WooCommerce will display a message confirming the variations were created. Click OK.
4. Now, you’ll see a list of your variations. Expand each variation to:
5. Click Save changes.
Step 4: Check your Product Page
Visit your product page! You should now see dropdown menus or select boxes for your attributes. Customers can now choose their desired options.
Troubleshooting: Common Problems and Solutions
* Attributes not showing up at all: Double-check that you’ve selected Variable product from the “Product type” dropdown in the “Product data” meta box. Also, ensure the “Visible on the product page” box is checked in the Attributes Tab.
* Attributes showing up as text, not selectable options: The “Used for variations” box is the main culprit here. Make absolutely sure that this box is checked for each attribute Read more about Woocommerce See How Long It Takes For Processing To Completed you want to be selectable.
* No variations created: Make sure you have added terms to your attributes and selected them for your product. Also, ensure you are using the “Create variations from all attributes” option correctly.
* Variations not purchasable: Ensure each variation has a price assigned to it. Without a price, the variation will be hidden.
* Dropdowns not appearing: Sometimes, conflicts with themes or plugins can prevent dropdowns from rendering correctly. Try temporarily switching to a default WooCommerce theme (like Storefront) and disabling plugins to see if that resolves the issue. Then, re-enable them one by one to identify the conflict.
Example: Selling Custom-Printed Mugs
Let’s say you’re selling custom-printed mugs. You might have these attributes:
* Design: (Global Attribute) Options: “Cat,” “Dog,” “Landscape,” “Your Custom Image”
* Capacity: (Global Attribute) Options: “11oz,” “15oz”
You would create these global attributes under Products > Attributes. Then, you’d add them to your “Custom Printed Mug” product. You *must* check “Used for variations” for *both* the Design and Capacity attributes. Finally, you would generate variations, adding pricing and maybe even display images for each design type.
// Example of displaying attribute values Explore this article on How To Create Android App For Woocommerce Website (not selectable options, but useful info!) // This goes in your theme's single-product.php or a Read more about How To Connect Woocommerce To Mailchimp custom template
global $product;
$attributes = $product->get_attributes();
if ( ! empty( $attributes ) ) {
echo ‘
- ‘;
- ‘ . wc_attribute_label( $name ) . ‘: ‘ . implode(‘, ‘,$values_list) . ‘
foreach ( $attributes as $attribute ) {
$name = $attribute->get_name();
$values = $attribute->get_options(); // Get attribute term IDs
$values_list = array();
foreach($values as $value_id) {
$term = get_term($value_id, $name);
if ($term) {
$values_list[] = $term->name;
}
}
echo ‘
‘;
}
echo ‘
‘;
}
This code shows how to retrieve and display the attribute values on your product page, outside of the selectable variations area.
By following these steps carefully, you’ll be able to create a seamless and enjoyable shopping experience for your customers. Good luck!
