How to create default product attributes in WooCommerce?

Today, we’ll show you how to create default product attributes in WooCommerce with a plugin, manually from the WooCommerce dashboard, and programmatically via PHP. This is usually overlooked but it can have a huge impact on your variable products’ conversion rates.

Why create default product attributes?

One of the first things we learned when we started our online store was the importance of creating default product attributes. In the beginning, our conversion rates weren’t very good and a lot of our users would tell us that the Add to Cart button was disabled. However, every time we checked everything was working well. The worst part is that we were losing a lot of sales because many of those shoppers would never come back to our store. Why would they if they couldn’t buy, right?

It took us some time to realize that the problem was that we hadn’t set default product attributes in WooCommerce.

Product Variations and Default Attributes

When you create product variations in WooCommerce, you should create the default combination of those attributes. Otherwise, the add to cart button on your product page will appear as disabled until the users select the combination of attributes they want. The problem is that many of them simply see that the button is blocked, think that the page doesn’t work, and leave.

That’s why if you have variable products in your WooCommerce store, creating default product attributes is a must.

WooCommerce default product attributes - Add to cart button disabled
Color and size don’t have default values so the Add to Cart button is disabled

How to create default product attributes in WooCommerce?

There are three ways to create default product attributes in WooCommerce:

  1. With a plugin
  2. Manually via WooCommerce admin
  3. Programmatically via PHP

If you’re not a developer, the easiest way is to use a plugin. With the PHP script, on the other hand, you can do the same thing with a bit of coding without installing anything. It’s important to note that you can get the same result with both methods so choose the best one for you depending on your skills.

1) Plugin

The easiest way is to use a plugin to set default product attributes. For this guide, we’ll use Direct Checkout for WooCommerce. It’s a freemium plugin that has a free version with basic features and 3 premium plans. This tool has more than 30,000 active installations and it’s one of the best in the market.

1. The first thing you have to do is install and activate the plugin. So, go to your WordPress dashboard > Plugins > Add New. Then, search for Direct Checkout for WordPress, click Install Now, and when the installation process finishes, click Activate. Alternatively, you can check out this page and choose either the free version or one of the premium plans.

2. Then, go to the WooCommerce section on the sidebar, and click the Direct Checkout option.

3. Go to the Products section and enable the last option Add default attributes in variable products. Remember to save the changes.

That’s it! You’ve created default product attributes with Direct Checkout for WooCommerce! Now, the first attribute of each product will be selected by default and this will be applied to all your variable products.

2) Manually via WooCommerce admin

You can also create default product attributes manually via the WooCommerce dashboard. This method is quick and easy but can be time-consuming if you have many products. If that’s your case, we recommend you use the Direct Checkout plugin or the PHP script described in section 3.

    1. To set default attributes manually, first, in the WooCommerce dashboard go to Products and then click on your variable product.
    2. Then, select Variable product from the Product data dropdown.
    3. After that, under Variations, you have to select the Default Form Values. Those are the attributes that will be selected by default for that product.

That’s it! You’ve created default product attributes manually!

Now when a shopper visits the variable product page, it will show the attributes you selected by default and the Add to Cart button will be enabled.

Color and size with default values so the Add to Cart button is enabled

Keep in mind that you have to set the default attributes for each variable product that you have. That’s why if you have many products, we recommend using the Direct Checkout plugin or the PHP script that we’ll describe below.

3) Programmatically via PHP

If you don’t want to install any plugin on your site and you have some coding skills, you can create WooCommerce default product attributes programmatically with a bit of PHP.

TIP: Create a child theme

Before you start, we recommend you create a child theme. If you don’t have one, simply install any plugin that you like or code it yourself. For more information about how to create a child theme, check out our step-by-step guide.

This is important because if you change the parent theme’s files, the next time you update the theme, you will lose all your customizations. However, if you modify the child theme, your changes won’t be overridden by the theme’s new version.

Now that you’ve installed the child theme, let’s get into it.

PHP Script

To do this, you’ll need to modify the functions.php file. Simply go to wp-content/yourtheme/functions.php on your child theme.

Here, we’ll show you the full code and then we’ll explain its main parts. So the full PHP script to create default product attributes programmatically is the following:

add_action('woocommerce_before_single_product_summary', 'quadlayers_product_default_attributes');
function quadlayers_product_default_attributes() {
      global $product;
      if (!count($default_attributes = get_post_meta($product->get_id(), '_default_attributes'))) {
        $new_defaults = array();
        $product_attributes = $product->get_attributes();
        if (count($product_attributes)) {
          foreach ($product_attributes as $key => $attributes) {
            $values = explode(',', $product->get_attribute($key));
            if (isset($values[0]) && !isset($default_attributes[$key])) {
              $new_defaults[$key] = sanitize_key($values[0]);
            }
          }
          update_post_meta($product->get_id(), '_default_attributes', $new_defaults);
        }
      }
    }  

Now, let’s break it down.

The Hook

We use the hook woocommerce_before_single_product_summary. This action hook will run before the page loads so it allows you to add some logic before the user sees it.

add_action('woocommerce_before_single_product_summary', 'quadlayers_update_product_default_attributes');

Check Default Attributes

Then, we check if the meta_default_attributes exist so as not to run the script twice.

 if (!count($default_attributes = get_post_meta($product->get_id(), '_default_attributes'))) {
      $new_defaults = array();

Attributes

After that, we get the whole array of attributes

   $product_attributes = $product->get_attributes();
        if (count($product_attributes)) {

And then we iterate over that array of attributes.

          foreach ($product_attributes as $key => $attributes) {
            $values = explode(',', $product->get_attribute($key));

We get the first value of each attribute.

            if (isset($values[0]) && !isset($default_attributes[$key])) {

If the attribute doesn’t have a value, then the script will add the first value of the available options in $new_defaults.

              $new_defaults[$key] = sanitize_key($values[0]);
            }
          }

Then, it saves $new_defaults in the meta_default_attributes. This will be checked so as not to run the script twice.

          update_post_meta($product->get_id(), '_default_attributes', $new_defaults);
        }
      }
    }  

Conclusion

All in all, not setting default attributes for variable products can affect your conversion rates and make you lose many sales. The Add to Cart button will appear as disabled so users may think that they can’t buy and leave.

The good news is that adding the default attributes is an easy task. If you don’t have coding skills, you can use Direct Checkout for WooCommerce and add the default product attributes with a couple of clicks. Additionally, if you don’t have many products, you can do it manually via the WooCommerce dashboard. On the other hand, if you prefer to do it programmatically, you can set the default attributes with a bit of coding.

If you want more information about how to improve your WooCommerce site programmatically, you can have a look at our guides about how to add to cart function and to implement AJAX add to cart on your site.

Which of these methods are you going to use? Let us know your thoughts in the comments section below!