Styles et codes appliqués sur le site de démonstration

Pour rendre le site de démonstration plus attrayant et démontrer différentes fonctionnalités, le code suivant est appliqué :

1. Dans les paramètres du plugin -> onglet Avancé -> « Code CSS personnalisé »

   .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. Le code pour les carrés arrondis pour la palette de couleurs est pris ici : https://products-filter.com/possible-color-selector-show-circular-shaped-colors-instead-square/
3. Dans le fichier functions.php du thème wp actuel, le code PHP suivant a été ajouté :
   1. https://products-filter.com/hook/woof_get_more_less_button_xxxx/ – exemple pour les images
   2. https://products-filter.com/hook/woof_print_content_before_search_form/