WOOF - WooCommerce Products Filter

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:

  1. 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));
    }
    
  2. Code for the rounded squares for color palette is taken here: https://products-filter.com/possible-color-selector-show-circular-shaped-colors-instead-square/
  3. In the functions.php file of the current wp theme added the next PHP code:
    1. https://products-filter.com/hook/woof_get_more_less_button_xxxx/ – example for images
    2. https://products-filter.com/hook/woof_print_content_before_search_form/