Position before custom selector

Use this setting to customize the insertion point for the “Filters” toggle button enabled by the Visibility setting of annasta filters presets. Enter the selector for the page element before which you wish to insert the “Filters” button.

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).

Creating custom insertion position

For an even better control over the button’s insertion point, you can create an empty/hidden page element with a distinctive id, and then set the custom selector setting to this id. The needed empty element can be inserted either with the help of the the Guttenberg or a 3d party builder, or programmatically in the functions.php of a child theme, for example like so:

function annasta_filters_custom_toggle_button_insertion_id() {
  echo '<div id="annasta-toggle-button-insertion-point" style="display:none;"></div>';
add_action( 'woocommerce_before_shop_loop', 'annasta_filters_custom_toggle_button_insertion_id', 500 ); // set the needed priority

When you have the element ready at the position where you need it, set the Position before custom selector field to its id:


Fixed (floating) toggle button insertion

The Position before custom selector setting will influence the insertion point for the floating “Filters” toggle button enabled by the Fix page position setting. This may lead to visibility issues.

Please clear the Position before custom selector box if the floating “Filters” button becomes invisible or gets overlapped by other page elements.