Black Friday & Cyber Monday SUPER SALE ALL WEEK:
Grab 40% OFF on plugins
Days
Hours
Minutes
Seconds

How to Add Range Slider on WooCommerce Product Page?

Want to make shopping easier for your customers with range sliders? This post is for you!

In this example, we are adding a size range slider. With a slider prominently displayed, customers can easily narrow down their options to products that fall within their desired size range. So, picking the perfect size is as simple as sliding a button. Let’s dive in and see how this size range slider makes finding the perfect fit easier than ever!

Solution: Add Range Slider on WooCommerce Product Page

This code adds a size range slider to WooCommerce product pages, allowing customers to easily select their preferred size range.

function ts_add_range_slider_to_product_page() {
    // Check if we are on a WooCommerce product page
    if (is_product()) {
        // Output HTML for range slider above "Add to Cart" button
        ?>
        <div class="size-range-slider-container" style="margin-bottom: 20px;">
            <label for="size-range-slider">Shoe Size Range:</label>
            <input type="range" id="size-range-slider" name="size-range-slider" min="5" max="12" value="8" step="1" style="margin-right: 10px;">
            <input type="text" id="size-range-display" name="size-range-display" readonly style="margin-right: 10px;">
            <input type="hidden" id="selected-size" name="selected_size" value="8">
        </div>
        <script>
            // JavaScript to update range slider and hidden input field
            jQuery(document).ready(function($) {
                var minSize = 5; // Minimum shoe size
                var maxSize = 12; // Maximum shoe size
                var defaultSize = 8; // Default selected shoe size

                // Set minimum and maximum values for the range slider
                $('#size-range-slider').attr('min', minSize);
                $('#size-range-slider').attr('max', maxSize);

                // Set default selected size
                $('#size-range-slider').val(defaultSize);
                $('#size-range-display').val(defaultSize);
                $('#selected-size').val(defaultSize);

                // Update selected size when slider value changes
                $('#size-range-slider').on('input', function() {
                    var selectedSize = $(this).val();
                    $('#size-range-display').val(selectedSize);
                    $('#selected-size').val(selectedSize);
                });
            });
        </script>
        <?php
    }
}
add_action( 'woocommerce_after_add_to_cart_button', 'ts_add_range_slider_to_product_page' );

Output

When a customer checks out a product page, like for a pair of shoes, they’ll see a cool slider for picking the size range they want. As they move the slider, the sizes they pick show up in a input box right next to it.

How to Add Range Slider on WooCommerce Product Page? - Tyche Softwares

If you’re looking to make your product pages visually appealing with interactive elements, you can also add color swatches as product input fields. This customization will make your products stand out and give your customers an interactive shopping experience with multiple color options.

Browse more in: Code Snippets, WooCommerce How Tos, WooCommerce Tutorials

Share It:

Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x