Changing the “Filters” toggle button position

To customize the position of the “Filters” toggle button you can use the [annasta_filters_toggle_button] shortcode or the options of the “Filters” toggle button settings section of the annasta Filters > Plugin settings admin tab.

To achieve the floating button effect, enable the annasta Filters > Plugin settings > “Filters” toggle button settings > Fix page position option. Use the additional settings in Appearance > Customize > annasta Filters > “Filters” Toggle Button for the further customization of button appearance.

Change the toggle button position programmatically

To customize the insertion point of the “Filters” toggle button programmatically, you will need to find or create a suitable HTML element with unique ID, class (for example annasta-filters-toggle-button), or combination of classes. An empty invisible element can be created in WordPress / Elementor / other editor, or programmatically. When you have your HTML element ready, you can 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).