Styles and codes which are applied on the demo site
To make demo site more attractive and demonstrated different features the next code is applied:
- In the plugin settings -> tab Advanced -> “Custom CSS code”
.woof_price3_search_container{ width: 100% !important; clear: both; } button.woof_submit_search_form, button.woof_reset_search_form{ background: #6BBE92 !important; width: 100px; border: 0; padding: 10px 0; margin: 5px 0; text-align: center; color: #fff !important; font-weight: bold !important; transition: all .4s; font-size: 1.1em; } button.woof_submit_search_form:hover, button.woof_reset_search_form:hover{ color: #fff !important; background: #6ddE92 !important; } .woof_container h4{ margin-bottom: 11px !important; font-size: 1.32em !important; background: #f2f3f5; padding: 11px 7px; color: #333; line-height: 1.12em !important; text-align: center; border-radius: 3px; } .woof_color_term{ border-radius: 80px !important; } .woof_color_term:hover{ border-color: #444; border-style: double; } .woof_sid_auto_shortcode .woof_submit_search_form_container { margin: -5px 0 15px 10px; justify-content: space-between; } body.page-id-1003 .woof_sid_auto_shortcode .woof_container { width: 25%; } @media (max-width: 1400px){ body.page-id-1003 .woof_sid_auto_shortcode .woof_container { width: 33%; } } @media (max-width: 1200px){ body.page-id-1003 .woof_sid_auto_shortcode .woof_container { width: 50%; } } @media (max-width: 768px){ body.page-id-1003 .woof_sid_auto_shortcode .woof_container { width: 100%; } } .woof_list{ font-size: 14px; } .woof_list.woof_list_image{ display: flex; flex-wrap: wrap; } .woof_image_term{ width: 138px; height: 110px; margin: 0 3px 3px 0; background-size: 100% 100%; background-clip: content-box; border: 1px solid #e2e6e7; padding: 2px; color: #292f38; font-size: 0; text-align: center; cursor: pointer; border-radius: 0; transition: border-color .35s ease; } .woof_childs_list_opener span{ filter: drop-shadow( 1px 1px 3px rgba(110, 210, 210, .7)); }
- Code for the rounded squares for color palette is taken here: https://products-filter.com/possible-color-selector-show-circular-shaped-colors-instead-square/
- In the functions.php file of the current wp theme added the next PHP code:
Troubles? Ask for Support!