Hints Archives - WooCommerce Products Filter

Content of the page

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;

}

How to save a selected filter in a session so the website keeps it remembered for the user

Works from v.1.1.6/2.1.6. PHP 5.4 is minimum requirement. Drop the next script example in the functions.php file of the current wp theme:

add_filter('send_headers', function() {
        if ($_SERVER['SCRIPT_URL'] === '/' OR $_SERVER['SCRIPT_URL'] === '/shop/')
        {
            global $WOOF;
            if (!$WOOF->is_isset_in_request_data($WOOF->get_swoof_search_slug()))
            {
                $woof_last_search_request = $WOOF->storage->get_val('woof_last_search_request');
                if (!empty($woof_last_search_request) AND is_array($woof_last_search_request))
                {
                    unset($woof_last_search_request['wc-ajax']);
                    unset($woof_last_search_request['page']);
                    unset($woof_last_search_request['paged']);
                    //***
                    $_GET = $woof_last_search_request;
                    add_filter('woof_get_request_data', function() use($woof_last_search_request) {
                        return $woof_last_search_request;
                    });
                }
            }
        }
    }, 9999);

add_filter('send_headers', function() {

if ($_SERVER['SCRIPT_URL'] === '/' OR $_SERVER['SCRIPT_URL'] === '/shop/')

{

global $WOOF;

if (!$WOOF->is_isset_in_request_data($WOOF->get_swoof_search_slug()))

{

$woof_last_search_request = $WOOF->storage->get_val('woof_last_search_request');

if (!empty($woof_last_search_request) AND is_array($woof_last_search_request))

{

unset($woof_last_search_request['wc-ajax']);

unset($woof_last_search_request['page']);

unset($woof_last_search_request['paged']);

//***

$_GET = $woof_last_search_request;

add_filter('woof_get_request_data', function() use($woof_last_search_request) {

return $woof_last_search_request;

});

}

}, 9999);

Actions after AJAX filtering done

There is in-built javascript event in the filter: woof_ajax_done So, if you want to apply any js code after WOOF searching by AJAX done, for example reinitialization of product galleries, use next code construction somewhere in js file of current wp theme (better use child theme):

jQuery(document).on("woof_ajax_done", woof_ajax_done_handler);
function woof_ajax_done_handler(e) {
    //write your code here
}

jQuery(document).on("woof_ajax_done", woof_ajax_done_handler);

function woof_ajax_done_handler(e) {

//write your code here

}

Customer request about this feature before it was implemented:… read more

How to disable chosen js lib (drop-downs) for mobile devices

open your current theme functions.php file drop there next php code:

add_filter('woof_use_chosen', function($is)
{
	if (wp_is_mobile())
	{
	    return false;
	}

	return $is;
});

add_filter('woof_use_chosen', function($is)

{

if (wp_is_mobile())

{

return false;

}

return $is;

});

How to set toggle on the right side

Use next CSS code in tab Advanced -> Custom CSS code:

a.woof_front_toggle{
   float: left;
   margin-right: 15px;
}

a.woof_front_toggle{

float: left;

margin-right: 15px;

}