Woocommerce Price filter slider not showing

  • Hi,

    Is anyone knew how to fix the price filter slider widget?
    MIne not showing the slider, it’s only shows box that we have to input the minimum and maximum.

    Please help anyone, thank you ??

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hello there, did you managed to fix the problem, as I am having the same issue on my website, if yes, could you please elaborate the answer for me?

    You are missing the CSS code for the slider that will style it.

    If you have “Enable WooCommerce CSS” checked in the General WooCommerce settings page, it should show up.

    If you are doing custom CSS styling, you need to style the slider elements.

    Here is a slightly modified version of the WooCommerce default price filter CSS:

    /* =Price Filter Widget
	-------------------------------------------------------------- */
.widget_price_filter .price_slider {
  margin-bottom: 1em;
}
.widget_price_filter .price_slider_amount {
  text-align: right;
  line-height: 2.4em;
  font-size: 0.8751em;
}
.widget_price_filter .price_slider_amount .button {
  font-size: 1.15em;
}
.widget_price_filter .price_slider_amount .button {
  float: left;
}
.widget_price_filter .ui-slider {
  position: relative;
  text-align: left;
}
.widget_price_filter .ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 0.9em;
  height: 0.9em;
  -webkit-border-radius: 1em;
  -moz-border-radius: 1em;
  border-radius: 1em;
  border: 1px solid #141741;
  cursor: pointer;
  background: #2d338e;
  outline: none;
  top: -0.2em;
}
.widget_price_filter .ui-slider .ui-slider-handle:last-child {
  margin-left: -0.5em;
}
.widget_price_filter .ui-slider .ui-slider-range {
  position: absolute;
  z-index: 1;
  font-size: .7em;
  display: block;
  border: 0;
  background: #c0132c;
  -webkit-border-radius: 1em;
  -moz-border-radius: 1em;
  border-radius: 1em;
}
.widget_price_filter .price_slider_wrapper .ui-widget-content {
  -webkit-border-radius: 1em;
  -moz-border-radius: 1em;
  border-radius: 1em;
  background: #d5d5d5;
}
.widget_price_filter .ui-slider-horizontal {
  height: .5em;
}
.widget_price_filter .ui-slider-horizontal .ui-slider-range {
  top: 0;
  height: 100%;
}
.widget_price_filter .ui-slider-horizontal .ui-slider-range-min {
  left: -1px;
}
.widget_price_filter .ui-slider-horizontal .ui-slider-range-max {
  right: -1px;
}

    That should get you started!

    Hi @gradgraph. I used your css in my file, but to no avail. Could you help me out as to what i’m missing? I took the woocommerce css as well and neither appear to be rendering my filter properly.

    https://www.pridesupply.com/wp/product-category/clothing/

    hey hi,
    greyhavns

    The price filter show category page.

    Regards
    irfan

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Woocommerce Price filter slider not showing’ is closed to new replies.