Plugin Requirements

  1. WordPress version 5.4.2+.
  2. WooCommerce plugin version 4.3.0.

Installation

  1. Download the plugin from your download page on codecanyon.net "Installable WordPress file only".
  2. Login to your WordPress Dashboard.
  3. Go to Plugins > Add New.
  4. Click “Upload Plugin” at the top.
  5. Upload the pwfwoofilter.zip file.
  6. Once installed, click “Activate Plugin”.
  7. Go to WooCommerce > filters to add new filter.

Automatic updates

  1. Download the plugin from your download page on codecanyon.net "Installable WordPress file only".
  2. Upload the plugin folder "pwfwoofilter" into the wp-content/plugins/ directory of your WordPress site.
  3. Active the plugin.
Update automatically

Download this plugin Envato Market WordPress Plugin

How To Translate The Plugin ?

  1. Download the POEDIT.
  2. Open the Poedit > file > open > select file wp-content/plugins/pwfwoofilter/languages/pwf-woo-filter.pot.
  3. Get your language code from here
  4. Click save as and rename the file to pwf-woo-filter-{Your Language code}.pot, Example the Arabic Language code is ar, So the file name should be pwf-woo-filter-ar.po.
  5. Finally, start translate this file.

How to translte only fronend strings?

You can add some code in the theme to translate the text string on the frontend.

<?php
add_filter( 'pwf_frontend_translated_text', 'set_translated_text_for_pwf_plugin', 10, 1 );
// translated_text is array
function set_translated_text_for_pwf_plugin( $translated_text) {
     $translated_text['apply'] = 'Apply';
     $translated_text['reset'] = 'Reset';
     $translated_text['filter'] = 'Filter';
     $translated_text['price'] = 'Price';
     $translated_text['search'] = 'Search';
     $translated_text['rate'] = 'Rated';
     $translated_text['load_more'] = 'Load more';
     $translated_text['clearall'] = 'Clear all';

     return $translated_text;
}
?>

How to verify the purchase code?

  • Access your codecanyon.net downloads page with the account that was used to purchase PWF WooCommerce Product Filters.
  • Looking for PWF WooCommerce Product Filters in your list of purchases, click the Download button and select "License Certificate & Purchase Code" and copy it.
  • Go to WPadmin > Filters > Settings >"Envato Purchase Code" and paste it here.
The purchasing code troubleshooting

Introduction to the Filter Post Editor

Important, you need to read the section filter settings, especially Database Query and CSS Selectors. , to avoid most of the issues that appear on the frontend.

  • There are two panels in the editor.
    1. The left side shows a list of filter items.
    2. The right side contains settings for the current item or filter settings.
    3. To save the filter post, click Save button on items panel.
    4. Apply button under the filter item is used to save data in Javascript not in the Database.

Add a new filter

  1. Go to WPadmin > Filters > add new.
  2. Click the tab Database Query and configure settings.
  3. Click the tab CSS Selectors. and configure settings, those settings could be different between themes.
  4. Click button "Add item"
  5. From popup select a filter item you need to add.
  6. Add a unique url key for this filter item.
  7. Click apply button.
  8. Repeat steps from 4 to 7.
  9. Click save.

How to display a filter on the frontend

There are two ways to display the filter on the frontend.

  • First, using the widget that named "PWF: Products Filters".
  • Second, using the shortcode [pwf_filter id="276"].
  • You can find each filter shortcode. Go to WPadmin > Filters > Filters.

Filter Settings

This section is very important please read it carefully, to avoid most of the issues that appear on the frontend.

  1. General.
  2. Database Query.
  3. CSS Selectors.
  4. Visual.
  5. Responsive.
  6. Extra.


General

  • Title - The name of the filter that is only visible in the Admin Panel.
  • Filtering starts
    This option determines how the filter works, the automatic means fetching products when the user clicks any option.
  • Which components to use
    The filter can interact with these elements on the page like products pagination, order by menu, and the result count. You could disable any of these options by unchecking them.
  • Pagination ajax
    Disable this option mean the page is reloaded again.
  • Sorting aJax
    Disable this option mean the page is reloaded again.
  • Pagination type
    Set the theme pagination to number. Regardless of whether you set this option to the load more button or infinite scrolling.

Database Query

  • Post Type
    Set the post type ['post', 'product', ...].
  • Query Type
    There are two options here main query, and custom query.
    • Main Query
      Set this option to the main query for the shop archive or any taxonomy archive page like product categories, brands, tags.
    • Custom Query
      • This option is useful when you display the filter on pages that don't relate to the shop archive.
      • You can use this option with pages that contain Woocommerce shortcode or the custom query created by the page builder or themes.
      • Example, you would like create on sale page.
  • Pages
    Select Which page/s or archive/s that filter will be displayed on it. Examples
    • Post archive is mean this filter will integrate with the blog page and all blog categories and tags.
    • Product archive is mean this filter will integrate with the shop page and all shop categories, tags, custom taxonomies..
  • Posts per page
    Use this option only when it is different between the numbers of products that brings by ajax than a theme.
  • Shortcode Type
    • This option only display when you set the query type to custom query.
  • Shortcode String
    • Important For a none Woocommerce shortcode
      • Set the post per pages numbers, so the shortcode maybe look like this [post limit="10"]
      • The limit number must be equals to the number used by custom database query.
      • Disable the option Using Ajax. Until now this option works only with Woocommerce.
    • This option only display when you set the query type to custom query.
    • This option doesn't show when you set the option shortcode type to the plugin Elementor Pro or plugin PowerPack pro.
    • Important You need to add the attribute limit. This attribute require for both Woocommerce shortcode or custom query.
    • Copy your shortcode you add on the page and paste it here.
    • WooCommerce Default Shortcode
      • You need to add the Woocommerce shortcode you add on the page that displays the filter.
      • For example, the on sale page has a shortcode [products limit=3 columns=3 on_sale="true" paginate="true" cache="false"], you need to paste this shortcode in the option Shortcode String.
    • Custom Query Shortcode

      If you are using a custom query to display products on the frontend by using a page builder or theme..

      • Disable the option using ajax.
      • Add a shortcode [products limit=3], The attribute limit is important.
  • Using Ajax
    • Disable this option when the post type isn't the Woocommerceproduct.
    • Disable this option when the product's container layout is broken after doing ajax.
    • The different between set this option to ON/OFF
      • ON: This option is Used to connect the site and only do the database query related to the filter. This is the fastest way.
      • OFF: This option is Used to reload the full page with selected filters by the client by the ajax and extract the product's container.

CSS Selectors

You need to make changes for CSS selectors depending on the theme used on your website, but most Woocommerce themes are using the default CSS selectors that we set here.

  • Products container selector
    Must be unique, this is used to replace the product's content after ajax is done.
  • Pagination selector.
  • Result count selector.
  • Sorting selector.
  • Active Filters selector.
  • Scroller to selector
  • active Filters selector
    Where you need to display active filters in your page, by default on top of the filter.

Visual

  • Display Filter
    Set this option to "button" mean you can show/hide the filter items by one click. [Demo]
  • Button toggle state
    This option appear only if you set the option display filter to button.
  • Toggle icon Filter title.
  • Toggle icon for option.

Responsive

  • Responsive Disable this option if you want todisplay the filter like the desktop version.
  • Filtering starts.
  • Append the filter to
    Controller where do you append sticky navigation filter for Mobile, by default it is appended to body but you can append it to products content ".products" so sticky filter navigation display only when products on visible area.
  • Screen width
    Assing a width in pixel, that convert the filter to sticky navigation menu at the bottom on the site.

Extra

  • Enable browser hash
    Add hash to the browser URL after doing aJax. example yoursite.com/shop/product-category=clothes&brand=nike
  • API remove columns layout
    There is a layout "column" when you add a new item, you can disable it when using API for the Mobile APP to make it easier for developers to work with nested items array.

Filter Item Fields Types

The plugin PWF WooCommerce Product Filters have many fields types. Checkbox list, Radio list, Text list, Dropdown, Color list, Date, Price, Range Slider, Search, Column, and Button.

Most of these fields are share some settings, that are easy to understand. so read this section General filter item Settings

General Field Item Settings

Here you will find all common settings that most of the filter item fields types have in common.

  • General Tab
    • Title.
    • url key
      this is option must be unique inside filter post, it is a friendly version of the item name, and use to add hash in browser URL.
      • Price and Range slider
        • URL key for min price ?min-price=12&max-price=80
        • URL key for max price ?min-price=12&max-price=80
      • Date
        • URL key for date after ?date-after=2020-07-09&date-before=2020-07-23
        • URL key for date before ?date-after=2020-07-09&date-before=2020-07-23
    • Source of options
      Select the source of item from a dropdown list that will be used to filter products.
      available options Attribute, Category, Tag, Taxonomy, Stock status, Order by, Author, Meta, On sale, Featured.
    • Multi Select
      Allow to multiple selections.
    • Query type
      allows you to apply multiple filters.
      • AND - display products that satisfy both conditions selected by the end-user.
      • OR - display products that satisfy at least one of the conditions selected by the end-user.
    • Product Variations
      Allow filtering by product variations. This option requires adding the filter item stock status.
    • Include.
    • Exclude.
    • Order by
      Allow sorting options depending on name, count, and menu order.
    • Display rules
      Select where to hide this filter item.
  • Visual Tab
    • Display title (ON/OFF).
    • Display toggle content (ON/OFF).
    • Default toggle state (show/hide).
    • CSS class.
    • Display hierarchical (ON/OFF).
    • Display hierarchy collapsed (ON/OFF).
    • Display product counts (ON/OFF).
    • Action for empty options
      There are three different status when the term doesn't have any products (hide/show/mark as disabled).
    • See more options by This option available for Checkbox, radio, text list with three different status
      • Disabled.
      • Scrollbar
      • More button
    • Height of visible content
      This option is showing depends on what you are select from the setting see more options by
      • If you select Scrollbar this option will be controller the height of visible content in percent.
      • if you select More button this option weill be represents the number of items you need to display.
    • Depends on
      Allow you to show this item depending on other items. Example, you have three filter items category, color, and size. and you only need to show the filter items color, and size when the customer select any category. [Demo]
    • Depends on operator.

Checkbox List

Read General Field Item Settings.

Radio List

Read General Field Item Settings.

Text List

Read General Field Item Settings.

  • Tab Visual
    • Inline style (ON/OFF).

Dropdown Menu

Read General Field Item Settings.

  • Tab Visual
    • Drop Down Style (Default/Select2).

Color List

Read General Field Item Settings.

  • Tab Visual
    • Style (Rounded/Rectangle).
    • Size Control the shape size on the frontend.

Box List

Read General Field Item Settings.

  • Tab General
    • Labels
      Allow renaming terms that are displayed on the frontend. For example, size attribute is X-Large you can rename it to XL.
  • Tab Visual
    • Size Control the shape size on the frontend.

Price & Range Slider

Read General Field Item Settings.

  • Tab Visual
    • Step for example, 1,2,3 or 1,3,5.
    • Start | End define default handles positions on slider range.
    • Display max and min inputs.
    • Display price label.
    • Display Tooltip.

Customize Color and Font Size

Go to appearance > customize > PWF filter options.

Terms count Cached

By default PWF plugin cache terms count for performance.

Set Transient Time
  • Go to WPadmin > Filters > Settings.
  • In "Transient time" field, Set transient time in seconds.
  • Click save changes button.
Delete Transient
  • Go to WPadmin > Filters > Settings > click the button "Clear cached terms".

Analytics Data

Enable analytics data. Go to WPadmin > Filters > Settings set the option analytic to "Enable".

To view analytics admin page. Go to WPadmin > Filters > Anyalytics.

The Plugin Actions and Filters

Introduction

the PWF plugin comes with many actions and filters you can using them to customize the Woocommerce loop and the change the HTML code result, useful when your theme requires additional code to get the same result after the plugin doing ajax.

This section will be cover these topics
  • The plugin actions.
  • The plugin filters.
  • The plugin Javascript event.

Actions

  • pwf_before_doing_ajax - before ajax start.
  • pwf_before_shop_loop - before products loop start.
  • pwf_after_shop_loop - After products loop start.
  • pwf_before_shop_loop_item - before loop the product item.
  • pwf_after_shop_loop_item - after loop the product item.
  • pwf_init_parse_query - useful to add more condition to filter products.

do_action ( 'pwf_before_doing_ajax', Int $filter_id )

Fires before get products and count filter items when using Ajax.


Parameters
$filter_id

(int) Filter post id.

Example
<?php
// insidethe plugin folder > includes > compitable-themes > astra > theme.php
// see more examples ciyashop > theme.php

add_action( 'pwf_before_doing_ajax', 'pwf_astra_theme_before_doing_ajax', 10, 1 );
function pwf_astra_theme_before_doing_ajax( $filter_id) {
    $astra_woocommerce_instance   = Astra_Woocommerce::get_instance();
    $astra_ext_woocommerce_markup = ASTRA_Ext_WooCommerce_Markup::get_instance();
    add_action( 'pwf_before_shop_loop', array( $astra_woocommerce_instance, 'shop_customization' ), 20 );
    add_action( 'pwf_before_shop_loop', array( $astra_woocommerce_instance, 'woocommerce_init' ), 10 );
    add_action( 'pwf_before_shop_loop', array( $astra_woocommerce_instance, 'shop_page_styles' ), 20 );
    add_action( 'pwf_before_shop_loop', array( $astra_ext_woocommerce_markup, 'common_actions' ), 999 );
}
?>

do_action ( 'pwf_before_shop_loop', Int $filter_id )

Fires before products loop start


Parameters
$filter_id

(int) Filter post id.

Example
<?php
// insidethe plugin folder > includes > compitable-themes > dfd-ronneby > theme.php
// see more examples astra > theme.php, ciyashop > theme.php
// dt-the7 > theme.php, hongo > theme.php

add_action( 'pwf_before_shop_loop', 'pwf_ronneby_theme_customize_before_shop_loop', 10, 1 );
function pwf_ronneby_theme_customize_before_shop_loop( $filter_id ) {
	remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );
	remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 );
	remove_action( 'woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_link_open', 10 );
	remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_product_link_close', 5 );
	add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 11 );
}
?>

Filters

  • pwf_filter_id - applied to the filter id at run time useful with WPML plugin.
  • pwf_html_result_count - applied to the HTML Woocommerce result count that comes from ajax.
  • pwf_html_pagination - applied to the HTML Woocommerce pagination that comes from ajax.
  • pwf_wc_setup_loop_args - similar as the Woocommerce filter wc_setup_loop_args.
  • pwf_woo_filter_product_loop_template - applied to the template content-product.
  • pwf_woo_products_loop - applied to the wp_query before get products.

apply_filters ( 'pwf_html_result_count', string $result_count, Int $filter_id, array $args )

Change Woocommerce HTML result count.


Parameters
$result_count

(string) HTML result count.

$filter_id

(int) Filter post id.

$args

(array) contain [ current - per_page - total ];

Example
<?php
// insidethe plugin folder > includes > compitable-themes > consulting > theme.php
// see more examples hongo > theme.php, martfury > theme.php, medizin > theme.php

add_filter( 'pwf_html_result_count', 'pwf_consulting_theme_result_count', 10, 3 );
function pwf_consulting_theme_result_count( $output, $filter_id, $args ) {
	$paged    = $args['current'];
	$per_page = $args['per_page'];
	$total    = $args['total'];
	$first    = ( $per_page * $paged ) - $per_page + 1;
	$last     = min( $total, $per_page * $paged );

	if ( 1 === $total ) {
		$output = esc_html( 'Showing the single result', 'consulting' );
	} elseif ( $total <= $per_page || -1 === $per_page ) {
		$output = sprintf( wp_kses( __( 'Showing all <strong>%d</strong> results', 'consulting' ), array( 'strong' => array() ) ), $total );
	} else {
		$output = sprintf( wp_kses( _x( 'Showing <strong>%1$d–%2$d</strong> of <strong>%3$d</strong> results', '%1$d = first, %2$d = last, %3$d = total', 'consulting' ), array( 'strong' => array() ) ), $first, $last, $total );
	}

	$output = "<p class='woocommerce-result-count'>" . $output . "</p>";
	return $output;
}
?>

apply_filters ( 'pwf_html_pagination', string $html_pagination, Int $filter_id, array $args )

Change ajax pagination HTML.


Parameters
$html_pagination

(string) HTML pagination.

$filter_id

(int) Filter post id.

$args

(array) contain [ total - current - base ];

Example
<?php
// insidethe plugin folder > includes > compitable-themes > enfold > theme.php
// see more examples consulting > theme.php, dfd-ronneby > theme.php, kallyas > theme.php
// ninezeroseven > theme.php, stockie > theme.php, theretailer > theme.php

add_filter( 'pwf_html_pagination', 'pwf_enfold_theme_customize_pagination', 10, 3 );
function pwf_enfold_theme_customize_pagination( $output, $filter_id, $args ) {
	$page_links = paginate_links(
		array(
			'base'      => $args['base'],
			'format'    => '',
			'add_args'  => false,
			'current'   => max( 1, $args['current'] ),
			'total'     => $args['total'],
			'prev_next' => false,
			'prev_text' => false,
			'type'      => 'plain',
			'end_size'  => 3,
			'mid_size'  => 3,
		)
	);

	$num_txt = '<span class="pagination-meta">' . sprintf( __( "Page %d of %d", 'avia_framework' ), $args['current'], $args['total'] ) . '</span>';
	$output  = '<nav class="pagination">' . $num_txt . $page_links . '</nav>';

	return $output;
}
?>

apply_filters ( 'pwf_wc_setup_loop_args', Array $args, Int $filter_id )

Change Woocommerce loop arguments


Parameters
$args

(array) contain [ columns - name - is_shortcode - is_search - is_paginated, total - total_pages - per_page - current_page ];

$filter_id

(int) Filter post id.

Example
<?php
// insidethe plugin folder > includes > compitable-themes > thefox > theme.php
// see more examples dfd-ronneby > theme.php, oceanwp > theme.php

add_filter( 'pwf_wc_setup_loop_args', 'pwf_thefox_theme_add_change_column_numbers', 10, 2 );
function pwf_thefox_theme_add_change_column_numbers( $args, $filter_id ) {
    global $rd_data;
    $cols = '';

    if ( 4 == $rd_data['rd_shop_columns'] ) {
	    $cols = 4;
    } elseif ( 2 == $rd_data['rd_shop_columns'] ) {
	    $cols = 2;
    } else {
	   $cols = 3;
    }

    if ( ! empty( $cols ) ) {
	    $args['columns'] = $cols;
    }

    return $args;
}
?>

apply_filters ( 'pwf_woo_filter_product_loop_template', array $template, Int $filter_id )

Change default Woocommerce template that display products, by default content-product.php


Parameters
$template

(array) ;

$filter_id

(int) Filter post id.

Example
<?php
// insidethe plugin folder > includes > compitable-themes > stockie > theme.php

add_filter( 'pwf_woo_filter_product_loop_template', 'pwf_stockie_theme_customize_product_template', 10, 2 );
function pwf_stockie_theme_customize_product_template( $template, $filter_id ) {
    $grid_type = StockieSettings::get( 'woocommerce_grid_type', 'global' );
    if ( null === $grid_type ) {
	    $grid_type = 'type_1';
    }

    switch ($grid_type) {
        case 'type_1':
	    $template = array(
		    'grid',
		    'product',
	    );
	    break;
        case 'type_2':
	    $template = array(
		    'grid',
		    'product',
	    );
	    break;
        case 'type_3':
	    $template = array(
		    'grid',
		    'product',
	    );
	    break;
        case 'type_4':
	    $template = array(
		    'content',
		    'product-type-4',
	    );
	    break;
        default:
	    $template = array(
		    'grid',
		    'product',
	    );
	    break;
    }
	return $template;
}
?>

JavaScript

  • pwf_filter_js_ajax_done - Jquery event fire after new products add to HTML container, Useful when your theme using jQuery isotope to customize shop layout.
Example
<?php
// insidethe plugin folder > includes > compitable-themes > medizin > theme.php
// see more examples ark> theme.php, atelier > theme.php, brooklyn > theme.php
// ciyashop > theme.php, dfd-ronneby > theme.php, dt-the7 > theme.php, enfold > theme.php, 
// greenmart > theme.php, hongo > theme.php, medizin > theme.php, movedo > theme.php

add_action( 'wp_footer', 'pwf_medizin_theme_add_js_code', 10000 );
function pwf_medizin_theme_add_js_code() {
?>
<script type="text/javascript">
    (function( $ ) {
        "use strict";
        $( document.body ).on( "pwf_filter_js_ajax_done", function() {
            let pwfFilterSetting    = pwffilterVariables.filter_setting;
            let productsContainer   = pwfFilterSetting.products_container_selector;

            $(productsContainer).isotope('destroy');
            $(productsContainer).prepend('<div class="grid-sizer"></div>');
            $(productsContainer).removeAttr('style');
            $(productsContainer).removeClass('loaded');

            let mainProducts = $(productsContainer).closest('.medizin-product');
            $(mainProducts).removeData('MedizinGridLayout');
            $(mainProducts).MedizinGridLayout();
        });
    })(jQuery);
</script>
<?php
}
?>

PWF Woocommerce Product Filters