Changing the “Filters” toggle button position

If you need to adjust the “Filters” toggle button position, you can customize its insertion point to the one before some other page element with the unique ID, class, or unique combination of classes. To do that, you will need to either choose the suitable HTML element that already exists on the pages of your site, or create an empty invisible element (in WordPress / Elementor / other editor, or programmatically) with a unique class or ID, for example annasta-filters-toggle-button, at the needed position.

While the instructions of the current tutorial are still valid, we would like to attract your attention to the fact that the dedicated Position before custom selector option has been introduced in version 1.6.1 of the plugin to replace the need for the programmatic approach. The new option allows the submission of the custom toggle button insertion point directly from the admin interface (see the annasta Filters > Plugin settings > “Filters” toggle button settings section)

To programmatically adjust the insertion point for the toggle “Filters” button, find (or create) the page element before which you wish to insert the button, and follow one of the methods below:

1. Customize the following JavaScript snippet, and add it in annasta Filters > Plugin settings > Custom JavaScript or anywhere else you prefer:

if( 'undefined' !== typeof( awf_data ) ) {
  awf_data.togglable_preset.insert_btn_before_container = '#main';
}

2. If you have a theme of your own, or use a child theme, you can add the following filter to the theme’s functions.php file:

add_filter( 'awf_js_data', function( $js_data ) {
  $js_data['togglable_preset']['insert_btn_before_container'] = '#main';
 
  return $js_data;
} );

Whichever way you choose, please replace the “#main” value of the insert_btn_before_container property with the needed jQuery selector. Use the # symbol before the element ID (for example #annasta-filters-toggle-button), or dot in front of classes (for example .class or .class-1.class-2.class-3 for the unique combination of classes).

You are also welcome to use the annasta Filters > Plugin settings > “Filters” toggle button settings > Fix page position option and its additional settings in Appearance > Customize > annasta Filters > “Filters” Toggle Button to achieve the floating button effect. Additional options of the WordPress Customizer section will allow you to limit the floating effect to the custom screen width, and increase or decrease the button’s z-index setting in cases of page elements overlap.