filter-blocks.md

📣 Announcement: New documentation location

The documentation for WooCommerce Blocks has moved to the WooCommerce monorepo.

Please refer to the documentation in the new location as the files in this repository will no longer be updated and the repository will be archived.

---

Filter blocks

Price slider accent color

The Filter by Price block includes a price slider which uses an accent color to show the selected range.

By default, it uses the WooCommerce purple shade, but it can be easily modified by themes with the following code:

.wc-block-components-price-slider__range-input-progress,
.rtl .wc-block-components-price-slider__range-input-progress {
	--range-color: #ee6948;
}

Notice the code snippet above uses a CSS custom property, so the default color might still be available in some browsers that don't support it like Internet Explorer 11. If your theme supports IE11, you can add the following lines to target it:

/* Target only IE11 */
@media all and ( -ms-high-contrast: none ), ( -ms-high-contrast: active ) {
	.wc-block-components-price-slider__range-input-progress {
		background: #ee6948;
	}
}

---

We're hiring! Come work with us!

🐞 Found a mistake, or have a suggestion? Leave feedback about this document here.