Quantity Slider for WooCommerce Single Products

The code in this plugin enables you to convert the default quantity field on single product pages to a slider using WooCommerce. You can use the quantity slider on any product type including simple and variable products.

To change the quantity, the slider handle can be dragged or customers can click anywhere in the slider field to set their desired quantity.

Settings

Once activated, the plugin adds a checkbox to enable the quantity slider on any Edit Product screen where you can set, per product :

• Minimum Quantity
• Maximum Quantity
• Step Quantity
• Measurement Unit

Code Usage

You can use the plugin “as is” or copy and paste the code into your child themes functions file as well as the files.

Styling

There’s only 1 page of CSS you can modify or extend using your own styles. Otherwise, you can use custom CSS rules in your child themes style sheet or additional CSS field.

You can style the range for the filled portion of the slider background like this :

.ui-slider-range {
    background:grey;
}