WooCommerce Products Filter

Content of the article

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"
   
   CSS

   .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; }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79

   .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.  - here is images you can download and use