How to Configure CSS for Product Filter?

To change and customize the filter styles, please move to the Design -> General -> CSS Editor

  • To change fonts, font size and weight of filter blocks:

.wfpTitle {font-weight: normal; font-size:20px !important;}
.wpfValue {font-size:16px; font-family: "Source Sans Pro"; !important;}

The “Title” is a title of every block, “Value” is a block.

Here you can put:

font-weight: normal/bold;
font-size:XXpx;
font-family: "Arial"; or other font family
background-color: #xxxxxx;
color:#xxxxxx

and other parameters from Styles if you tap right click -> Inspect:

 

  • To change the on-hover colour of the select options in the filter

.wpfCheckboxHier option[selected] { background-color: orange; }

  • In order to change checkboxes style:

.wpfFilterWrapper .wpfCheckbox label::before {
background-color: rgb(255, 255, 255) !important;
border: 1px solid rgb(204, 204, 204) !important;
color: rgb(68, 68, 68) !important;
}

  • To align checkbox and the label: 

.wpfFilterWrapper .wpfCheckbox label {margin: -10px 0px 0px 0px;}

  • To make checkboxes (squares) for all filters if one of them is radio buttons (circles) :.wpfFilterContent .wpfCheckboxHier input,
    .wpfFilterWrapper[data-filter-type="wpfCategory"] .wpfCheckbox label:before {
        border-radius: 0 !important;
        width: 18px !important;
        height: 18px !important;
    }
  • To change the button (CLEAR/FILTER) style

.wpfButton {
background-color: blue;
}

  • To change the text for Search bar (JS editor)

jQuery('.wpfSingleInputSearch input').attr('placeholder', 'my text');

  • To change the size and colour for “+” in collapsible categories:

.wpfFilterWrapper .wpfCollapsible {
font-size: 30px;
color: black;
}

Categories
Latest Articles