WooCommerce Product Filter Modal

The product filter modal allows you to sort and filter products.

Hide This Filter

Select "Hide Filter" on your WooCommerce products block to hide the button that opens this filter modal.

Customize Filter Categories

To customize what categories are shown in this filter, you can use the Filter Categories field on the WooCommerce Products block.

Available parameters 

include - comma separated string, such as: include=1,2,3,4
exclude - comma separated string, such as: include=1,2,3,4
parent - number
search - string
order - ASC or DESC
orderby - string
hide_empty - boolean
slug - comma separated string

Example: order=DESC&orderby=date&slug=womens,pants

Customize Attributes

You cannot choose what attributes are displayed in the filter, but you can hide attributes with CSS. Each attribute has a custom class of [name]-filter. For example, for an attribute with a name of "color" you can hide it with the code:

.color-filter { display: none }

Each button is an ion-chip element, so you can further customize like this:

.color-filter ion-chip { background: black; color: white; }

Attribute Swatches and Images

If you are using a plugin that displays attribute images such as the colors in the image above, you can support that by adding some custom code to your site.

Here is an example of how to display swatches from the Variation Swatches for WooCommerce plugin in AppPresser:

<?php
// Support Variation Swatches for WooCommerce plugin in AppPresser
// put this code in a custom plugin

add_filter( 'appcommerce_attribute_terms', function( $terms ) {
  foreach( $terms as $key => $option) :
      // if you have a different plugin, just replace 'product_attribute_color' with the key from your plugin
      $terms[$key]->attribute_color = get_term_meta( $option->term_id, 'product_attribute_color', 1 );
      $terms[$key]->attribute_image = wp_get_attachment_url( get_term_meta( $option->term_id, 'product_attribute_image', 1 ) );
  endforeach;

  return $terms;
});

Note that you will have to edit this code to support your plugin.