How To Add a Quantity Slider to WooCommerce Products

This code enables you to add a quantity slider before the default quantity field and add to cart button on the single wc product page like this :

The code is executed using the wp_footer hook so the slider is only added to the page after it is loaded.
The code only executes on single product pages
The code creates a new html element with the class quantity-slider-container
The code inserts the slider before the default WooCommerce quantity field and add to cart button
The code sets the sliders quantity value to match the default WooCommerce quantity value.

Here’s quick demo video showing you how it works.

Here’s the code you can add to your child themes functions file or custom code snippets plugin.

This code creates the most basic quantity slider.

For more advanced quantity sliders, click the following links.