alovio

WordPress / Alovio Calculator

Embedding & themes

Place an Alovio Calculator with a shortcode or block, choose one of six themes, and set your currency formatting.

Once a calculator is built, you embed it on a page, pick a theme, and set how the currency reads. All three live in the calculator’s settings or the editor.

Shortcode

Every calculator has a shortcode with its ID:

[alovio_calculator id="12"]

Paste it into any page, post, or a shortcode-capable widget. The id is shown in the builder and in your calculators list.

Block

In the WordPress block editor, add the Alovio Calculator block and pick the calculator from the dropdown. The block and the shortcode render identically — use whichever fits your workflow.

Because the calculator renders with its own self-contained styles and plain JavaScript, it works in any theme and in any page builder that supports shortcodes or blocks.

Themes

Choose one of six themes per calculator so it matches your site:

ThemeLook
ClassicA clean studio card
MinimalAn editorial, ledger-style layout
MidnightDark glass
SoftRounded, pastel
BoldHigh-contrast, neo-brutalist
SlateCompact, dashboard-style

Set an accent colour (default a warm orange, #f97316) to tint buttons and highlights to your brand.

Currency formatting

Each calculator formats its own currency so totals read correctly for your market:

  • Symbol — e.g. $, €, £.
  • Position — symbol before or after the number.
  • Decimals — 0 to 4 places.
  • Thousands separator — e.g. , or a space.
  • Decimal separator — e.g. . or ,.

For example, before / , / . gives $1,250.00, while after / . / , gives 1.250,00 €.

Next