HUSKY - Products Filter Professional for WooCommerce

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”
        width: 100% !important;
        clear: both;
        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;
        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;
       border-radius: 80px !important;
        border-color: #444;
        border-style: double;
    .woof_sid_auto_shortcode .woof_submit_search_form_container {
        margin: -5px 0 15px 10px;
        justify-content: space-between;
    } .woof_sid_auto_shortcode .woof_container {
        width: 25%;
    @media (max-width: 1400px){ .woof_sid_auto_shortcode .woof_container {
            width: 33%;
    @media (max-width: 1200px){ .woof_sid_auto_shortcode .woof_container {
            width: 50%;
    @media (max-width: 768px){ .woof_sid_auto_shortcode .woof_container {
            width: 100%;
        font-size: 14px;
        display: flex;
        flex-wrap: wrap;
        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:
  3. In the functions.php file of the current wp theme added the next PHP code:
    1. – example for images


Troubles? Ask for Support!