Customize Loading Effect in Dynamic AJAX Product Filters

To enhance the user experience, you can customize the loading effect that appears while filters are processing. Here’s how to do it:

Accessing the Customize Loader Section

  1. Navigate to the Plugin Settings:
    • Go to Product Filters > Form Manage in your WordPress dashboard.
  2. Scroll Down to the Loader Section:
    • Find the Loader Section and click on the Customize button.
  3. Open the Customization Popup:
    • Upon clicking Customize, a popup window will appear where you can choose or create your loading effect.
customize button

Prebuilt Loading Effects

You can select from six default loading effects:

  1. Basic
  2. Comet
  3. Counter Arcs
  4. Dot Ring
  5. Half Ring
  6. Chase
select loading effect save

Simply select your desired loading effect and click Save to apply it.

Create Custom Loading Effect

If you want to create your own loading effect, follow these steps:

  1. Prepare Your HTML and CSS:
    • Collect the HTML and CSS code for your custom loading effect.
  2. Paste Your Code:
    • In the popup, you will see two text boxes:
      • HTML Code Editor: Paste your HTML code here.
      • CSS Code Editor: Paste your CSS code here.
    • Important: Ensure your HTML includes the following attributes in its parent tag: style="display:none;" and id="loader".
    • Example:
<div id="loader" style="display:none;">Loading...</div>
custom loading effect
  1. Save Your Custom Effect:
    • After pasting your code, click Save to apply your custom loading effect.
  2. Check Your Loading Effect:
    • Refresh your site and test the filters to see your new loading effect in action.

By customizing the loading effect, you can create a unique and engaging experience for users while they interact with your product filters. Whether you choose a prebuilt option or create your own, this feature enhances the overall aesthetic and functionality of your site.