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 exists in 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.

When you know the ID (or class) of the page element before which you want to insert the button, follow one of the methods below:

1. The simplest way is to use the following JavaScript snippet (which can be added 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 Fix page position option in Appearance > Customize > annasta Filters > “Filters” Toggle Button to achieve the floating button effect. Additional settings of this WordPress Customizer section will allow you to limit the floating effect to the custom screen width, and increase the z-index setting, in case the button gets overlapped by other page elements.