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.

Using WPML Plugin

  1. For each language create a new filter and add filter items to it.
  2. Add PHP code that changes filter id depends on the current language, this way is useful when integrate filter with shop archive.
  3. Go to wpadmin > WPML > languages > and check the option Language filtering for AJAX operations.
Example
  1. The main site language is English and the filter id is 576.
  2. The second language is Arabic and the filter id is 577.
<?php
add_action( 'init', 'pwf_wp_init' );
function pwf_wp_init() {
    add_filter( 'pwf_filter_id', 'pwf_customize_filter_id_for_translate', 10, 1 );
}

function pwf_customize_filter_id_for_translate( $filter_id ) {
    if ( defined( 'ICL_LANGUAGE_CODE' ) && 'ar' === ICL_LANGUAGE_CODE ) {
        if ( 576 === $filter_id ) {
            $filter_id = 577;
        }
    }

    return $filter_id;
}
?>

Analytics Data

Enable analytics data g to WooCommerce > Setting > Products tab > Click on the "Filter" sub tab > set the option analytic to "enable".

To view analytics admin page go to > wpadmin > analytics > filters.

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'.
  • Copy the 'Item Purchase Code' into the field 'Envato Purchase Code' inside WooCommerce > Setting > Products tab > click on the "Filter" subtab.

Introduction to Filter Post Editor

Go to wpadmin > WooCommerce > Filters click add new button on top.

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. To save the filter post, click Save on items panel.
  3. Click the apply button to save settings for the current panel, apply button not save data on the database it only saves date on JavaScript after you finish click save button on items panel.

Filter Settings

Here we explain only some options for filter setting.

General
  • Title - The name of the filter that is only visible in the Admin Panel..
  • Which components to use - When you set the filter to shop page, the filter automatically interacts with pagination, default WooCommerce sorting dropdown menu, results count. For WooCommerce shortcode with filter post, you need to add some CSS class on selector tab also on the page that use filter post shortcode.
Selectors
Here you need to assign CSS class for used components, so JavaScript in the plugin can use it.
  • active Filters selector - Where you need to display active filter items in your page, by default on top of the filter.
Extra
  • Display Filter - selected "Button" mean display filter as toggle button useful when use filter with shortcode.
  • Button toggle state.
  • Number of products - The number of products to display, by default using WordPress option "Blog pages show at most" under setting > reading.
  • Enable browser hash - add hash to URL.
  • API remove columns layout - there is a layout "column" when you add a new item, you can disable it when using API to make it easier for developers to work with nested items array.
Responsive
  • Filtering starts - You can assign when filter get products for Responsive, the best when end-user click apply button.
  • Append the filter to - Controller where do you append stick 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.
  • Width - In pixel, the screen size for responsive.

Filter Item Fields

Most of the items share some options, and easy to understand.

  1. Checkbox. [admin images]
  2. Radio. [admin images]
  3. Dropdown. [You can assign select 2] - [admin images]
  4. Colorlist. [allow to upload image] - [admin images]
  5. Boxlist. [admin images]
  6. Textlist. [with inline style] - [admin images]
  7. Date. [admin images]
  8. Price slider. [admin images]
  9. Button. [admin images]
  10. Column. [Layout] - [admin images]

Item options

  • url key - this is unique inside filter post, it is a friendly version of the item name, and use to add hash in browser URL, and on API.
  • URL key for min price - need to be different from the URL key option
    https://woofilter.mostafaa.net/?min-price=12&max-price=80
  • URL key for max price - need to be different from the URL key option
    https://woofilter.mostafaa.net/?min-price=12&max-price=80
  • URL key for date after - need to be different from the URL key option
  • URL key for date before - need to be different from theURL key option
    https://woofilter.mostafaa.net/?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.
    • Attribute.
    • Category.
    • Tag.
    • Taxonomy.
    • Stock status.
    • Order by.
    • Author.
    • Meta.
  • See more options by - [ Disabled, Scrollbar, More button]
  • Height of visible content - this value depends on See more options by if you select Scrollbar this value controller the height of visible content in percent, if you select More button this value represents the number of items you need to display.
  • Multi Select - enable/disable 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.
  • Display rules - select where to hide this item.

Item Color list

  • Color.
  • Border - the border around the item on frontend.
  • Type - color or upload your own image.
  • Marker - highlight item on frontend when end-user select this item.
  • Style - [ Rounded - Rectangle ].
  • Size - the item size in pixel on the frontend.

Item Box list

  • Labels You can assign display item name on frontend here ex: size attribute is X-Large you can change it XL.
  • Size - box size in pixel on the frontend.

Item Price Slider

  • URL format - format of the price on the browser URL.
    • Parameters through a dash. https://woofilter.mostafaa.net/?price=12-80
    • Two parameters. https://woofilter.mostafaa.net/?min-price=12&max-price=80
  • step - 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.

Add Metadata

  • Meta key - (string) (Required) Metadata key..
  • Meta compare - Operator to test the 'meta_value' [ Operator to test. Possible values are '=', '!=', '>', '>=', '<', '<=', 'LIKE', 'NOT LIKE', 'IN', 'NOT IN', 'BETWEEN', 'NOT BETWEEN', 'EXISTS' ] .
  • Meta type.
  • Meta items. each item contain label [ this display on the frontend ] and value [Custom field value used in meta compare]

Integration Filter with Shop Page

To set which filter post will filter products on an archive [ shop ] page, follow these steps.

  • Go to WooCommerce > Setting > Products tab.
  • Click on the "Filter" subtab..
  • "Filter ID" field, select filter.
  • Click save changes button.

Product Filters Widget

The "Product Filters" widget used to display filter form, you only need to select a filter from dropdown menu field.

Shortcode

use shortcode [pwf_filter id="276"].

Integrate The PWF Plugin Shortcode With Woocommerce Shortcode

  • Create a new filter for the Woocommerce shortcode.
  • Edit filter setting > click tab extra > enable the option "is shortcode".
  • Copy Woocommerce shortcode you add in the page inside the option "Shortcode" textarea.
  • If you add the PWF shortcode inside the sidebar make sure you display the PWF widget on this page yoou can do this step by using WooSidebars or using any similar plugin

Terms count Cached

By default PWF plugin cache terms count for performance.

Set Transient Time
  • Go to WooCommerce > Setting > Products tab.
  • Click on "Filter" subtab..
  • In "Transient time" field, Set transient time in seconds.
  • Click save changes button.
Delete Transient
  • Go to WooCommerce > Status > tools tab.
  • Click on "Filter" subtab.
  • PWF WooCommerce filter transients.

How Enable instock variable products

  • Edit the filter item.
  • Set the option "source of options" to attribute.
  • Set the option Product Varaitions to "on".

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
}
?>

How to Integrate Your Theme with the PWF plugin

Introduction

Most of the WordPress themes compitable with the PWF plugin, without requires add more additional code.

But some WordPress themes have many options that control how a product will be display on the frontend inside the Woocommerce loop, our plugin contain many filters and actions that help you to get the same result when doing ajax to get products list.

Read section Actions and filters

Some WordPress themes using using jQuery isotope to customize shop layout on the frontend, so you need to add jQuery code after the plugin doing ajax to customize products.
The best way to do this you need to ask the theme developer to make a global function, or trigger Javascript event when happens the theme rebuild shop layout.

Examples
The Puca theme

The Puca theme has jQuery event when trigger rebuild the shop layout, so I only add this code.

<?php
add_action( 'wp_footer', 'pwf_puca_theme_add_js_code', 1000 );
function pwf_puca_theme_add_js_code() {
?>
<script type="text/javascript">
	(function( $ ) {
		"use strict";
		$( document.body ).on( "pwf_filter_js_ajax_done", function() {
			$(document.body).trigger('puca_load_more');
		});
	})(jQuery);
</script>
<?php
}
?>
The Medizin theme

The Puca theme has the Javascript function to rebuild the shop layout, so I only add this code.

<?php
add_action( 'wp_footer', 'pwf_medizin_theme_add_js_code', 1000 );
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
}
?>