Displaying Single Filter Using Button Style Widget

Here’s how to display a filters button style widget using the Dynamic Ajax Product Filter for WooCommerce in various environments: Elementor, Block Editor (Gutenberg), Widget Areas, and PHP code.

1. Using Shortcodes

To display a filter using a button style, you can use the following shortcode:

[plugincy_filters_single name=""] 

Note: The name attribute is required to specify which filter to display.

2. Using Elementor

Steps to Add Dynamic AJAX Filter Widget

  1. Access Elementor: Go to your WordPress admin dashboard, select Pages or Posts, and click “Edit with Elementor.”
  2. Add a New Section: Click on the “+” icon to create a new section.
  3. Insert the Dynamic AJAX Filter Widget:
    • Search for the Dynamic AJAX Filter widget in the Elementor panel.
    • Drag and drop the widget into your section.
  4. Configure the Filter:
    • Select Single from the filter type options.
    • Set the Attribute ID to specify which attribute to filter (e.g., color, size).
  5. Customize Appearance: Use the Style tab to adjust colors, typography, and spacing as needed.
  6. Preview and Publish: Preview the changes and click Update to publish.

3. Using Block Editor (Gutenberg)

Steps to Add Dynamic AJAX Filter Block

  1. Access Gutenberg: Go to your WordPress admin dashboard, select Pages or Posts, and click to edit the desired page.
  2. Add a Block:
    • Click the “+” icon to add a new block.
    • Search for the Dynamic AJAX Filter block.
  3. Configure the Block:
    • Select Single from the filter type options.
    • Input the Attribute ID for the filter you want to display.
  4. Customize Appearance: Use the block settings to adjust styles as needed.
  5. Preview and Publish: Preview the page and click Update to save your changes.

4. Using Widgets

Steps to Add Dynamic AJAX Filter to Sidebar, Header, or Footer

  1. Access Widgets: In your WordPress admin dashboard, go to Appearance > Widgets.
  2. Select Widget Area: Choose the sidebar, header, or footer where you want to add the filter.
  3. Add Dynamic AJAX Filter Block:
    • Drag and drop the Dynamic AJAX Filter block into your chosen widget area.
  4. Configure the Filter:
    • Select Single from the filter type options.
    • Set the Attribute ID for the filter.
  5. Save Changes: Click Update or Save in the widget area to apply the changes.

5. Using PHP Code

To display the filter using PHP, you can embed the following shortcode in your theme’s template files:

<?php echo do_shortcode('[plugincy_filters_single name=""]'); ?>

Note: Ensure to replace the empty string with the required filter name.By following these steps, you can effectively display a filters button style widget using the Dynamic Ajax Product Filter for WooCommerce across different platforms: Elementor, Block Editor, Widgets, and PHP code. This integration enhances user experience by allowing customers to easily refine their product searches.