Hints Archives - WooCommerce Products Filter

Auto scroll to products after their filtering in redirect mode

Open file functions.php of your current wp theme Find there code: <?php wp_footer(); ?> and drop after it next code:

<?php if (isset($_GET['swoof'])): ?>

    <script>
        jQuery(function ($) {
            setTimeout(function () {
                $('html, body').animate({
                    scrollTop: $(".woof_products_top_panel_content").offset().top - 100
                }, 777);
            }, 333);
        });
    </script>

<?php endif; ?>

<?php if (isset($_GET['swoof'])): ?>

jQuery(function ($) {

setTimeout(function () {

$('html, body').animate({

scrollTop: $(".woof_products_top_panel_content").offset().top - 100

}, 777);

}, 333);

});

</script>

<?php endif; ?>

Now after filtering in redirect mode will be scrollin effect as here

Get the plugin to work with ACF date field

Source: https://wordpress.org/support/topic/custom-date-fields/ Customer question: Hello, I am trying to get the plugin to work with ACF date field, but it seems not possible. The problem is with date formats – WOOF uses timestamp and ACF uses Y-m-d format in the database. Is there a way to solve this? Support: Hello Unfortunately not as for filtration… read more

Can I override any extension view file for my site needs?

From ver.2.2.4/1.2.4 it is possible to override templates of extensions. Folder should be placed in current wordpress theme folder and should has the same file structure as the original extension. Example: wp-content/themes/my_child_theme/woof/ext/image/views/woof.php

Conflict with elementor page builder

Hi, We are using your plugin and Elementor plugin on same page. They started to conflict for some reasons. Elementor page builder doesnt open correctly. As soon your plugin disabled, ti loads up nicely without issues. Youw and Elementor pluign ofr us are crucial, and they worked ok till some moment… We fixed the… read more

How to make auto-update for WordPress plugins and themes bought on Envato

Read info about it here: https://pluginus.net/make-auto-update-wordpress-plugins-themes-bought-envato/

How to make infinite scroll for filtered products also

From WOOF v.2.1.7 its possible to realize with the plugin YITH Infinite Scrolling. Install it and set next settings on its options page: Navigation Selector: nav.woocommerce-pagination Next Selector: nav.woocommerce-pagination a.next Item Selector: li.product Content Selector: ul.products

Working with WPML

WOOF is absolutely compatible with WPML. All taxonomies labels can be translated into all languages in: tab Advanced -> “WPML taxonomies labels translations” using next syntax-example (english is default in the example):

es:Locations^Ubicaciones
es:Size^Tamano
de:Locations^Lage
de:Size^Grobe

es:Locations^Ubicaciones

es:Size^Tamano

de:Locations^Lage

de:Size^Grobe

How to manipulate by CSS if search is going

If it necessary to manipulate with any view on the web site when WOOF search is going its possible to use CSS class ‘woof_search_is_going’ in tag <body>. Its always appears when WOOF search is going in the redirect mode.

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

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

}

Code for the rounded squares for color palette is taken here: https://products-filter.com/possible-color-selector-show-circular-shaped-colors-instead-square/ In the functions.php file of the current wp theme added the next PHP code: https://products-filter.com/hook/woof_get_more_less_button_xxxx/ – example for… read more

If it’s possible to have the Color selector show circular-shaped colors instead of square

Drop the next CSS code into the plugin settings page -> tab Options -> “Custom CSS code”:

.woof_color_term{
   border-radius: 80px !important;
}

.woof_color_term:hover{
    border-color: #444;
    border-style: dotted;
}

.woof_color_term{

border-radius: 80px !important;

}

.woof_color_term:hover{

border-color: #444;

border-style: dotted;

}

Size of color boxes can be adjusted by:

.woof_color_term{
    width: 26px !important;
    height: 26px !important;
}

.woof_color_term{

width: 26px !important;

height: 26px !important;

}

WooCommerce Products Filter

Content of the page

Category: Hints

Auto scroll to products after their filtering in redirect mode

Get the plugin to work with ACF date field

Can I override any extension view file for my site needs?

Conflict with elementor page builder

How to make auto-update for WordPress plugins and themes bought on Envato

How to make infinite scroll for filtered products also

Working with WPML

How to manipulate by CSS if search is going

Styles and codes which are applied on the demo site

If it’s possible to have the Color selector show circular-shaped colors instead of square