purchase

How to display active filters on the front end?

There are three ways to display active filters on the frontend.

  • Each filter settings has the option called "active Filters selector" under the tab CSS Selectors. If this CSS class exist on the front end the plugin use to dsiplay active filters.
  • Use the widget "Active Filters".
  • use the shortcode [pwf_filter_active_filters].

For Example, To display active filters on the front end at the top shop archive. 

<?php
add_action( 'woocommerce_before_main_content', 'pwf_woocommerce_before_main_content', 5 );
function pwf_woocommerce_before_main_content() {
    echo do_shortcode('[pwf_filter_active_filters]');
}

What is new in version 1.6.9?

Starting From version 1.6.9. The plugin can filter any post type ( Product for Woocommerce, Blog, any custom post type)

  • Add a new filter Go to WPadmin > Filters > add new.
  • Plugin settings page Go to WPadmin > Filters > Settings.
  • Plugin Anyalytics page Go to WPadmin > Filters > Anyalytics.
  • Delete cache terms count Go to WPadmin > Filters > Settings.
  • Regenerate pretty URLs Go to WPadmin > Filters > Settings.

Is the website using WPML plugin?

If there is any issue please, edit each filter and click save and check the website again.

How to create a new filter for Woocommerce?

  1. Go to WPadmin > Filters > add new.
  2. Click the tab Database Query and configure these options
    • Set the option post type to prdouct.
    • Set the option query type to main query.
    • Set the option Pages to Product archive.
    • the option Number of products set this option only when it is different between the numbers of products that brings by ajax than a theme.
    • the option Using Ajax
      • Disable this option when the product's container layout is broken after doing ajax. If you don't need to dsiable this option You can fix it following these tuts.
      • 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.
  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 each filter item.
  7. Click apply button.
  8. Repeat steps from 4 to 7.
  9. Click save.

How to create a new filter for any custom post type?

In this tutorial, you learn how to create a filter for the blog and you can apply the following steps to any custom post type.

  1. Go to WPadmin > Filters > add new.
  2. Click the tab Database Query and configure these options
    • Set the option post type to post.
    • Set the option query type to main query.
    • Set the option Pages to Post archive.
    • the option Posts per page set this option only when it is different between the numbers of products that brings by ajax than a theme.
    • the option Using Ajax
      • Disable this option. it work only with woocommerce product.
  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 each filter item.
  7. Click apply button.
  8. Repeat steps from 4 to 7.
  9. Click save.

The Difference between the main query and the custom query?

The main Query

The main query is the one triggered automatically when WordPress has determined what to show for the request URI.

Examples
  • On archive pages, displaying only posts of one post type( Blog, Shop page, any archive page for a custom post type)
  • On a category or a taxonomy term page, that displays posts for the current category or the current taxonomy term.

The custom Query

Sometimes, you use shortcodes or the page builder blocks to display posts on a specific page.
in this case, follow these steps:

  • You must set the option query type to custom query.
  • For the Woocommerce plugin
    • 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.
    • None WooCommerce Default Shortcode
      • Set the option Shortcode String. to [products limit=3].
      • The limit number must be equals to the number used by custom database query.
      • Set the option Using Ajax. to OFF.
  • For any custom post type
    • Set the option Shortcode String. to [post limit=3]. Replace the post in the previous code with a custom post type name.
    • The limit number must be equals to the number used by custom database query.
    • Set the option Using Ajax. to OFF.

How to create a new filter when you use a custom database query?

Is the same steps you are using to create a new filter, you should only read this section The Difference between the main query and the custom query?

Troubleshooting

In this section, we talk about most issues that could happen when using the PWF Woocommerce Product Filters.


New products didn't display after filtering products
  • Edit the filter settings and click the tab selectors and check the option products container selector.
  • The default value for this option is .products .
  • Sometimes you need to replace this value with the products container selector used in a theme.
  • This value must be unique on the page you.
  • If this value not unique on the page try to add a parent class to it. For example .content .products


The CSS for products container is broken after filtering products.

This issue happens when the theme doesn't use the default Woocommerce template to display products or sometimes the theme uses Woocommerce hooks in the wrong place.

there are two ways to fix this issue:
The pagination doesn't work after filtering products

Please check if the CSS selector for the option Pagination selector is the same as used by the theme.( Edit the filter settings and click tab selectors)


The pagination type load more button or infinite scroll in the PWF plugin doesn't work on the front end.

If your theme support many paginaition types set this option to page numbers (number).


The quick view, add to wishlist, and add to compare buttons didn't work.

This issues happen when the theme or the plugin developer don't attach the jQuery event using event on.

Example

$( document.body ).on( 'click', 'wishlist-btn', function() {
	// This is the best practice to attach the event to the button
	// the code for wishlist button, quick view, compare button is here
});
This issue can fix using different ways
  • Ask the theme or the plugin developer to rewrite jquery code to be like the code above.
  • Ask the theme or the plugin developer to provide a global function that you can use to attach events to the button and you can use this function with our plugin jQuery trigger event.
Example

(function( $ ) {
	"use strict";
	$( document.body ).on( "pwf_filter_js_ajax_done", function() {
		initQuickViewButton();
		initWishlistButton();
		initAddToCompareButton();
	});
})(jQuery);

How to add custom fields?

  • Add a new item.
  • From the source of options set it to Meta.
  • Meta key (string) The meta key name you want to using it to filter products. For example, _weight, _length.
  • Meta compare The operator that is used to compare the meta value.
    • Set this option to = .
    • For more information read this WP_Meta_Query Class
    • Possible values are '=', '!=', '>', '>=', '<', '<=', 'LIKE', 'NOT LIKE', 'IN', 'NOT IN', 'BETWEEN', 'NOT BETWEEN', 'EXISTS'
  • Meta type.
    • Set this option for numbers to NUMERIC, and for string to CHAR.
    • For more information read this WP_Meta_Query Class
  • Meta items. Each meta item contain
    • label this is what is displayed on the frontend.
    • slug This is what is displayed on the browser link ?=weight=2, It can be like the value of the value field.
    • Value This is the saved value in the database.
      This value depends on what you are select in the option Meta compare. It can be an array only when compare is 'IN', 'NOT IN', 'BETWEEN', or 'NOT BETWEEN'.

How to display default stock status?

To display default Woocommerce stock status ( Instock, Out of stock, On backorder).

  • Go to WordPress admin > WooCommerce > settings > products tab > Inventory > check Out of stock visibility option.
  • Add a new item checkbox list or Radio list.
  • From the source of options set it to Meta.
  • Set the option Meta key to _stock_status.
  • Set the option Meta compare to =.
  • Set the option Meta Type to Char.
  • Add three new meta item (in stock, out of stock, on backorder).

How to display stock status for product varaitions?

Dispaying (in stock / out of stock products) for the product variations like color, and size. [Demo]

  • Edit the filter item.
  • Set the option "source of options" to Attribute.
  • Set the option Product Varaitions to ON.
  • Add a new filter item ( checkbox list, radio list, ... ) and set the option "source of options" to stock status.

For example, there is a product that has 4 colors(red, blue, orange, black) and 4 sizes (small, medium, large, x large) suppose that the color red doesn’t exist with all sizes so when a client clicks the red color this product doesn’t display and client can click out of stock to see it.

How to Display Rating Using The Range Slider?

  • Add a new item Range Slider.
  • From the source of options set it to Meta.
  • Set the option source of meta to custom.
  • Set the option Meta key to _wc_average_rating.

How to Integrate the theme with the PWF plugin?

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

How to Change the Woocommerce Template that used to display products?

By default the plugin PWF used content-product.php template, when get products using ajax.

If you need to used custom template to display products list. the template name must start with content-*php if your template name doesn't start with content-*php copy it and rename it to content-*

you can find woocomerce templates in parent or child theme inside folder woocommerce.

Use this code to change template and replace template name with your own.
<?php
add_filter( 'pwf_woo_filter_product_loop_template', 'custom_pwf_loop_template', 10, 2 );

function custom_pwf_loop_template( $template, $filter_id ) {
	$template = 'product-custom-template';
	return $template;
}
?>

Optimization: How to use the Pretty URLs with cache plugins?

Important, Untill now you can't use cache plugins tio cache pretty URLs. We will try to fix this issue as soon as possible.

When you are using a cache plugin on your site and the option 'Page Caching' is enables. To take advantage of this feature with the PWF plugin. Following these steps:

  • goto WooCommerce > Setting > Products tab > Click on the "Filter" sub tab > set the option " Enable Pretty URLs" to on. And set the prefixed string, it could be "pwf" or "filters" or any string.
  • Sometimes you need to flush the rewrite rules. Go to settings > Permalink > and clicking the button save changes.
  • Edite a filter settings and clicking the tab "Query type" and set the option "Using Ajax" to "off".
  • Finally, check your site.

How to open the filter canvas menu using the custom button?

Some WordPress Themes display it's own sticky navigation footer at bottom of the screen on the mobile.

The plugin PWF on responsive display sticky navigation contain two buttons [Filter - Sort] at bottom of the screen on the mobile.

How can you solve This issue?
  1. Use CSS code To hide the plugin sticky navigation.
  2. Create button on the theme sticky navigation or any place.
  3. This button only display depend on filter setting > responsive tab Screen width.
 // Hide plugin sticky navigation
.pwf-sticky-filter {
	display: none !important;
}
 // JS code to display popup filter with your own custom button
$('body').on('click', '.your-custom-filter-button', function( event) {
	event.preventDefault();
	$('.pwf-sticky-filter-button').trigger('click');
});

Price Slider

if the price slider handles doesn't display as a full circular on start and end.

In this case your theme using CSS overflow:hidden. Use chrome inspect to get this CSS class name and make it overflow: visible.

How to add add a custom icon to the Filter Button on Responsive?

Use this CSS code to add your custom icon. 

.pwf-sticky-filter .pwf-sticky-button .pwf-sticky-filter-button .pwf-button-text::before {

	position: absolute;
	display: inline-block;
	left: -20px;             // edit this value
	content: "\e909";        // edit this value
	font-family: "pwficons"; // edit this value
}

PWF Woocommerce Product Filters

purchase Now