Sticky Calculator
Last updated
Last updated
The Sticky Calculator feature adds a floating button or sticky banner to your pages, keeping the calculator visible as users scroll. Both options provide easy access at any time, enhancing usability and engagement. This setting is straightforward to enable and can be adjusted to fit any page layout.
To enable it, follow Individual Settings -> Sticky Calculator:
On the right side of the page, you'll see a preview of the sticky calculator. Your changes will be displayed here immediately, helping you visualize how the calculator will look on the page.
The Sticky Calculator can be displayed in two distinct ways, each with its own method of interaction:
This option displays the calculator as a clickable button that remains in a fixed position on the screen. When clicked, the button can either open the calculator in a pop-up window or scroll the page to the calculator. This flexibility allows users to interact with the calculator without leaving their current position on the page, maintaining a clean and attractive user interface while ensuring easy access to its functionalities.
Here you can see the available settings of the Floating Sticky Button:
Position - choose where the floating button will be displayed.
Icon - indicate the icon to display on the floating button. You can use the default icon, upload your own icon in JPG, JPEG, PNG, WEBP, GIF, and SVG formats, or choose to hide the icon entirely.
Title - select the title to be displayed on the floating button. If you choose the Custom Title option indicate it to the designated area.
Select Total - choose which total(s) to display on the floating button. If multiple totals are selected, their sum will be shown.
When multiple calculators are set as floating sticky buttons, they will appear side by side on the pages.
As an alternative, the calculator can be configured as a sticky banner located at the top or bottom of the page. When a user clicks on the banner, it can either scroll to the calculator's location or open the calculator in a pop-up window. This ensures the calculator remains highly visible and accessible at all times. Unlike the floating button, the sticky banner also includes an additional description section, allowing for more detailed information about the calculator to be shared, providing a direct and enriched point of interaction for users.
Here you can see the available settings of the Sticky Banner:
Position - choose where the sticky banner will be displayed.
Icon - indicate the icon to display on the sticky banner. You can use the default icon, upload your own icon in JPG, JPEG, PNG, WEBP, GIF, and SVG formats, or choose to hide the icon entirely.
Title - select the title to be displayed on the sticky banner. If you choose the Custom Title option indicate it to the designated area.
Description text - enter the general description of your calculator or any short text to attract users
Select Total - choose which total(s) to display on the sticky banner. If multiple totals are selected, their sum will be shown.
Button Text - Enter the text for the button.
Only one calculator can be used with a sticky banner. Any additional calculators set to use a sticky banner will automatically become floating buttons!
The sticky banner and floating button support eight click actions enhancing user interaction and accessibility:
This action automatically scrolls the user to the section of the page where the calculator is embedded, providing a seamless navigation experience directly to the tool.
When this action is selected, clicking on the button or banner opens the calculator in a pop-up window. This allows the user to interact with the calculator without navigating away from their current position on the page.
Opens an order form with calculation results and payment options in a pop-up, facilitating immediate action from the user.
Values should be indicated to the calculator beforehand or you can indicate some default values in your calculator to avoid zero value in total and charge users.
Allows users to download a PDF detailed quote directly with a single click.
Do not forget to enable PDF Entries in Global Settings to make the function work.
Enables users to quickly share an invoice via email directly from the calculator.
Click Action will be disabled if the setting is OFF.
Do not forget to set up SMTP settings to make email sending work.
Redirects users to the WooCommerce checkout page automatically after clicking the button.
Values should be indicated to the calculator beforehand as clicking the button shares the total amount to WooCommerce after clicking the button. You can also set some default values to your calculator so that even without touching the calculator, the total price will not be zero.
This click action works only once WooCheckout is ON.
Displays a calculator in a modal window on the WooProduct page only, keeping users on the current page while providing product information.
This click action works only once WooProducts is ON.
Initiates a checkout process immediately after clicking the button, streamlining the buying process on the WooProduct page only. In this case, Sticky Calculator will not be displayed on the other page.
This click action works only once WooCheckout and WooProducts are ON.
In click actions Scroll to Calculator, Open a pop-up, Download PDF, Share Invoice, and WooChecout action after submit there is one extra setting called Not Show on pages. With the help of it, you can indicate the pages where you do not want to display the sticky calculator. On other pages, they will be displayed.
In click actions Pop-up order form or payments, Download PDF, Share Invoice, WooCheckout action after submit, and WooCheckout Action on WooProduct Page there is another additional setting called Show Calculator in the background. If you disable the setting, the calculator will not be displayed on the pages where it was placed, but only a floating button or sticky banner will be displayed according to your choice.
The floating button and sticky banner, along with their elements and SVG icons, inherit the colors and design from the calculator's appearance.
At the bottom of the settings, there is an area to specify additional CSS classes for the Sticky Calculator. These classes will be added to the floating button or sticky banner by the Cost Calculator. You can define these classes in the appearance section of your WordPress, just like other additional classes, giving you more control over the appearance of the Sticky Calculator.
