AC’s Auto Loan Calculator

Now includes native WordPress block editor support.

The AC Auto Loan Calculator Plugin (live demo) with support for down payments, date-based payment schedules, and interactive charts. The calculator helps users estimate monthly payments, affordable car price, required down payment, or loan amount.

Supports 90 currencies, seven date formats, and 15 languages.

Now highly customizable via extensive configuration options.

Choose from four predefined sizes or customize via the configuration options. Fully responsive with touch support.

Rebranding with your site’s name is supported and encouraged.

The plugin works via:
(a) Shortcode in posts/pages
(b) Widget area
(c) Template file
(d) NEW: Native WordPress block (WordPress 6.3+)

See usage under installation for details.

NEW: Upgrade to the free AC Auto Loan Calculator Plus v2.0 for a printable schedule.

Either (a) upload the fc-auto-loan-calculator folder with all its files to the /wp-content/plugins/ folder or (b) unzip the plugin’s zip file in the /wp-content/plugins/ directory.

Activate the plugin through the Plugins -> Installed Plugins menu in the WordPress admin dashboard.

Upgrading

Version 3.0 adds optional native Blocks. Existing v2.x shortcode, template, and sidebar placements and saved settings continue to work without site changes. No automatic conversion is performed. Older WordPress versions retain the existing insertion methods.

Usage

There are four ways to add the calculator to a page. Use only one auto loan calculator per page, including calculators placed in templates or sidebars. You can use different methods on different pages within a site:

1. In the block editor (WordPress 6.3 or later), insert the AC Auto Loan Calculator block and configure it using the block settings sidebar, as described below.
2. Add the shortcode [fcautoloanplugin] in the content area of your page or post and optionally configure the shortcode parameters. In a block editor, you can also paste the shortcode into a Shortcode block.
3. Add the following code to your template where you want the calculator to appear. See below for options.
4. If your theme supports widgets, add the plugin to a widget area through the Appearance -> Widgets menu in WordPress.

Using the AC Auto Loan Calculator block

1. Open a page or post in the WordPress block editor. Click +, search for AC Auto Loan Calculator, and select it. You can also find it in the Widgets category.
2. Select the calculator block. Open the editor’s settings sidebar if it is hidden, then select the Block tab.
3. Under Loan values, set the initial price, down payment, loan amount, number of months, and interest rate. Leave one of price, down payment, or loan amount at zero for the calculator to determine it, or supply consistent values.
4. Use Layout and visibility to choose a size and which controls to show. Under Branding, enable Link to and enter your brand name if desired. Use Currency and date to choose the default conventions, and Style options. to customize colors, fonts, and widths.
5. Each setting’s Reset button restores that setting’s shortcode default. The preview updates as you change settings, including all five inputs and four populated, disabled result fields. Use the page preview to calculate or open schedules, charts, and dialogs.
6. Save or update the page to publish your settings. Move the calculator between other blocks using the editor’s normal move or drag controls.

Block settings are separate from legacy widget settings. The editor preview reflects the configured defaults without applying saved browser currency/date preferences; visitors’ saved preferences continue to apply on the published page. Existing shortcode, template, and widget placements do not need to be converted to blocks.

The editor warns about other recognizable calculator blocks or shortcodes. Calculators inserted through templates or sidebars cannot always be detected, so check that the page contains only one calculator.

Shortcode parameters

“|” means or, thus “tiny” | “small” | “medium” | “large” means pick one (include the quote marks!). Example: sc_size=”medium” Do NOT put spaces around the equal sign.

* sc_size="tiny" | "small" | "medium" | "large"
* sc_custom_style="No" | "Yes"
* sc_add_link="No" | "Yes"
* sc_brand_name=""
* sc_hide_resize="No" | "Yes"
* sc_price="35000.0"
* sc_dwn_pmt="2000.0"
* sc_loan_amt="0.0"
* sc_n_months="48"
* sc_rate="5.5"
* sc_currency="999" (see: the file currency_and_date_conventions.txt)
* sc_date_mask="999" (see: the file currency_and_date_conventions.txt)
* sc_theme_base_font_size="16px"
* sc_theme_primary_color="#28a745"
* sc_theme_primary_color_hover="#218838"
* sc_theme_primary_color_light="#30c853"
* sc_theme_primary_color_text="#fff"
* sc_theme_primary_color_text_inverse="#fff"
* sc_theme_background_muted="#f7f7f7"
* sc_theme_background_color_disabled="#efefef"
* sc_theme_background_calculator_color="#fff"
* sc_theme_background_modal_color="#fff"
* sc_theme_border_color="#dee2e6"
* sc_theme_text_color="#333333"
* sc_theme_tooltip_text_color="#fff"
* sc_theme_shadow_color="rgba(0, 0, 0, 0.1)"
* sc_theme_primary_font_family_stack="Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif"
* sc_theme_mono_font_family_stack="'Roboto Mono', 'Source Code Pro', ui-monospace, monospace"
* sc_calculator_min_width_tiny="150px"
* sc_calculator_max_width_tiny="250px"
* sc_calculator_min_width_small="200px"
* sc_calculator_max_width_small="300px"
* sc_calculator_min_width_medium="200px"
* sc_calculator_max_width_medium="400px"
* sc_calculator_min_width_large="200px"
* sc_calculator_max_width_large="440px"
* sc_hide_intl_conventions="No" | "Yes"
* sc_hide_payment_method="No" | "Yes"

Examples (the first explicitly supplies the effective shortcode defaults):

[fcautoloanplugin sc_size="large" sc_custom_style="No" sc_add_link="No" sc_brand_name="" sc_hide_resize="No" sc_price="35000.0" sc_dwn_pmt="2000.0" sc_loan_amt="0.0" sc_n_months="48" sc_rate="5.5" sc_currency="999" sc_date_mask="999" sc_theme_base_font_size="16px" sc_theme_primary_color="#28a745" sc_theme_primary_color_hover="#218838" sc_theme_primary_color_light="#30c853" sc_theme_primary_color_text="#fff" sc_theme_primary_color_text_inverse="#fff" sc_theme_background_muted="#f7f7f7" sc_theme_background_color_disabled="#efefef" sc_theme_background_calculator_color="#fff" sc_theme_background_modal_color="#fff" sc_theme_border_color="#dee2e6" sc_theme_text_color="#333333" sc_theme_tooltip_text_color="#fff" sc_theme_shadow_color="rgba(0, 0, 0, 0.1)" sc_theme_primary_font_family_stack="Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif" sc_theme_mono_font_family_stack="'Roboto Mono', 'Source Code Pro', ui-monospace, monospace" sc_calculator_min_width_tiny="150px" sc_calculator_max_width_tiny="250px" sc_calculator_min_width_small="200px" sc_calculator_max_width_small="300px" sc_calculator_min_width_medium="200px" sc_calculator_max_width_medium="400px" sc_calculator_min_width_large="200px" sc_calculator_max_width_large="440px" sc_hide_intl_conventions="No" sc_hide_payment_method="No"]

[fcautoloanplugin sc_size="small" sc_custom_style="Yes" sc_hide_resize="Yes" sc_currency="83" sc_date_mask="2"]

[fcautoloanplugin sc_custom_style="No" sc_add_link="Yes" sc_brand_name="Friendly Mortgage" sc_hide_resize="Yes" sc_price="0" sc_loan_amt="30000" sc_n_months="60" sc_rate="5.5"]

NOTE: Include only the shortcode options you want to change. Leave one of price, down payment, or loan amount at zero for the calculator to determine it, or supply three consistent values (price minus down payment equals loan amount).

Optional array parameter passed to show_fcautoloan_plugin()

The values available for template options are the same as the shortcodes above except you must change “sc_” to “op_”.

<?php show_fcautoloan_plugin(array('op_size' => "large",
    'op_custom_style' => "No",
    'op_add_link' => "No",
    'op_brand_name' => "",
    'op_hide_resize' => "No",
    'op_price' => "35000.0",
    'op_dwn_pmt' => "2000.0",
    'op_loan_amt' => "0.0",
    'op_n_months' => "48",
    'op_rate' => "5.5",
    'op_currency' => "999",
    'op_date_mask' => "999",
    'op_theme_base_font_size' => "16px",
    'op_theme_primary_color' => "#28a745",
    'op_theme_primary_color_hover' => "#218838",
    'op_theme_primary_color_light' => "#30c853",
    'op_theme_primary_color_text' => "#fff",
    'op_theme_primary_color_text_inverse' => "#fff",
    'op_theme_background_muted' => "#f7f7f7",
    'op_theme_background_color_disabled' => "#efefef",
    'op_theme_background_calculator_color' => "#fff",
    'op_theme_background_modal_color' => "#fff",
    'op_theme_border_color' => "#dee2e6",
    'op_theme_text_color' => "#333333",
    'op_theme_tooltip_text_color' => "#fff",
    'op_theme_shadow_color' => "rgba(0, 0, 0, 0.1)",
    'op_theme_primary_font_family_stack' => "Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif",
    'op_theme_mono_font_family_stack' => "'Roboto Mono', 'Source Code Pro', ui-monospace, monospace",
    'op_calculator_min_width_tiny' => "150px",
    'op_calculator_max_width_tiny' => "250px",
    'op_calculator_min_width_small' => "200px",
    'op_calculator_max_width_small' => "300px",
    'op_calculator_min_width_medium' => "200px",
    'op_calculator_max_width_medium' => "400px",
    'op_calculator_min_width_large' => "200px",
    'op_calculator_max_width_large' => "440px",
    'op_hide_intl_conventions' => "No",
    'op_hide_payment_method' => "No"
)); ?>

Notes:

1. If you want to add your brand to the calculator, the *_add_link option must be set to “Yes” (i.e. create a subtle follow link to AccurateCalculators.com).
2. When branding, the brand name will be added before “Auto Loan Calculator”.
3. If _custom_style is set to “Yes”, the plugin will load dist/css/accurate-calculators-custom.css within the plugin folder. You can modify the styles as needed. I suggest that you only include CSS selectors in this file that you actually change.
4. The plugin is built and tested on HTML5/CSS3 pages.
5. size (min-width): tiny: 150px, small: 200px, medium: 200px, large: 200px
6. size (max-width): tiny: 250px, small: 300px, medium: 400px, large: 440px
7. The modals used for showing the schedule, currency select, help, etc are Bootstrap 5 modals. If your site uses an earlier Bootstrap version, you may have issues. Please contact me.
8. Website developers can set a default currency sign and preferred date format by setting <op/sc>_currency and <op/sc>_date_mask respectively. Set one or both to an integer value. For the list of integers to support 90 plus currency symbols and 7 date format options, see the file currency_and_date_conventions.txt in the plugin’s root folder. (example: India, Indian Rupee: ₹1,23,45,678.99 = 83)

Enhanced Internationalization

Supports 90+ currency symbols (with proper number formatting) and 7 date formats (e.g., mm/dd/yyyy, dd/mm/yyyy, yyyy.mm.dd). If no saved user preference or website default is available, the calculator uses the browser’s locale to choose currency and date conventions.

For example, a visitor whose browser uses a supported Japanese locale will initially see amounts in Japanese yen, regardless of where the website is hosted, unless saved preferences or website defaults override that choice. However, website developers can override this behavior using shortcodes or function options. If enabled, users can also manually select their preferred currency and date format.

How the plugin determines the currency symbol and date format:
1. The plugin first uses saved user preferences from the browser’s local storage, if present. Hiding the conventions control does not erase previously saved preferences.
2. Otherwise, a website default for currency or date format (a value other than 999) is used.
3. Otherwise, the plugin maps the browser’s locale to supported currency and date conventions.
4. If no supported convention is found, the plugin defaults to U.S. dollar formatting and MM/DD/YYYY. Currency and date preferences are resolved independently.

Language Translations

As of v1.5, the plugin supports 14 languages in addition to English.

Each language below links to a page where you can test all seven plugins in that language—no installation needed.

Supported Languages:
– da – Dansk – Danish
– de – Deutsch – German
– es – Español – Spanish
– fi – Suomalainen – Finnish
– fr – Français – French
– hu – Magyar – Hungarian
– it – Italiano – Italian
– lt – Lietuvių – Lithuanian
– nl – Nederlands – Dutch
– pl – Polski – Polish
– pt – Português – Portuguese
– ro – Românesc – Romanian
– ru – Русский – Russian
– sv – Svenska – Swedish

Notes:
1. The plugin loads translations for the site’s “Site Language” setting in WordPress when matching language files are available. PHP interface text uses .MO files; JavaScript text uses .JSON files.
– Example: The included Portuguese translation uses pt_PT (Portugal). To adapt it for Brazilian Portuguese, copy the .PO translation, set its locale to pt_BR, and regenerate both the .MO and JavaScript .JSON catalogs. Retain the plugin prefix in filenames: fc-auto-loan-calculator-pt_BR.mo and fc-auto-loan-calculator-pt_BR-fc-i18n-auto-loan.json. Renaming only the .MO file does not update JavaScript translations.

1. A translation template file (.POT) is included in the languages folder. Website owners can use a POT/PO file editor to translate the plugin into any WordPress-supported language. A fluent speaker can also edit an included .PO file and regenerate the .MO and JavaScript .JSON files to alter a current translation.

2. Contribute Your Edits!

   • If you enhance a translation and would like to share it, I will regenerate the .MO and, if needed, the .JSON files for you.

Support

I’m happy to provide support for all my plugins! If you have a question or run into an issue, please visit the WordPress plugin’s support forum and post your question.

When submitting a request, please:
– Specify whether you’re using the original plugin or the “Plus” version.
– Provide a link to the page where the plugin is installed.

Including a direct link to the affected page can help me diagnose and resolve the issue more quickly.

Other Calculators

As of now, AccurateCalculators.com offers seven plugins in the WordPress Plugin Directory, with additional plugins available on the website. All plugins share a consistent feature set, styling, and functionality, ensuring a seamless look and feel across your site.

Below are links to each plugin’s page in the WordPress Plugin Directory.

1. Auto Loan Calculator – solves for several unknowns and creates a payment schedule.
2. Loan Calculator – a general purpose loan calculator with amortization schedule and charts.
3. Mortgage Calculator – optionally incorporates points and insurance and creates a payment schedule
4. Retirement Age Calculator – answers, at what age will I be able to retire given my investment plan?
5. Retirement Nest Egg Calculator – answers, what will be the value of my retirement fund when I retire?
6. Retirement Savings Calculator – how much do I have to invest periodically to reach my retirement goal?
7. Savings Calculator – calculates the results of regular savings and investing

Also

New seven, free, Plus plugins with printable schedules.

1. 

   The AC Auto Loan Calculator's front end showing 2 of the 4 configurable sizes with different color settings.

2. 

   Example of the loan schedule showing payment due dates and a detailed loan summary.

3. 

   Creates three interactive c-harts for visualization.

4. 

   A portion of the plugin's settings dialogue, as seen under Appearance -> Widgets page in WordPress's administration area.

5. 

   With "Payment Method" hidden from user.

Can the Auto Loan Calculator plugin be used on a commercial website?

Yes. Your use is appreciated.

If you’re a financial blogger, consider adding a “Calculators” or “Tools” section to your site and including all my calculators. More content equals more opportunity.

Does your plugin have any embed advertising?

Absolutely not.

Is your plugin self-contained?

Yes. 100% of the plugin is installed on your server. There are no external dependencies.

Does the plugin include any backlinks?

No visible backlinks are included by default. Setting add_link to Yes adds two links to AccurateCalculators.com: one around the calculator title and one around the copyright text. Adding your brand name also requires add_link to be Yes.

Is the calculator plugin responsive?

Yes. In fact, I use it on a Bootstrap v5.x responsive site.

Does the calculator support touch devices?

Yes. Users use the calculator with all types of devices.

What are the differences between the “Plus” version of your plugins and the “Non-Plus” versions?

1. The “Plus” version allows the payment schedule to be printed. The base plugin’s Print button prints the calculator itself.
2. The “Plus” version includes all PHP and CSS source code, but not the JavaScript source code.
3. The “Plus” version sends to my site the domain name you install it on. I may link to your site to provide an example of the plugin’s use. (The plugin collects no other information.)

Both versions insert thousands separators while users type, making large numbers easier to enter.

3.0

• Added optional native WordPress block support, with sidebar controls for auto loan defaults, layout, branding, currency/date conventions, and appearance. Requires WordPress 6.3 or later.
• Fixed legacy widget/settings form field names and security-token validation so default values, branding, and appearance settings save correctly.
• Fixed dialog initialization in browsers without requestIdleCallback: the fallback now preserves calculator callback context and initialization callbacks.
• Added translation support for block editor controls and messages using the existing translation text domain.
• Corrected the plugin homepage URL in structured metadata to point to the base Auto Loan Calculator rather than Auto Loan Calculator Plus.
• Removed obsolete commented-out code and unused update-check constants; corrected GPL license notices in source and generated assets.

2.1.1 (development milestone)

These changes are being held for a future release with native WordPress block support.
* Refactored the JavaScript and PHP into smaller functions and separate modules to support block integration.
* Bug fix: Calc now preserves the selected start-of-period or end-of-period payment method. Previously, clicking Calc reset the selection to end-of-period.

2.1

• Enhancement: Improved compatibility with page builders – specifically Elementor and Avada Builder (formerly Fusion Builder).
• Enhancement: Improved screen reader accessibility.
• Enhancement: A few CSS style tweaks.

2.0

• Improved design responsiveness, particularly at smaller screen sizes.
• Added dozens of easily configurable display and style options. No programming required.
• Added support to hide the “payment method” via an option setting.
• Many technical changes (dropped jQuery, Featherlight, updated to Bootstrap 5).
• Improved the overall quality of all the language translations.

Supported and updated continuously since 2016. See: changelog.txt