WoodMart Theme Setup AJAX Product Filter Tutorial

If you're using the WoodMart Themesand planning to make an e-commerce website, then you can't miss the fact that it comes with a AJAX Product Filter Function. This filter allows customers to quickly filter products by brand, price, color, category and other dimensions without refreshing the page, improving browsing efficiency and reducing bounce rate.

Step 1: Make sure you have the WooCommerce and WoodMart Core plugins enabled!

To use the AJAX Filter, your site must first have two things in place:

1. Installed and enabled WooCommerce plug-in (software component)
2. Installed and enabled WoodMart Core Plug-ins (which are at the core of WoodMart's functionality)

If these two are not installed, first go to the backend [Plugins → Install Plugins] to search and enable them.

Step 2: Configure product attributes and categories

Filters rely on the "Attributes" and "Categories" of a product. You have to define these before the system knows what to filter.

The procedure is as follows:

• Go to [Products → Properties] in the background
• New attributes, e.g., color, size, brand

• Click on "Configure Entry" for each attribute, e.g. add red, blue, white for color.

• When editing a product, in "Product data → Properties", select "Product data → Properties".increasefurthermoretickThe values of the attributes "for product variants" (in the case of variable products) and "visible".

Note: The relevant options will only be shown in the filter if the item actually uses these attributes.

Step 3: Create a Widget Sidebar with Filters

WoodMart recommends using Elementor or the default widget panel to add the(machine) filter. Here's the WordPress nativea side-bar (in software)As an example:

• Go to [Appearance → Gadgets] in the background
• locate Shop sidebar(store sidebar) or create a new widget area of your own!
• Drag in the following gadgets (provided WoodMart Core is enabled):
  • WOODMART Filter by Attribute(for filtering by attributes such as color, brand, etc.)
  • WOODMART Filter by Price(for price range filtering)
  • WOODMART Categories Widget(for filtering by commodity)

• Each filter can be set with a title, display mode (list, dropdown, multiple choice) and other style options
• Save Settings

Step 4: Apply this sidebar to the store page

Now you need to get this filter to appear in the correct page position.

Manner of operation:

• Go to the backend [WoodMart → Theme Settings → Layout→ Sidebar].
• Select Left or Right in the "Shop sidebar position".

• Save Settings

Refresh your site's product listing page and you'll see the sidebar with filters.

Step 5: Enable AJAX Filtering

default (setting) WoodMart The filter is AJAX, which means that the product will be updated automatically when you click on the filter option, and you don't need to refresh the page. But you can also manually check if the relevant feature is enabled.

1. Go to [WoodMart → Theme Settings → Product archive] in the backend.
2. Verify that the following options are enabled:
   • AJAX shop
   • AJAX add to cart
   • Product grid switching (optional)

These features make the entire product page smoother and skip-free, improving the user experience.

Step 6: Set up mobile collapsed filtering

in order to balancemobileTo access the experience, WoodMart offers a "Filter" button for mobile devices, which pops up a sidebar when clicked.

Go to [Theme Settings → Layout] scroll down to the bottom and open it:

• Filters button on mobile
• Filters off-canvas for tablet (turns on pop-up sidebar)

This allows users to tap a button on their cell phone to call out the filtering panel, making the page cleaner and easier to operate.

Troubleshooting

• Filter clicks not responding?
  Check if the page has AJAX mode enabled or if a caching plugin intercepts JS requests.
• Filtering options not showing?
  Ensure that the corresponding attribute or category has been applied to the product, otherwise the system will not generate the filter item.
• Wrong style?
  Try clearing your cache, or turning off CSS Refresh the page after compressing the merge function.

summarize

WoodMart comes with AJAX product filters that are actually very powerful, and when used well, it is an efficient conversion tool. You need to set up the attributes and categories of the products in advance, and then set up the product filter in thea side-bar (in software)You can add the right widgets to the system and build a fully functional screening system in a few minutes.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off