Filter Archive Pages

IntroductionIntroduction

WP Grid Builder offers the possibility to filter results from archive pages without the need to use a grid made with the plugin. This means that you can use facets in your archive pages to filter results.

If you use Elementor plugin, you can use the Elementor add-on of WP Grid Builder instead of using the following method.

Depending on the theme or site builder you use, it may not work or create conflicts, especially if the results are layout with JavaScript.

PrinciplePrinciple

By default, this feature is disabled. To make it work, you need to enable the option Filter Custom Content in the plugin settings panel.

Plugin Settings - Filter Custom Content
Plugin Settings – Filter Custom Content

Once this option is activated, WP Grid Builder will try to detect the main query of the page and will inject a hidden element (at the beginning of the loop), used to filter the results.

In order to filter the archive page results, you also need to set wpgb-content as grid name in the facet shortcode as follows: [wpgb_facet id="1234" grid="wpgb-content"]

LimitationsLimitations

Some themes use a custom query instead of the main query generated by WordPress. In this case it will not work because WP Grid Builder will not be able to detect the main query from archive pages.

In most cases, the pagination of the archives will be in conflict with the facets. To avoid conflicts, you should use the pagination facet instead of the pagination of the archive pages.
You can use the following snippet to remove pagination from the archive pages:

PHP
functions.php
function remove_archive_pagination( $query ) {

	if ( is_archive() ) {
		$query->set( 'no_found_rows', true );
	}
}

add_action( 'pre_get_posts', 'remove_archive_pagination' );

To remove the pagination from WooCommerce you can use theses snippets:

PHP
functions.php
remove_action( 'woocommerce_before_shop_loop', 'woocommerce_pagination' );
remove_action( 'woocommerce_after_shop_loop', 'woocommerce_pagination' );

When using WooCommerce you may also need to remove catalog ordering and result count:

PHP
functions.php
remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );
remove_action( 'woocommerce_before_shop_loop', 'woocommerce_result_count', 20 );

These snippets may not work with all themes and archive pages.
Theme authors should be able to provide such snippets in order to remove paginations.

WooCommerce ExampleWooCommerce Example

If you need to filter shop page results of WooCommerce you simply need to edit the Shop page and to insert facet shortcodes as follows:

Storefront - Facet Shortcodes
Storefront – Facet Shortcodes
Storefront - Shop Page
Storefront – Shop Page

To remove paginations, result count and catalog ordering from Storefront theme, you can use this snippet to add in functions.php file of your child theme:

PHP
functions.php
remove_action( 'woocommerce_before_shop_loop', 'storefront_woocommerce_pagination', 30 );
remove_action( 'woocommerce_after_shop_loop', 'woocommerce_pagination', 30 );
remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering' );
remove_action( 'woocommerce_after_shop_loop', 'woocommerce_catalog_ordering' );
remove_action( 'woocommerce_before_shop_loop', 'woocommerce_result_count', 20 );
remove_action( 'woocommerce_after_shop_loop', 'woocommerce_result_count', 20 );

Page Builder ExamplePage Builder Example

The following screenshots show an example of using facet shortcodes, with wpgb-content as grid name, to filter the results of archive pages made with Oxygen Builder plugin:

Oxygen Builder - Archive Query
Oxygen Builder – Archive Query
Oxygen Builder - Archive Class Name
Oxygen Builder – Archive Class Name
Oxygen Builder - Easy Posts Archive
Oxygen Builder – Easy Posts Archive
Oxygen Builder - Repeater Archive
Oxygen Builder – Repeater Archive