We’ve gotten questions about why variation dropdowns don’t load instantly with some products. Instead, variations load dynamically when customers make selections.
This happens when your product has more than 30 variations. WooCommerce sets this limit to protect your site’s performance. Loading 50 or 100 variations at once can slow down your pages.
But if you need to increase this limit, here’s how to do it.
Why the 30-Variation Limit Exists
WooCommerce uses a threshold to keep your store fast. Every variation adds data to your product page. More variations mean longer load times.
The default limit is 30 variations. When you go over this number, WooCommerce uses AJAX to load variations dynamically. This means variations load only when customers select options, rather than loading everything upfront.
You might need to increase this limit if you have products with 40-50 variations and want all variations to load upfront. Just know that higher limits can impact performance.
The Code to Change the Variation Limit
Here’s the code you need. It uses WordPress’s filter system to change the threshold:
add_filter( 'woocommerce_ajax_variation_threshold', 'custom_wc_ajax_variation_threshold', 10, 2 );
function custom_wc_ajax_variation_threshold( $qty, $product ) {
return 50;
}Change 50 to whatever limit you want. This tells WooCommerce to load all variations upfront for products with up to 50 variations. Products with more than 50 variations will use AJAX loading instead.
Where to Add This Code
You have two options for adding this code.
Option 1: Add it to your child theme’s functions.php file. This keeps the code in your theme. If you update your theme, make sure you’re using a child theme or you’ll lose this change.
Option 2: Use a code snippet plugin. This is safer and easier. Install a plugin like Code Snippets or WPCode. Then add the code through the plugin’s interface. No need to touch any theme files.
Setting Different Limits for Specific Products
You can set different limits for different products. Here’s how:
add_filter( 'woocommerce_ajax_variation_threshold', 'custom_wc_ajax_variation_threshold', 10, 2 );
function custom_wc_ajax_variation_threshold( $qty, $product ) {
// Product with ID 123 gets 100 variations
if ( $product->get_id() == 123 ) {
return 100;
}
// All other products get 50
return 50;
}Replace 123 with your actual product ID.
Things to Keep in Mind
Keep your limit reasonable. Going from 30 to 50 is usually fine. Jumping to 200 can cause problems.
More variations mean slower pages. Your server has to process more data. Your customers have to download more HTML.
If you’re on shared hosting, stick with lower numbers. If you have a VPS or dedicated server, you can go higher.
Test your product pages after making this change. Check the load time. Make sure everything still works smoothly.
When Not to Increase the Limit
Sometimes increasing the limit isn’t the best solution. Consider these alternatives:
Split your product into multiple products. Instead of one product with 80 variations, create two products with 40 variations each.
Use variation swatches. Plugins like WCBoost Variation Swatches can handle more variations better than dropdowns.
Restructure your variations. Maybe you don’t need all those combinations. Simplify where possible.
If your product has 100+ variations, increasing the threshold probably isn’t the answer. Look at restructuring instead.
Wrapping Up
Changing the variation threshold is simple. Add the code snippet to your site. Set your preferred limit. Your variations will load upfront for more products instead of using AJAX.
Just remember that performance matters. Start with a modest increase. Monitor your site speed. Adjust as needed.