Overriding WooCommerce AJAX Variations Limit

 In WooCommerce

Recently while working on a customer’s e-commerce site, we noticed a problem where all variations were not showing on some of the product pages. Some products were showing variations that did not exist, while some where working as expected. In this post I’ll share the solution I found for overriding WooCommerce AJAX variations limit.

As background, this particular store has three product attributes:

  • Size
  • Style
  • Color

For some of the designs, her variations could very easily grow to several dozen:

  • 3 Colors (Gray, Black, White)
  • 4 Styles (Shirt, Onesie, Tank, Thermal)
  • 8 Sizes (3M, 6M, 9M, 12M, 2T, 4T, 6, 8)

However, everything is made by hand and and not all designs and colors are available on all styles. For example, the store owner creates infant onesies, but only in white. She also offers toddler thermal shirts, but only in gray. So it’s very important that customers be limited to the proper variations on her product pages to prevent them from ordering invalid products.

The problem we were seeing is that the front end product pages were not always enforcing this. In some cases, a customer could order a gray onesie even though that’s never available. After some research I found the problem was related to a little known filter related to WooCommerce AJAX variations limit.

WooCommerce Variations Example

For the sake of speed, WooCommerce embeds a JavaScript snippet in every product page that contains the exact variations that are available. This allows the web browser to dynamically enable and disable the different dropdown lists without having to send an AJAX call back to the server, which could take time.

However, to keep page sizes from becoming too large, WooCommerce also sets a limit on the number of variations that can be stored in this JavaScript snippet. When a product has more variations than this limit, it skips embedding the JavaScript all together. It was this limit on the number of variations that was causing our problem.

After a fair amount of searching, I stumbled on this variations limit. Turns out, the fine folks at WooCommerce expected this limit might be a problem and provided a hook to override the behavior. Adding the following snippet of PHP code to the functions.php file in the child theme solved the problem:

This snippet tells WooCommerce to allow 100 variations for a product before it stops embedding the JavaScript that allows the web browser to dynamically enable and disable the different dropdown lists. Of course 100 works for this site but you may need to adjust it for your own needs. Just make sure it’s higher than the maximum number of variations any single product might have.

Note that the filter also passes you the product reference. The shop I worked on can get by with a static number, but you could potentially return a dynamic threshold based on product category, name, tag, or other data. You can read more about the filter here.

Recent Posts
Track Referrer PayPal WooCommerce