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.