Using WPML Plugin

Important start from version 1.5.5 you can translate the filter and ignore these steps.

Notes when you translate the filter.
  • Create the filter using the main language.
  • After you create the filter and sure is everything is well.
  • Translate the filter like any post.
  • Important tip, Each time you update the filter post you need to edit translated post and save it again.
  • Go to wpadmin > WPML > languages > and check the option Language filtering for AJAX operations.

Before the plugin version 1.5.5, you need to follow these steps.
  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;
}
?>

Elementor Pro

Build the shop archive using the plugin Elementor

  • Read this Creating a WooCommerce Shop Page.
  • Edit the filter setting and click the tab query type and set the option query type to main query.
  • Set the option Archive Pages to Shop archive.
  • Display this filter on the shop archive page on the frontend using PWF shortcode or Widget.

Elementor Widget/Shortcode

When you try using the Elementor products widget in pages. For example, create an on sale page.

  • Edit a page with Elementor Pro, then add products widget.
  • The page only contains one Elementor widget "products" if the page contains more than products widget you need to add the CSS class use-pwf-filter for the widget that will be using the PWF filter.
  • Create a new filter.
  • Edit filter setting > click the tab query type and set the option query type to custom query.
  • From the option Pages, select the page you need to display the filter.
  • Set the option Shortcode Type to Plugin Elementor pro.
  • Display this filter on this page on the frontend using PWF shortcode or Widget.

Powerpack Pro

Build the shop archive using the plugin Powerpack Pro

Powerpack Widget/Shortcode

  • Edit a page with Elementor, then add "Woo - products" widget. (the page only contain one widget "Woo - products")
  • Create a new filter.
  • Edit filter setting > click the tab query type and set the option query type to custom query.
  • From the option Pages, select the page you need to display the filter.
  • Set the option Shortcode Type to Plugin PowerPack pro for Elementor.
  • Display this filter on this page on the frontend using PWF shortcode or Widget.

Divi Shop Builder Pro

This plugin doesn't use the main query to display products on the shop archive page. the plugin uses the Woocommerce shortcode and defines custom hooks to generate products layout.

Follow these steps

  • Create a new filter.
  • Edit filter setting > click the tab query type and set the option query type to custom query.
  • From the option Pages, select the shop page.
  • Set the option Shortcode Type to default WooCommerce shortcode.
  • From the option Shortcode string add this [ products limit=16].
    the limit attribue must be equal to posts_per_page you set in widget Woo shop + settings
  • Set the option Using Ajax to OF.

PWF Woocommerce Product Filters