Venues and events
The cost of driving to you.
Content / widget · Elementor module
Travel Fuel Cost Planner Widget Plugin for Elementor
A trip fuel calculator: visitors enter the distance, their fuel use and the fuel price, in kilometres or miles, and see the fuel needed and the cost, there and back and per person.
Included in All AccessClassic Elementor widgetFrom $29 USD / year
Complementor / Travel fuel cost plannerProduct preview
Text, style and layout controls inside Elementor
01 / Interactive demonstration
Try it
These are the actual published widgets. Change any number to see the cost update.
02 / Inside WordPress
Travel fuel cost planner controls in Elementor
Fields sets the units, the labels and starting values for distance, fuel use and price, the currency symbol, offering a return trip and whether it starts ticked, and splitting between people. Behaviour sets the button text; Display the heading, results heading, note and an icon. The Style tab covers the text, colours, fields, button, gap, alignment, accent and results background.
03 / Website use cases
Where to use travel fuel cost planner
Visitors planning a drive to a venue, holiday cottage or event want to know what the fuel will cost before they set off. This widget lets them enter the distance, their car’s fuel use and the fuel price, in kilometres and litres per 100 km or in miles and miles per UK or US gallon, and shows the fuel needed, the cost, the cost per kilometre or mile and, if they share the drive, the cost each, there and back if they tick it. It updates as they type and runs in the browser; nothing is sent anywhere.
Holiday lets
Fuel for the trip from home.
Car and travel blogs
Compare cars or routes.
04 / Installation and setup
How to add a fuel cost calculator in Elementor
Start with Complementor installed and your license connected. Enable this module in the WordPress library, then configure it in Elementor.
Install Complementor, connect your license and enable Travel fuel cost planner in the Complementor library.
Add the widget to your travel, venue or event page.
Choose kilometres or miles, and the currency symbol.
Fill in a starting distance, such as the drive from the nearest city.
Set the accent colour and button text.
05 / Content and style controls
Customize travel fuel cost planner in Elementor
Configure the settings available for this module to suit the page you are building.
Kilometres and litres, or miles and UK or US gallons.
Fuel needed, cost, cost per kilometre or mile.
There and back with one tick.
Split between the people travelling.
Updates as visitors type.
Your shop’s currency symbol by default.
06 / Choose the right approach
Travel fuel cost planner and Elementor alternatives
Compare the existing Elementor workflow with this Complementor module before choosing your setup.
ACF location distance
How far apart two places are.
Manual data bar chart
A few numbers as bars.
07 / Requirements and compatibility
Travel fuel cost planner compatibility with Elementor
- Requires Elementor.
- Visitors enter the distance, fuel use and price.
- An estimate; real consumption varies.
Complementor uses classic Elementor APIs. Atomic-native controls are not implemented. Check your theme, cache and integrations on a staging site before release.
08 / Common setup problems
Troubleshoot travel fuel cost planner
Check these settings if the published page behaves differently from the editor.
Why does it say to enter numbers?
A field is empty; enter the distance, fuel use and price.
Why is the cost too high in miles?
Check UK or US gallons: a US gallon is smaller, so the same mpg uses more fuel.
Can visitors type a comma for decimals?
Yes. 52,3 is read as 52.3.
Travel fuel cost planner plugin questions
Does it need Elementor Pro?
No. It works with the free version of Elementor.
Is anything sent to a server?
No. The sums run in the visitor’s browser.
Does it know fuel prices?
No. Visitors enter the price; you can set a starting price.
Does it work out the distance?
No. Visitors enter it; you can set a starting distance.
Is it accessible?
Yes. Every field is labelled, results are announced when they change, and the fields are large enough to tap.
10 / Annual All Access subscription
Get travel fuel cost planner with Complementor
This module is included with all 1007 current Complementor solutions. Choose your production website allowance; every plan includes the same modules.
One website
$29USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $29 USD each year.
A few websites
$49USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $49 USD each year.
More websites
$99USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $99 USD each year.
Applicable taxes extra. Annual subscriptions renew automatically unless canceled in your customer account. Elementor Pro is required for Exclude current post. Read the terms and 14-day technical-issue refund policy.