WoodMart Product Filter Setup Tutorial: A Complete Guide to Price, Brand and Attribute Filtering

in using WoodMart ThemesWhen building a mall website, product filtering is a very critical part of the process. When buyers browse the store, they can quickly find the right products, almost all rely on the filters in the sidebar. WoodMart theme comes with a powerful filtering system that supports filtering by price, brand, color, size, material and other conditions, and does not require the installation of additional plug-ins.

Image[1]-WoodMart Product Filter Setup Tutorial: A Complete Guide to Price, Brand & Attribute Filtering

This post takes you step-by-step through how WoodMart's filters work, how to set price ranges, brand lists, and various product attributes.

I. Filter's Core Plugin: WoodMart Product Screening Widget

Products from WoodMartfiltering functionIt mainly relies on its own widgets. You can find a set of filter modules called "WoodMart Layered Nav" in Appearance → Widgets (or Customize → Widgets).

Image[2]-WoodMart Product Filter Setup Tutorial: A Complete Guide to Price, Brand & Attribute Filtering

To enable these modules, first make sure your store page layout supports sidebars, then just drag these widgets to the store sidebar location.

Image [3]-WoodMart Product Filter Setup Tutorial: A Complete Guide to Price, Brand and Attribute Filters

Second, set the price filter function

Price filters are one of the most common and useful features. woodMart offers a sliding price range module that allows users to freely select a price range.

Setting method:

  • In the left background menu, click [Appearance] → [Widgets].
  • Find it."Shop filters"This area, click to expand.
  • Click "+" button to add a new gadget.
  • Search in the pop-up window:WoodMart Price Filter maybe Product Filter by PriceThe
Image [4]-WoodMart Product Filter Setup Tutorial: A Complete Guide to Price, Brand & Attribute Filtering
  • Select it and click Add.
  • Enter a title (e.g. "Filter by Price") and click [Update] in the upper right corner to save.
Image [5]-WoodMart Product Filter Setup Tutorial: A Complete Guide to Price, Brand and Attribute Filters

Once it's displayed on the frontend, users will be able to pull the price slider and freely select a price range.

If the price screening does not respond, check:

  • Are all products priced?
  • Whether or not the site has WooCommerce default sorting enabled
  • Whether Ajax filtering is enabled
Image [6]-WoodMart Product Filter Setup Tutorial: A Complete Guide to Price, Brand & Attribute Filtering

Third, set the brand filter function

WoodMart supports commodity brand filtering, but the brands themselves are not WooCommerce Default Category. You need to create the brand attribute first.

The steps are as follows:

  • Backend → Products → Properties
  • Add a new attribute, such as "brand".
Image [7]-WoodMart Product Filter Setup Tutorial: A Complete Guide to Price, Brand and Attribute Filters
  • On the product edit page, assign a brand to each product
Image [8]-WoodMart Product Filter Setup Tutorial: A Complete Guide to Price, Brand and Attribute Filters
  • Back to Appearance → Widgets
  • Drag in the "WoodMart Layered Nav" widget.
  • Select the attribute "Brand".
Image [9]-WoodMart Product Filter Setup Tutorial: A Complete Guide to Price, Brand and Attribute Filtering
  • Once saved, the frontend will display the brand list filter

This module will automatically list all the brands, click on a brand to filter the corresponding products.

If you want your brand to appear as a logo icon, you can set the image for each brand item in "Products → Properties → Branding".

Fourth, set the color, size and other attributes filtering

Attributes like color and size are set in a similar way to branding:

  1. Backend → Products → Properties
  2. Create property names, such as "Color" or "Size".
  3. Add multiple sub-options, such as red, blue, green; or S, M, L
  4. In the product edit page, add these attribute values to the product
  5. Go back to the Widgets area and add the "WoodMart Layered Nav" module.
  6. Select the corresponding property item

Required if you want the color to show up as a color block instead of text:

  • In the "Properties" settings, set the type to "Color".
  • Specify the corresponding color value for each color item, e.g. #ff0000 for red.

The frontend will then display the color block, click on the color block to filter.

Image [10]-WoodMart Product Filter Setup Tutorial: A Complete Guide to Price, Brand and Attribute Filters

V. Enable Ajax no-refresh filtering experience

WoodMart Support Ajax FilteringIn other words, the page will not be refreshed as a whole after the user filters the conditions, but will only partially update the product list, which makes the browsing smoother.

Open the way:

  • Backstage → WoodMart → Theme Settings
  • Go to "Product archive" settings.
  • Find "AJAX shop" and turn it on.
  • Save Settings
Image [11]-WoodMart Product Filter Setup Tutorial: A Complete Guide to Price, Brand and Attribute Filters

This feature is turned on by default, but if you find that the page jumps or refreshes overall after filtering, you can come here to make sure it's enabled.

VI. Optimize filtering order and display

In the case of more commodities and attributesstoreIn the middle, it is recommended to rationalize the order of the filters, for example:

  • Put the price filter first
  • Then there's the brand.
  • Then attributes such as color and size
  • Finally, put the clear filters button ("Reset filters").

This way, users can browse with a clearer mind and are less likely to miss key options.

In addition, WoodMart's filters support collapsing and expanding, so if you have a lot of filters, you can turn on the "collapsible" option to save space.

VII. Troubleshooting common problems

Problem 1: No product is displayed after filter click?

  • The product has not added the corresponding attribute
  • Commodity not released
  • Attribute misspellings or case inconsistencies

Problem 2: The price slider does not display or slides abnormally?

  • Product price is set to 0 or empty
  • Some currency plugins may affect slider logic

Question 3: Products disappear after combining multiple filters?

  • It is possible that there is no intersection between the options
  • It is recommended that the user be guided through the filtering step by step and that the conditions be reset using the "Clear Filter" button.

summarize

WoodMart ThemesThe built-in filtering system is very complete, price, brand, color, size and so on can be easily set, no need to install additional plug-ins. As long as you plan the attribute structure, configure the widgets, and turn on Ajax filtering, you can create a shopping page with a smooth experience and clear categorization.


Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!
Customer Service
Customer Service
Tel: 020-2206-9892
QQ咨詢(xún):1025174874
(iii) E-mail: info@361sale.com
Working hours: Monday to Friday, 9:30-18:30, holidays off
? Reprint statement
This article was written by Little Lin
THE END
If you like it, support it.
kudos1446 share (joys, benefits, privileges etc) with others
commentaries sofa-buying

Please log in to post a comment

    No comments