rachael-portier
7/26/2019 - 1:55 PM

WooCommerce Price Slider

Styles woocommerce price filter slider AND switches filter buttons and price labels. Filter buttons and price labels are found in plugins > woocommerce/includes/widgets/class-wc-widget-price-filter.php

style.css
content_copyfile_download
/*************** WOOCOOMERCE PRICE SLIDER ***************/
.price_slider{ 
    margin-bottom: 1em;
}
.price_slider_amount {
    text-align: right;
    line-height: 2.4em;
    font-size: 0.8751em;
}
.price_slider_amount .button {
    font-size:1.15em;
}
.price_slider_amount .button {
    float: left;
}
.ui-slider {
    position: relative;
    text-align: left;
}
.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 0.9em;
    height: 0.9em;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.25);
    cursor: pointer;
    background: #e7e7e7;
    background: -webkit-gradient(linear,left top,left bottom,from(#FEFEFE),to(#e7e7e7));
    background: -webkit-linear-gradient(#FEFEFE,#e7e7e7);
    background: -moz-linear-gradient(center top,#FEFEFE 0%,#e7e7e7 100%);
    background: -moz-gradient(center top,#FEFEFE 0%,#e7e7e7 100%);
    outline: none;
    top: -.3em;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.65) inset;
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.65) inset;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.65) inset;
}
.ui-slider .ui-slider-handle:last-child {
    margin-left: -1em;
}
.ui-slider .ui-slider-range {
    position: absolute;
    z-index: 1;
    font-size:.7em;
    display: block;
    border: 0;
    background: none repeat scroll 0 0 #FF6B6B;
    box-shadow: 1px 1px 1px 0.5px rgba(0, 0, 0, 0.25) inset;
    -webkit-box-shadow: 1px 1px 1px 0.5px rgba(0, 0, 0, 0.25) inset;
    -moz-box-shadow: 1px 1px 1px 0.5px rgba(0, 0, 0, 0.25) inset;
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    border-radius: 1em;
}
.price_slider_wrapper .ui-widget-content {
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    border-radius: 1em;
    background: #1e1e1e;
    background: -webkit-gradient(linear,left top,left bottom,from(#1e1e1e),to(#6a6a6a));
    background: -webkit-linear-gradient(#1e1e1e,#6a6a6a);
    background: -moz-linear-gradient(center top,#1e1e1e 0%,#6a6a6a 100%);
    background: -moz-gradient(center top,#1e1e1e 0%,#6a6a6a 100%);
}
.ui-slider-horizontal {
    height:.5em;
}
.ui-slider-horizontal .ui-slider-range {
    top: 0;
    height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
    left: -1px;
}
.ui-slider-horizontal .ui-slider-range-max {
    right: -1px;
}






/*************** SWITCH FILTER BUTTON AND PRICE LABEL ~ LINE 129 ***************/
					<div class="price_label" style="display:none;">
						<span class="from"></span><span class="to"></span>
					</div>
<button type="submit" class="button">' . esc_html__( 'Filter', 'woocommerce' ) . '</button>