Filters

Starter uses default woo filter feature (supported price and attributes filters) extended by custom cool features.
Widget area for add filters to archive is 'Archive product'.
How to work with default woo filter widgets - there are a lot info in internet, for example official docs https://docs.woocommerce.com/document/woocommerce-widgets/ or see below Filter display types GIF example.

📄〽️〰️ Display types

Fitlers has two custom selects for setup display type on front.

How to use

1. Open widgets
2. Add fitler (or expand existing) and setup display types for dekstop and mobile (by default used 'list' type)

Filter display types GIF example

How it works?

To filter class fork inc\woocommerce\filterclass-wc-widget-layered-nav.php added ACF Filter widget for dekstop/mobile display types and added required minimum markup for dropdown and collapse. Filter diplay type settings handled via css woo/_filters.scss.

🔴⚫🔵 Color filter

How to use

1. Open any attribute
2. Add color

Color filter GIF example

How it works?

To filter class fork inc\woocommerce\filterclass-wc-widget-layered-nav.php added ACF Color taxonomy and required minimum markup. Styled in file woo/_filters.scss.

💭 Frontend filter logic

Default woo uses for filter links: by each click page reloads with new query string in URL.
Starter uses fork of default woo filters inc\woocommerce\filterclass-wc-widget-layered-nav.php where link logic replaced into checkboxes: by each click filter only getting select status (checkbox checked or unchecked) without page reloading, i.e. in fact filters are collects via js filters.js. When user selected filters - he can submit form and page reloads.

Frontend filter logic GIF example

In future for filters will be added ajax support so all will works without reloads.

Code

• ACF: Filter widget and Color taxonomy
• css: woo/_filters.scss
• js: filters.js
• tpl:
  • woocommerce/archive-product.php:
    • <!-- get active filters - used when 'No products found' so .js_form_filter form is empty --> - get active filters
    • <!-- filters --> - filters markup
  • woocommerce/content-widget-price-filter.php - ovverride default woo price filter tpl
• logic:
  • inc/woocommerce/filter/filter.php - unregister default attr fitler and register fork; customize price filter layout - add data from ACF; Change Price Filter Widget Increment; customize text in Sort select; Register Archive page widget area
  • inc/woocommerce/filter/class-wc-widget-layered-nav.php - fork of default woo Widget filter