[woocommerce_product_filter_products]

Live Product Display – Dynamic Shop Page Shortcode

The [woocommerce_product_filter_products] shortcode shows the products like on the shop page and works together with the live Product Filters.

The shortcode takes the attributes described below, all are optional and the defaults should be suitable for many deployments.

If you place this shortcode on a page, you basically have a replica of the shop page. If you also add any live filters from this extension, they will interact with the products that it shows and update the set of products that is displayed accordingly.

For example, place the [woocommerce_product_filter] and [woocommerce_product_filter_products] shortcodes together on an empty page to test it:

Editor contents with the shortcodes on the page, this will render a live search field above a dynamic shop section.

Once you have published the page, visit it. The first shortcode renders a live search field and the second a replica of the shop page contents, effectively producing a dynamic or live shop page which responds to searches without the need to reload the page.

Type something in the search field and watch how the set of products is updated to show matching results for your search.

A powerful searchable shop page created with just two of our shortcodes – here it is presenting live search results.

Shortcode Attributes ↑ Back to top

  • columns – The number of product columns to show, the default is “3”.
  • orderby – Used to establish the order in which the products are shown, “menu_order”, “popularity”, “rating”, “date”, “price”, “price-desc”.
  • order – Ascending or descending order, “asc” (the default) or “desc”.
  • per_page – How many products to display per page, the default is “12”.
  • show_prefix – Whether to show the prefix (1), “yes” (default) or “no”.
  • show_suffix – Whether to show the suffix (1), “yes” or “no” (default).
  • show_catalog_ordering – Whether to show the catalog ordering dropdown, “yes” (default) or “no”.
  • show_result_count – Whether to show the number of matching products, “yes” (default) or “no”.
  • show_pagination – Whether to show pagination, “yes” (default) or “no”.
  • taxonomy – Used in combination with the term attribute, limits the set of products to those of the matching terms from the taxonomy (2). Any valid product taxonomy can be used, including product_cat for product category, product_tag for product tags and for product attributes, use the pa_ prefix of the related taxonomy, e.g. pa_size for a Size product attribute.
  • term – You can indicate one or more terms separated by comma to limit the set of products included to those that are related to the chosen terms (2). Recognizes term IDs, slugs and names. Use in combination with the taxonomy attribute. Please refer to (2) in the Notes below if you are trying to use this shortcode and the term and taxonomy attributes with a page builder.

Notes ↑ Back to top

(1) Prefix and Suffix:

  • The prefix is shown before the products and will render the catalog ordering, result count and pagination if these are enabled.
  • The suffix is shown after the products and will also render the catalog ordering, result count and pagination if these are enabled.

(2) The taxonomy and term context can alternatively be established using the shortcode [woocommerce_product_filter_context].

If the [woocommerce_product_filter_products] shortcode is used within a page builder’s block, it will likely be necessary to indicate the taxonomy and term attributes using the [woocommerce_product_filter_context] shortcode to be effective.

WooCommerce - the most customizable eCommerce platform for building your online business.

Back to the top