I am currently writing my own WordPress Theme which is supposed to support WooCommerce. Everythign works fine so far, but for some reason the slider for the price filter widget doesn't work and it's just showing 2 textboxes instead.

I looked into the WooCommerce code and it seems like they hardcoded "display:none" into the div container, aswell as the price label:

<div class="price_slider_wrapper">
    <div class="price_slider" style="display:none;"></div>
    <div class="price_slider_amount">
        <input type="text" id="min_price" name="min_price" value="' . esc_attr( $min_price ) . '" data-min="' . esc_attr( apply_filters( 'woocommerce_price_filter_widget_min_amount', $min ) ) . '" placeholder="' . esc_attr__( 'Min price', 'woocommerce' ) . '" />
        <input type="text" id="max_price" name="max_price" value="' . esc_attr( $max_price ) . '" data-max="' . esc_attr( apply_filters( 'woocommerce_price_filter_widget_max_amount', $max ) ) . '" placeholder="' . esc_attr__( 'Max price', 'woocommerce' ) . '" />
        <button type="submit" class="button">' . __( 'Filter', 'woocommerce' ) . '</button>
        <div class="price_label" style="display:none;">
            ' . __( 'Price:', 'woocommerce' ) . ' <span class="from"></span> &mdash; <span class="to"></span>
        '. $fields . '
        <div class="clear"></div>

I also looked at the Storefront code, but couldn't find how that theme displays the slider.

Is there some hook or something else I can use to remove that inline css?


I had the same exact problem and it was caused by a minifier plugin i had. I just excluded the file wc-price-slide.js from minifying and it went back to working.. Also read that it might have to do with an outdated mod_security in your host. Have you solved your problem? If you found a different way do share..

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.