Skip to content

Product Search and Filtering

Here we take a look at two premium plugins that that work with Beaver Themer: Facet WP and Search and Filter Pro

This is a slide show of the setting used here . Tabs not shown are left as the defaults.

/* This is styling the dropdown filters which are vertically aligned by default*/ 

#search_custom .searchandfilter ul{
display:flex;
flex-direction:row;
justify-content:space-around;
flex-wrap:wrap;
width:auto;

}
#search_custom .searchandfilter ul li{
margin:10px;
max-width:100%;

}

.searchandfilter .sf-field-search INPUT
{
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-khtml-border-radius: 0px;
border-radius: 0px;
border: 1px solid #999;
}
.sf-field-search .sf-input-text
{
background-color: #FFFFFF;
padding-top: 0;
padding-bottom: 0;
height: 22px;
}

/* This is styling the search placeholder text*/ 
.searchandfilter INPUT.sf-input-text::placeholder
{
color: #999;

}

/* This is adding the magnifying glass to the search box*/ 
.searchandfilter .sf-field-search::after
{
content: "\f002";
font-family: fontawesome;
color: #030506;
font-size: 14px;
z-index: 100;
/*+placement: -23px 0px;*/
position: relative;
left: -23px;
top: 0px;
}

Part Five coming soon.

Do NOT follow this link or you will be banned from the site! Scroll To Top