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;
}
The code is over at my site davidwaumsley.com .
Part Five coming soon.