How to create variable product in Woocommerce

How to create variable product in Woocommerce

What is Variable Product?

When your product has multiple options and prices respectively.  That moment the variable product idea comes up. Generally, we use a simple or external product in Woocommerce.  Suppose, when your T-shirt has different colors and sizes.   Also, when it costs different prices. That’s why Woocommece plugin has a variable product idea. Using this option, you can easily create variable product in woocommerce.

Let’s see how to do it easily.

How to create variable product in Woocommerce

First, as usual, go to “Add product” from your WordPress Admin Dashboard.

Select “Variable Product” from the top drop-down.

Woocommerce variable products


Go to “Attributes” section and click “Add” button to add attributes for the product.

Product Attributes


Now, add attribute values like the following screenshot.

adding woo attributes


You can add other attributes like Size, clothes type etc in the same way.


Now it’s time to add variations in the product.

Go to Variations section and click the “Go” button to add variation in Woocommerce.

woocommerce variation


Now, add variation values like price, stock, weight shipping info etc.

Just in case you need to add some extra stock options in WooCommerce. You can learn here about this. 

For an example, a T-shirt has 3 different colors. Red, Green, and Black. Suppose, Red costs 19, Green is 20 and Black for 17.

Select color from the variation dropdown. Then place price. Do the same for the others too.

You are done.

Woocommerce Variation


See the Product live. You will see a price range. Once you select a color, you will see a different price set.

This is the Woocommerce variable product concept.

how to set up woocommerce store

Learn how to set up Woocommerce Store in less than 10 Minutes

how to set up woocommerce store

Image: Woocommerce


WooCommerce is a big thing not in WordPress, but in the online world. You can make a store with ease. Let’s say an online store within 30 minutes.

The things you need [must-need]

  1. Woocommerce compatible themes
  2. Install WooCommerce plugins
  3. Your products
  4. Payment gateway

Most important thing is Woocommerce compatible themes. In case, your theme is not supporting woocommerce. Then the site looks will be very awkward.  Read here to learn how to make a theme that supports woocommerce.

Here are few steps to make your first awesome online store that sells flawlessly.

Install WooCommerce Plugin:

The first task is to install the WooCommerce plugin. Install it directly from WordPress Plugins repo or from your computer.

Now, activate it.

Configure WooCommerce Store:

Right after the activation, you will be automatically redirected to a setup page.  It’s called Woocommerce setup wizard.

WooCommerce Setup Wizard


Set it up giving all the information it wants. You will need to put the info about shop location, where to ship, payment gateway etc.  They are pretty easy to set it up. Make sure you are providing right information otherwise your sale can not be processed perfectly.

Create your first woocommerce product:

To add your first product, go to Dashboard > Products > Add products

Then follow the screenshot for the better concept.


how to add product in woocommerce

In price box, you can set up SALE price for a product.

You can control the inventory in inventory tabs.

Also, you can add products size, shipping class or methods in shipping tabs.

If the product is a virtual product like freelancing or a downloadable product like software, you can select those select box above.

In product data dropdown option, you can select other product types. Variable product for various product option, color, size etc., external products for affiliate links. Also, you can add grouped product.

Well, after giving all the info, now publish your first product.


Now it’s time to test the product. See how it works.

Go to the product link, click on the “add to cart” button for the shopping.

Now go to the checkout page to buy.

These procedures are for the test. Just to make sure the store is working or not.

Caution: if you set up Paypal for the payment gateway, make sure you are using in Sandbox mode while testing. 

ajaxify woocommerce cart

How to Ajaxify Woocommerce Cart for Automatic Cart Update

Generally, when you create Woocommerce supported themes from the scratch, you need to show a cart in the top header. Mostly a tiny piece of code is used to show the cart. But not sufficient when you want to update cart item and price automatically when a product added or removed. That is why you need to Ajaxify cart.

How to Ajaxify Woocommerce Cart

Generally, this code will show a cart in themes. Although it doesn’t update automatically cart item and price.

<a class="cart-customlocation" href="<?php echo wc_get_cart_url(); ?>" title="<?php _e( 'View your shopping cart' ); ?>"><?php echo sprintf ( _n( '%d item', '%d items', WC()->cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?> - <?php echo WC()->cart->get_cart_total(); ?></a>

Rather, to update price and product automatically, add this code in functions.php, then it will update cart when a product added or removed.

// Ensure cart contents update when products are added to the cart via AJAX (place the following in functions.php).
// Used in conjunction with
// Compatible with WooCommerce 3.0+. Thanks to Alex for assisting with an update!
function woocommerce_header_add_to_cart_fragment( $fragments ) {
	global $woocommerce;


	<a class="cart-customlocation" href="<?php echo esc_url(wc_get_cart_url()); ?>" title="<?php _e('View your shopping cart', 'woothemes'); ?>"><?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->cart_contents_count, 'woothemes'), $woocommerce->cart->cart_contents_count);?> - <?php echo $woocommerce->cart->get_cart_total(); ?></a>
	$fragments['a.cart-customlocation'] = ob_get_clean();
	return $fragments;

Code Explanation

First, you need to add a custom function using add_filter to current Woocommerce function “add_to_cart_fragments”.

Second, use ajax so that the script will not send a request to another page. According to PHP manual “The ob_start() function will turn output buffering on. While output buffering is active no output is sent from the script (other than headers), instead the output is stored in an internal buffer.”

The $fragments parameter gets the ob_get_clean() to obtain current buffer contents and deletes the output buffer.

Make themes woocommerce compatible

How to make themes woocommerce compatible?

Want to make themes woocommerce compatible? When you build WordPress themes from the scratch, generally WooCommerce support is not integrated. To integrate the Woocommerce function, you need to make some tweaks in your themes files. First, duplicate your page.php in themes. Rename it to woocommerce.php . Then open and remove the WordPress post/page loop by woocommerce loop. Probably your page.php codes are like…

 while ( have_posts() ) : the_post(); ?>
 <h2><?php the_title(); ?> </h2> <?php

 endwhile; // End of the loop.

should be replaced by

<?php woocommerce_content(); ?>

If you see this technique is not working, then open Woocommerce plugins file, copy “templates” folder to your themes. Rename it to “woocommerce”.  Now your need to add CSS class manually to woocommerce defaults files. Just for an example, to compatible single products, open the folder single-products, now add your CSS class to  meta.php , price.php and others to make it as you wish.

It’d be better if you create woocommerce theme from scratch. Just make a blueprint before starting. Otherwise, this post may help you. If you need further help or want to make Woocommerce website, just contact here.