Customizing WooCommerce Variation Dropdown: Display Stock Status and Quantity
As an e-commerce store owner or website developer, you know the importance of providing a seamless and informative shopping experience for your customers. One key aspect of this is the way product variations are presented in the WooCommerce variation dropdown.
By default, WooCommerce displays the attribute names (e.g., "Small", "Medium", "Large") in the variation dropdown, which can be limiting. Wouldn't it be more helpful for your customers if they could also see the stock status and quantity of each variation right there in the dropdown?
In this blog post, we'll explore a simple code snippet that you can add to your theme's functions.php
file to customize the WooCommerce variation dropdown and display the stock status and quantity for each attribute value. This enhancement can significantly improve the user experience and help your customers make more informed purchasing decisions.
Understanding the Code Snippet
Let's take a closer look at the code snippet you provided:
add_filter( 'woocommerce_variation_option_name', 'customizing_variations_terms_name', 10, 1 );
function customizing_variations_terms_name( $term_name ){
if(is_admin())
return $term_name;
global $product;
$second_loop_stoped = false;
// Get available product variations
$product_variations = $product->get_available_variations();
// Iterating through each available product variation
foreach($product_variations as $variation){
$variation_id = $variation['variation_id'];
$variation_obj = new WC_Product_Variation( $variation_id );
## WOOCOMMERCE RETRO COMPATIBILITY ##
if ( version_compare( WC_VERSION, '3.0', '<' ) ) # BEFORE Version 3 (older)
{
$stock_status = $variation_obj->stock_status;
$stock_qty = intval($variation_obj->stock);
// The attributes WC slug key and slug value for this variation
$attributes_arr = $variation_obj->get_variation_attributes();
}
else # For newest verions: 3.0+ (and Up)
{
$stock_status = $variation_obj->get_stock_status();
$stock_qty = $variation_obj->get_stock_quantity();
// The attributes taxonomy key and slug value for this variation
$attributes_arr = $variation_obj->get_attributes();
}
if(count($attributes_arr) != 1) // Works only for 1 attribute set in the product
return $term_name;
// Get the terms for this attribute
foreach( $attributes_arr as $attr_key => $term_slug){
// Get the attribute taxonomy
$term_key = str_replace('attribute_', '', $attr_key );
// get the corresponding term object
$term_obj = get_term_by( 'slug', $term_slug, $term_key );
if( $term_obj->name == $term_name ){ // If the term name matches we stop the loops
$second_loop_stoped = true;
break;
}
}
if($second_loop_stoped)
break;
}
if( $stock_qty>0 )
return $term_name .= ' - ' . $stock_status . ' ('.$stock_qty.')';
else
return $term_name .= ' - ' . $stock_status;
}
This code snippet uses a WordPress filter called woocommerce_variation_option_name
to modify the variation dropdown display.
Here's a breakdown of what the code does:
-
It checks if the current context is the WordPress admin area (is_admin()
). If it is, the function simply returns the original $term_name
without any modifications.
-
It retrieves the current $product
object and initializes a $second_loop_stoped
variable to keep track of the loop status.
-
It then gets all the available variations for the current product using $product->get_available_variations()
.
-
For each variation, it creates a WC_Product_Variation
object and retrieves the stock status and quantity, as well as the product attributes. This part includes a version check to ensure compatibility with different versions of WooCommerce.
-
The code then checks if there is only one attribute set for the product (as it is designed to work with single-attribute variations).
-
It iterates through the product attributes and checks if the current $term_name
matches any of the attribute terms. If a match is found, it stops the inner loop.
-
Finally, the function appends the stock status and quantity to the $term_name
and returns the modified value.
Benefits of Customizing the Variation Dropdown
Implementing this code snippet in your WooCommerce-powered website can provide several benefits:
-
Improved User Experience: By displaying the stock status and quantity for each variation, you're giving your customers more information to make informed purchasing decisions. This can lead to fewer disappointments and a better overall shopping experience.
-
Reduced Abandoned Carts: When customers can see at a glance which variations are in stock and how many are available, they're less likely to add out-of-stock items to their cart, leading to fewer abandoned carts and increased conversions.
-
Enhanced Product Visibility: The custom variation dropdown makes it easier for customers to find the exact product they're looking for, as they can quickly see which variations are available and in stock.
-
Streamlined Order Fulfillment: With the stock quantity information displayed, your customers can make more informed choices, reducing the likelihood of orders for out-of-stock items and simplifying your order fulfillment process.
Implementing the Code Snippet
To implement the code snippet, follow these steps:
- Open your WordPress website's
functions.php
file, typically located in the active theme's directory.
- Copy the code snippet and paste it at the end of the
functions.php
file.
- Save the file and refresh your website to see the changes.
Once implemented, the variation dropdown on your WooCommerce product pages will now display the stock status and quantity for each attribute value, providing your customers with more detailed information to enhance their shopping experience.
Remember, this code snippet is designed to work with single-attribute variations. If your products have multiple attributes, you may need to modify the code to accommodate that scenario.
In conclusion, customizing the WooCommerce variation dropdown to display stock status and quantity is a simple yet effective way to improve your customers' shopping experience and potentially boost your conversion rates. By providing more transparent and informative product details, you're empowering your customers to make better-informed purchasing decisions, leading to a more satisfactory e-commerce journey for all.
For more advanced customization and optimization solutions for your WooCommerce store, be sure to check out Flowpoint.ai. Our AI-powered platform can help you identify and fix technical issues, optimize your user experience, and generate personalized recommendations to drive increased conversions
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.