Displaying Chips Widget for Currently Selected Values

Here’s how to display a chips widget that shows currently selected filter values using the Dynamic Ajax Product Filter for WooCommerce in various environments: shortcodes, Elementor, Block Editor (Gutenberg), Widgets, and PHP code.

chips widget

1. Using Shortcodes

To display the currently selected filter values, you can use the following shortcode:

[plugincy_filters_selected]

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 in your layout.
  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 Selected from the filter type options.
    • This will display the currently selected filters in a chips format.
  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.
chips widget in elementor

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 Selected from the filter type options.
    • This will allow the display of currently selected filters in a chips format.
  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.
chips widget in block editor

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 chips widget.
  3. Add Dynamic AJAX Filter Block:
    • Drag and drop the Dynamic AJAX Filter block into your chosen widget area.
  4. Configure the Filter:
    • Select Selected from the filter type options.
    • This will show the currently selected filters in chips format.
  5. Save Changes: Click Update or Save in the widget area to apply the changes.
chips widget in widget area

5. Using PHP Code

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

<?php echo do_shortcode('[plugincy_filters_selected]'); ?>

By following these steps, you can effectively display a chips widget showing currently selected filter values using the Dynamic Ajax Product Filter for WooCommerce across different platforms: shortcodes, Elementor, Block Editor, Widgets, and PHP code. This enhances user experience by allowing customers to see their active selections clearly, making it easier to manage their product searches.