To effectively manage the selectors for your Dynamic AJAX Product Filters, follow these steps under the Advanced Settings section:
1. Accessing Advanced Settings
- Navigate to: Go to Product Filters in your admin panel.
- Select: Click on Advanced Settings to configure the necessary selectors.
2. Configuring Selectors
Product Selector
The Product Selector targets the product listings on your page. The default value is .products. If your product listings use a different class or ID, input the appropriate CSS selector in the field provided.
Pagination Selector
The Pagination Selector identifies the pagination container that holds the page numbers for navigating through product listings. The default value is .woocommerce-pagination ul.page-numbers. If your theme uses a different structure for pagination, enter the correct CSS selector here.
Product Shortcode Selector
The Product Shortcode Selector is used if you are not utilizing the standard products shortcode for displaying products. Change this to the appropriate shortcode that your site uses to display products, ensuring the filter functions correctly.
3. Saving Changes
After adjusting the selectors, make sure to save your changes to apply the new configurations.
4. Testing
Verify the functionality after making these changes by testing the product filters on the front end to ensure everything is functioning as expected.
By managing these selectors properly, you can customize how your product filters interact with your site’s layout and elements.