Slider For WooCommerce Product Quantity

This plugin enables you to add a range slider for selecting the quantity per product for WooCommerce users. Customers can select the quantity using different methods including :

• Clicking within the slide range
• Using the plus and minus buttons
• Dragging the slider handle
• Selecting the quantity input field value

The plugin includes supports for touch events enabling the slider handle to be dragged when using Android or IOS mobile devices.

Settings

After plugin activation, you’ll find the settings on the simple product > inventory tab where you can :

• Enable the slider on a per product basis. When enabled, the plugin adds a custom body class named quantity-slider-enabled
• Set the minimum and maximum quantities
• Set the step quantity

The slider also works on variable products :

And now includes fields to set minimum, maximum and step quantity dynamically based on variation selection.

Theme Specific CSS

Styling of the quantity div and single add to cart button may vary per theme so you may need to add custom CSS rules.

Here’s some CSS which has been tested with the Twenty Twenty default theme for WordPress.

.quantity-slider-enabled form.cart .quantity {
    float: none!important;
}

.quantity-slider-enabled .single_add_to_cart_button {
    margin-left: auto!important;
    margin-right: auto!important;
    display: block!important;
    margin-top: 20px;
}

.quantity-slider-enabled .quantity-slider-wrapper {
    margin-top: 100px;
}

The following CSS has been tested using the Twenty Twenty Four default block theme for WordPress.

.quantity-slider-enabled .wp-block-woocommerce-add-to-cart-form .variations_button, 
.quantity-slider-enabled .wp-block-woocommerce-add-to-cart-form form.cart {
    display: block;
}

This CSS may need tweaking for use with other WordPress themes.

Version

The latest version is V5-118198.