Sticky Calculator

Pro Feature

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.

Screenshot of the Floating Button

To enable it, follow Individual Settings > Sticky Calculator:

Enabling the Sticky Calculator feature

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.

Preview section of the Sticky Calculator

Sticky Calculator Settings

The Sticky Calculator can be displayed in two distinct ways, each with its own method of interaction:

Show as

Floating Button

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.

Floating Button Example

Here you can see the available settings of the Floating Sticky Button:

Settings of the Floating 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.

Multiple Sticky Calculators on the same page

Sticky Banner

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.

Preview of the Bottom Sticky Banner

Here you can see the available settings of the Sticky Banner:

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.

Click Actions

The sticky banner and floating button support eight click actions enhancing user interaction and accessibility:

Click Actions

Scroll to Calculator

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.

Scroll to Calculator

Open Pop-Up

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.

Open pop-up

Pop-up Order Form or Payments

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.

Download PDF

Allows users to download a PDF detailed quote directly with a single click.

Share Invoice

Enables users to quickly share an invoice via email directly from the calculator.

WooCheckout Action After Submit

Redirects users to the WooCommerce checkout page automatically after clicking the button.

Opened WooCheckout Page 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.

WooProduct as Open Modal

Displays a calculator in a modal window on the WooProduct page only, keeping users on the current page while providing product information.

WooProduct Page with Sticky Calculator
WooProduct page with Calculator as open modal

WooCheckout Action on WooProduct Page

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.

WooProduct Page
WooCheckout page after clicking the button

Not Show on Pages

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.

Show Calculator on Background

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.

Appearance of Sticky Calculator

The floating button and sticky banner, along with their elements and SVG icons, inherit the colors and design from the calculator's appearance.

Additional Classes

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.

Last updated

Was this helpful?