How to Customize WooCommerce Product Variations

As an online store owner, offering diverse product options is essential to cater to different customer preferences and maximize sales. Product variations allow you to provide multiple options for a single product, such as different colors, sizes, or materials.

Although WooCommerce offers adding product variations by default but to stand out in the competitive world of eCommerce truly, you need to go beyond the basics and customize your WooCommerce product variations for a more personalized and engaging shopping experience.

In this blog post, we will explore how to customize WooCommerce product variations programmatically and also through plugins, empowering you to create an attractive, user-friendly, and efficient online store.

So let’s begin.

From Launching to Customizing Your Woocommerce Stores, Cloudways Is at Your Service

Whether you’re a beginner or an expert, Cloudways Platform is based on UI, where you can create and customize your online store in a few seconds.

Try 3 Days Free!

What Is Product Variation

A product variation is a specific version of a product that has different attributes or options, such as size, color, material, or other features. Variations allow customers to choose the exact configuration of a product they want to purchase, based on their preferences or requirements.

Why Should You Customize WooCommerce Product Variations

Customizing WooCommerce product variations can significantly improve the shopping experience for your customers and potentially increase sales.

Here are some key benefits of customizing product variations in your WooCommerce store:

• Allows you to create a more visually appealing and user-friendly interface.
• It can help you cater to individual customers’ unique preferences and requirements.
• Lets you efficiently manage your inventory by combining similar products into a single listing with multiple options.
• Enables the better organization of products on your website.
• It can help you upsell and cross-sell related products by highlighting complementary items or more premium versions of the same product.
• It can improve your search engine optimization (SEO).
• It simplifies the product management process, making it easier to add, edit, and remove product options as needed.
• Allows you to adapt to changing market trends, customer preferences, and new product releases, ensuring your store remains competitive and relevant.

Ready to take your WooCommerce product variations to the next level?

Experience unparalleled performance, security, and customization options with Cloudways WooCommerce Hosting.

Try 3 Days Free!

How to Create Woocommerce Variable Products With Attributes Through Coding

In this heading, I’ve shared a code snippet defining variable product ID through a custom function that actually adds or creates a product variation. Note that the parent product for the variable product is required for setting the attributes, such as the array of attribute/value, SKU, prices, and stock.

If you take a look at the code snippet, you can see that the data is stored in a formatted multidimensional array. The function I’ve created checks if the values of the attribute already exist. If not, it creates an entry for a product attribute and then sets it in the parent variable product.

function create_product_variation( $product_id, $variation_data ){

$product = wc_get_product($product_id);

$variation_post = array(

        'post_title'  => $product->get_title(),

        'post_name'   => 'product-'.$product_id.'-variation',

  'post_status' => 'publish',

  'post_parent' => $product_id,

        'post_type'   => 'product_variation',

  'guid'    => $product->get_permalink()

);

$variation_id = wp_insert_post( $variation_post );

$variation = new WC_Product_Variation( $variation_id );

foreach ($variation_data['attributes'] as $attribute => $term_name )

{

  $taxonomy = 'pa_'.$attribute; 

  if( ! taxonomy_exists( $taxonomy ) ){

            register_taxonomy(

                $taxonomy,

                'product_variation',

                array(

                    'hierarchical' => false,

                    'label' => ucfirst( $attribute ),

                    'query_var' => true,

                    'rewrite' => array( 'slug' => sanitize_title($attribute) ), 

          )

      );

  }

  if( ! term_exists( $term_name, $taxonomy ) )

            wp_insert_term( $term_name, $taxonomy ); 

  $term_slug = get_term_by('name', $term_name, $taxonomy )->slug; 

        $post_term_names =  wp_get_post_terms( $product_id, $taxonomy, array('fields' => 'names') );

  if( ! in_array( $term_name, $post_term_names ) )

            wp_set_post_terms( $product_id, $term_name, $taxonomy, true );

        update_post_meta( $variation_id, 'attribute_'.$taxonomy, $term_slug );

}

if( ! empty( $variation_data['sku'] ) )

        $variation->set_sku( $variation_data['sku'] );

if( empty( $variation_data['sale_price'] ) ){

        $variation->set_price( $variation_data['regular_price'] );

} else {

        $variation->set_price( $variation_data['sale_price'] );

        $variation->set_sale_price( $variation_data['sale_price'] );

}

    $variation->set_regular_price( $variation_data['regular_price'] );

if( ! empty($variation_data['stock_qty']) ){

        $variation->set_stock_quantity( $variation_data['stock_qty'] );

        $variation->set_manage_stock(true);

        $variation->set_stock_status('');

} else {

        $variation->set_manage_stock(false);

}

    $variation->set_weight(''); 

    $variation->save(); 

}

The create_product_variation() function creates a new product variation for a WooCommerce product. This function allows you to programmatically create product variations for your WooCommerce store, which can be helpful when managing a large number of products or when you need to automate the creation process.

WooCommerce Variable Products and Their Outputs

WooCommerce variable products let you create a single listing with multiple variations, such as colors, sizes, or materials. Each variation has unique attributes, stock levels, and pricing options, providing a personalized shopping experience for customers.

To work with variable products in WooCommerce programmatically, use these key code snippets and functions added to the functions.php file:

• wc_get_product($product_id): This function retrieves the product object for a given product ID. It’s used to access the product’s data, such as its attributes, prices, and stock levels.
• wp_insert_post( $variation_post ): This WordPress function is used to create a new post or update an existing one. In the context of WooCommerce, it can be used to create a new product variation.
• WC_Product_Variation( $variation_id ): This function creates an instance of the WC_Product_Variation class, which represents a specific product variation. You can use this object to get or set properties of a product variation, such as its attributes, prices, and stock levels.
• register_taxonomy: This WordPress function is used to create a new taxonomy, which is a way of organizing and categorizing content on your website. In WooCommerce, product attributes are stored as custom taxonomies.
• wp_insert_term: This WordPress function is used to create a new term within a taxonomy. In WooCommerce, product attribute values are stored as terms. This function is used in the IF condition to check if the term name exists and, if not, create it.
• $post_term_names: This variable stores an array of term names associated with the parent variable product. It’s used to check if a specific term is already set for the product.
• wp_set_post_terms: This WordPress function is used to set or update the terms associated with a post. In WooCommerce, it can be used to associate attribute values (terms) with a product or product variation.
• update_post_meta: This WordPress function is used to update the metadata associated with a post. In WooCommerce, it’s used to save the attribute data for a product variation.
• $variation->set_sku: This method of the WC_Product_Variation class is used to set the SKU (Stock Keeping Unit) for a product variation. The SKU is a unique identifier for each product variation, which helps with inventory management.
• $variation_data[‘sale_price’]: This array key contains the sale price value for a product variation. It can be used to set or update the sale price of a specific product variation.
• $variation_data[‘stock_qty’]: This array key contains the stock quantity value for a product variation. It can be used to set or update the stock level of a specific product variation.

How to Create Woocommerce Variable Products With Attributes Using Plugin

In WooCommerce, you can customize product variations using plugins that provide additional options and functionalities.

There are several plugins available to help you customize product variations in WooCommerce. Some popular choices include:

• Variation Swatches for WooCommerce
• WooCommerce Additional Variation Images
• YITH WooCommerce Color and Label Variations

For the purpose of this blog, we will be using Variation Swatches for the WooCommerce plugin.

Here’s a step-by-step guide on how to create WooCommerce variable products with attributes using the Variation Swatches for WooCommerce plugin:

Step 1: Install and Activate the Plugin

• Go to your WordPress dashboard
• Navigate to ‘Plugins’ > ‘Add New’
• Search for ‘Variation Swatches for WooCommerce’

• Click ‘Install Now’, and then activate the plugin

Step 2: Configure the Plugin Settings

• Go to ‘Settings’

• Configure the settings according to your needs. For example, you can adjust the swatch style, size, and shape

Step 3: Create or Edit a Variable Product

• Go to ‘Products’ > ‘Add New’ to create a new product or click ‘Edit’ below an existing product
• In the ‘Product data’ section, choose ‘Variable product’ from the dropdown menu

Step 4: Add Attributes

• In the ‘Attributes’ tab, add the attributes you want to use for variations (e.g., color, size)
• Click ‘Add,’ fill in the attribute details, and check the ‘Used for variations’ box

• Click Save attributes

Step 5: Generate Variations

• Go to the ‘Variations’ tab, and click ‘Create variations from all attributes’ to automatically generate all possible variations

• Configure each variation’s details, including price, stock, and image

Step 6: Save your Changes

• After configuring your product variations, click ‘Update’ or ‘Publish’ to save your changes

• Now you can see the variations you just created.

Recommended Plugins for Customizing Product Variations

There are several plugins available that can help you customize product variations on your eCommerce website. Here’s a list of recommended plugins, mainly for WordPress and WooCommerce:

• Variation Swatches for WooCommerce
• YITH WooCommerce Color and Label Variations
• WPB Product Slider for WooCommerce
• Improved Variable Product Attributes for WooCommerce
• WooCommerce Product Variations Matrix

Best Practices for Customizing WooCommerce Product Variations

Customizing WooCommerce product variations can significantly improve the user experience and increase sales on your online store. To get the most out of customizing product variations, follow these best practices:

• Carefully plan and structure your product attributes and variations to ensure that they are organized and easy to understand.
• Include high-quality, clear images for each product variation, showcasing the product from different angles and highlighting its unique features.
• Ensure that your product images are optimized for web use.
• Use consistent naming conventions for your product variations, ensuring that similar attributes and options are named similarly across all products.
• Configure the pricing and stock levels for each product variation accurately, ensuring that prices are competitive and stock levels are up to date.
• Regularly test and review your product variations and customization options, making sure they work correctly and are easy to use.
• Use WooCommerce plugins and extensions to enhance product variation functionality when needed.

Troubleshooting Common Issues With Product Variations

WooCommerce product variations can sometimes encounter issues that may affect your online store’s functionality or user experience. Here are some common issues with WooCommerce product variations and their respective solutions:

Problem#1: Variations Not Showing or Appearing Correctly

Sometimes you set the variations, but they don’t appear correctly. Reasons for this can vary, but you might consider doing the following to fix it:

Solution:

• Ensure that you have set up product attributes and variations correctly. Attributes should be added in the “Attributes” tab, and then variations should be created in the “Variations” tab under each product.

• Check if there are any theme or plugin conflicts by deactivating other plugins one by one and switching to a default WordPress theme temporarily. If the issue is resolved, identify the conflicting plugin or theme and find a suitable alternative.

Problem#2: Ajax Add-To-Cart Not Working for Variable Products

Sometimes the add-to-cart doesn’t work for variable products.

Solution:

You might fix it by doing the following:

• Ensure that your theme is compatible with WooCommerce and supports AJAX add-to-cart functionality for variable products. Or add the AJAX add-to-cart plugin.

• Check for plugin conflicts that may be causing the issue.

Problem#3: Changes to Variations Not Saving

Sometimes you are not able to save the new variations.

Solution:

Here’s how you might fix it:

• Make sure your web hosting environment meets WooCommerce’s minimum requirements, including the PHP version and memory limit. I recommend using Cloudways because it uses the latest PHP version and is scalable.
• Increase the server’s max_input_vars value in your php.ini file, as low values may cause issues when saving a large number of variations.

Problem#4: Performance Issues With a Large Number of Variations

Sometimes you face performance issues after setting the variation for your products.

Solution:

Here’s how you might improve the performance of your store;

• Use a caching plugin, such as WP Rocket or W3 Total Cache, to improve your site’s performance.
• Optimize your database regularly to keep it clean and efficient.
• Consider using a plugin that specializes in handling large numbers of variations, such as WooCommerce Product Variations Matrix or Variation Swatches for WooCommerce.

Summary

In conclusion, creating customize WooCommerce product variations can be a powerful way for developers to enhance their client’s e-commerce websites.

This blog post has provided a code snippet example for creating product variations, as well as explored the option of using plugins to add custom fields for product variations.

By leveraging the flexibility of variable products, developers can create more engaging and customizable shopping experiences for their clients.

As always, remember to place your code in the appropriate file, such as functions.php, and continue to experiment with the many possibilities available through WooCommerce.