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;
    }
    
    .woof_sid_auto_shortcode .woof_container_radio .woof_block_html_items,
    .woof_sid_auto_shortcode .woof_container_checkbox .woof_block_html_items,
    .woof_sid_auto_shortcode .woof_container_label .woof_block_html_items
    {
        min-height: 160px;
        max-height: 160px;
        overflow: auto;
        padding: 0 0 0 7px;
    }
    
    .woof_sid_auto_shortcode .woof_container_color .woof_block_html_items,
    .woof_sid_auto_shortcode .woof_container_image .woof_block_html_items,
    .woof_sid_auto_shortcode .woof_container_select .woof_block_html_items,
    .woof_sid_auto_shortcode .woof_container_slider .woof_block_html_items{
        min-height: 160px;
        max-height: 160px;
    }
    
    .woof_sid_auto_shortcode .woof_container_slider .woof_block_html_items{
        padding: 0 9px;
    }
    
    .woof_sid_auto_shortcode ul.woof_list.woof_list_label{
        margin-top: 9px !important;
    }
    
    .woof_sid_auto_shortcode .woof_checkbox_sales_container .woof_container_inner{
        padding-left: 20px;
    }
    
    .woof_sid_auto_shortcode .woof_author_search_container .woof_container_inner,
    .woof_sid_auto_shortcode .woof_by_rating_container .woof_container_inner{
        padding-top: 23px;
    }
    
    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;
    }
  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/
  4. close2 open2 – here is images you can download and use