Plugin Requirements
- WordPress version 5.4.2+.
- WooCommerce plugin version 4.3.0.
Installation
- Download the plugin from your download page on codecanyon.net "Installable WordPress file only".
- Login to your WordPress Dashboard.
- Go to Plugins > Add New.
- Click “Upload Plugin” at the top.
- Upload the pwfwoofilter.zip file.
- Once installed, click “Activate Plugin”.
- Go to WooCommerce > filters to add new filter.
Automatic updates
- Download the plugin from your download page on codecanyon.net "Installable WordPress file only".
- Upload the plugin folder "pwfwoofilter" into the wp-content/plugins/ directory of your WordPress site.
- Active the plugin.
Update automatically
Download this plugin Envato Market WordPress Plugin
How To Translate The Plugin ?
- Download the POEDIT.
- Open the Poedit > file > open > select file wp-content/plugins/pwfwoofilter/languages/pwf-woo-filter.pot.
- Get your language code from here
- 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.
- Finally, start translate this file.
Using WPML Plugin
- For each language create a new filter and add filter items to it.
- Add PHP code that changes filter id depends on the current language, this way is useful when integrate filter with shop archive.
- Go to wpadmin > WPML > languages > and check the option Language filtering for AJAX operations.
Example
- The main site language is English and the filter id is 576.
- 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.
- The left side shows a list of filter items.
- The right side contains settings for the current item or filter settings. To save the filter post, click Save on items panel.
- 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.
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.
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
}
?>