Add customizable buttons that allow users to mark items as favorites, clear all their saved favorites, or view their total favorites count. This feature enhances interactivity on your Elementor-powered website, giving users a more personalized experience.
General#
- Button Type: Choose what action the button performs on your site:
- Toggle Favorite – Lets users add or remove an item from their favorites.
- Clear All Favorites – Allows users to remove all saved favorites in one click.
- Favorites Count – Displays the total number of items a user has marked as favorite.
- User Access: Define who can interact with the favorite functionality. You can set it to:
- All Users – accessible to everyone, including guests.
- Logged-in Users – only available for signed-in users.
Button#
The Button section provides extensive customization for both the "Add" and "Remove" states.
- Button Text: Set the text displayed on the button, such as "Add to Favorites" or "Remove from Favorites."
- Button Icon: Choose an icon from the icon library or upload your own to visually represent the favorite action.
- Icon Position: Select the icon’s position relative to the text — left or right.
- Icon Spacing: Adjust the space between the icon and the button text for perfect alignment.
Loading Indicator#
Enhance user experience with a visual loading effect when the favorite action is processing.
- Enable Loading Indicator: Toggle this option to show a loading animation while the favorite action is being performed.
- Preview Indicator: Enable this to preview the loading animation directly in the Elementor editor.
- Loading Icon: Select a custom icon to represent the loading state — for example, a spinner or progress icon.
- Icon Size: Adjust the size of the loading icon to fit your design preferences.
Tooltip#
- Enable Tooltip: Toggle this option to show a tooltip when hovering over the button.
- Preview Tooltip: Enable this to preview the tooltip directly in the Elementor editor.
- Text: Enter the text that appears inside the tooltip — for example, "Add this item to your favorites"
- Position: Choose the tooltip's position relative to the button (top, bottom, left, or right).
- Horizontal offset: Shift the tooltip horizontally to fine-tune its position.
- Vertical offset: Adjust the tooltip's vertical distance from the button.
- Delay (ms): Set a delay (in milliseconds) before the tooltip appears after hover.
- Transition In (ms): Define how long the tooltip takes to fade or slide in.
- Transition Out (ms): Set the duration for the tooltip’s fade or slide-out animation.
- Translate X / Translate Y: Apply horizontal or vertical motion effects to the tooltip’s entrance or exit transitions.
- Scale: Adjust the scaling effect for a subtle zoom animation when the tooltip appears.