The code in this download folder enables you to filter products by one or more attributes in WooCommerce. The ajax enabled filter menu is added on all archive page types for the shop page and taxonomy type archive pages like category, tag and custom taxonomy types for attributes like size, color and shape which include terms ( options ) like small, black and round.
You can use any conditional tag to control where the filter form is displayed.
The code works with simple and variable products which use attributes.
Demo Video
The video shows how your prospective customers can filter products by multiple attributes on any archive page type like shop and category archives including custom taxonomy term archive pages.
Code Installation
There’s 2 simple steps :
- Copy and paste the PHP code to the end of your child themes functions file or custom functionality/code snippets plugin.
- Copy and paste the CSS to the end of your child themes style.css file or the customize > additional CSS field.
What Are Attributes
In the context of WooCommerce, product attributes are essentially a specialized form of taxonomy or what some call custom taxonomy types. WooCommerce uses custom taxonomies to manage product attributes like color, size, and any other characteristic that you want to associate with your products.
When you create a product attribute in WooCommerce, it is stored as a custom taxonomy. Standard taxonomies included by default are categories and tags. Each attribute has a unique identifier, often referred to as a “slug,” which is used to distinguish it within the system. These slugs are important when querying products based on attributes, as they define the taxonomy to target in your code.
For example, if you have an attribute named “Color,” and you create a term (option) under this attribute called “Red,” WooCommerce internally represents this as a term in the custom taxonomy associated with the “Color” attribute. The taxonomy name would typically be something like pa_color (where “pa_” is a prefix used by WooCommerce to denote product attributes). You would use this taxonomy name when querying products based on the “Color” attribute.
In this example, product attributes where setup first on the Products > Attributes page and assigned on the single Edit Product screen :
Leave a Reply
You must be logged in to post a comment.