Please tell a friend about us. Thank you.

Below is just one example of how the FC Auto Loan Calculator plugin for WordPress might look (and work) when displayed from the content area of a website or blog. You can select from 4 predefined sizes or customize it as needed. Installation is simple. More below...»

Keep Your Visitors On Your
Website or Blog!
You work hard both to build a site and to attract visitors. Keep them there. Put my calculators on your site rather than link to another site's calculator. Add as many plugins or widgets as you like and improve your bounce rate and increase your advertising opportunities.
Your Brand Name Here
Auto Loan Calculator
Enter a "0" (zero) for one unknown value above.

  Original Size  
Paste these shortcodes in the page's content editor for above result:
[fcautoloanplugin sc_size="medium" sc_custom_style="No" sc_add_link="yes" sc_brand_name="Your Brand Name Here" sc_hide_resize="No" sc_price="35500.0" sc_dwn_pmt="5500.0" sc_loan_amt="0.0" sc_n_months="60" sc_rate="5.5"]

This plugin is also available for download at WordPress.org

The FC Auto Loan Calculator calculates the monthly payment as well as the affordable car price, down payment required or the loan amount. It will create a detailed amortization schedule showing date based payments as well as a set of colorful charts. A site's users can select their own currency and date convention used in loan schedule. Ideal if site attracts visitors from around the globe. Four predefined sizes or modify CSS file to customize size and colors. Supports touch and a responsive designed website. Auto Loan Calculator Plugin is based on and uses the code from my Auto Loan Calculator.

Rebranding with your site's brand name is supported and encouraged.

The plugin may be

  1. used in a post or page's content area via a shortcode; or
  2. used in a sidebar widget area; or
  3. called from any template file.

Installation

  1. Either
    1. upload the fc-auto-loan-calculator folder with all its files to the /wp-content/plugins/; or
    2. unzip the plugin's zip file in the /wp-content/plugins/  folder.
  2. Activate the plugin through the Plugins -> Installed Plugins menu in WordPress

Usage

There are 3 mutually exclusive ways you can deploy the calculator to an individual page (though you can use all three methods on different pages within a site):

  1. Add the shortcode [fcautoloanplugin] in the content area of your page or post and configure shortcode parameters.
  2. Add the following code to your template where you want the calculator to appear.
    • <?php show_fcautoloan_plugin(); ?>
  3. If you are using widgets, just add the plugin to the sidebar through the Appearance -> Widgets menu in WordPress. Be sure to click Save.

Shortcode parameters

  • sc_size= "tiny" | "small" | "medium" | "large"
  • sc_custom_style= "No" | "Yes"
  • sc_add_link= "Yes" | "No"
  • sc_brand_name=
  • sc_hide_resize= "No" | "Yes"
  • sc_price=
  • sc_dwn_pmt=
  • sc_loan_amt=
  • sc_n_months=
  • sc_rate=

Shortcode Examples:

Copy and paste to page's or post's content area.

First example includes all options.

Optional array parameter passed to
show_fcautoloan_plugin()

This can be copied and pasted to a template part.

Valid values for options are the same as the shortcode above.

Notes:
  1. When setting default values for the calculator (price, down payment, loan amount), one should be set to "0" so when the user clicks the "Calc" button, there will be an unknown value to calculate.
  2. If you want to add your brand to the calculator, the _add_link option must be set to "Yes".
  3. When branding, your brand name will be added before "Auto Loan Calculator".
  4. If _custom_style is set to "Yes", the plugin will load fin-calc-widgets-custom.css located in the plugin's CSS folder. If you set the option to "Yes" without making any changes, the calculator will change to a horrendous red which indicates the custom css is being used.
  5. The plugin is built and tested on HTML5/CSS3 pages. (DOCTYPE XHTML 1.0 Transitional has been tested as well.)
  6. max-width: large: 440px, medium: 340px, small: 290px, tiny: 150px
Questions? Problems? Compliments? :)
Tell me how you made out installing the plugin. If you have any issues with it, you can provide a link to your page in the comment and I'll take a look. Or, for that matter, if you want to show this site's visitors how you are using the plugin, you can leave a link for that reason as well.

42 thoughts on “auto-loan-calculator-plugin

  1. I am having a small issue with your plug in. I would like to disable the help section unless the user clicks on help or just eliminate the help section all together. Is there a way to do this. When I place the calculator into the area I want on my website, the added help screen is so large it takes up more space than the calculator does. I need to have a way to turn this off before I can use it on my site.
    Thanks for the help. It really looks like what I want on my site. We would be willing to pay for this option.
    Bryan

    • At first, I thought I understood what you are asking, but now I’m not sure. Normally, the user should see the help text ONLY if they click on the Help button. Are you saying you see it without clicking on the button? Or are you saying that after you click no the button, the space taken up by the help is too large?

      The plugin, when installed on your page, should work exactly like the plugin installed on this page. The help text is not visible anywhere unless the Help button is clicked. If your installation doesn’t work like that, and if you downloaded the plugin before Thursday, please download again and update your installation. Some changes were released Thursday that may rectify this issue. If not, let me know and I’ll take a look (do you have a test page I can see?).

      • Thank you for your quick reply.  You will see that the help menu automatically loads no matter what choices I make. I have tried what you suggested and I still get the same result. The following page is using the widget function. http://015.c91.myftpupload.com/vehicle-loans
        Let me know if you have any other ideas.

        • Bryan, thanks for the link. It was really helpful. In the admin section of your WordPress installation, you should see an update for the plugin to v1.1.1. Please install that and give it a try.

          Seeing your installation, I also saw 2 other issues that needed to be fixed. The resize buttons below the calculator were missing the “+” and “-” sign. And the currency / date dialog wasn’t working correctly on your site. Currently, if you click on the “$ : MM/DD/YYYY” in the lower right when the conventions dialog opens, there is a semitransparent overlay over the dialog box that prevents the user from clicking on the Cancel or Save buttons. V1.1.1 fixes that too (I hope).

          • Your fix worked on my website and everything seems to work fine with your widget, but it broke my link to contact us on that page. If you click on the contact us (contact our loan department) on the page it just flashes up and then disappears, instead of pulling up the contact page. If there is something I can change in my coding to fix both I can do that too. I just am not sure what on your coding is causing my forms not to work correctly.
            Thanks again. You have been very prompt with this. If we can get this working I will definitely be contributing to your plugin as the support has been great and we really like the information it will give to our customers.

          • Well, I’m happy to hear that the fixed worked, at least partially. I see what you mean about the contact form. I’m not able to study the code this moment, perhaps later this evening. But what I think might be going on is the contact form is having a Z-INDEX value set that is too low. Are you familiar with Z-INDEX which is located in the CSS or might be set from the JavaScript?

            If so, what value is set? Can you try 100000?

          • Bryan, I did look at your installation again. I don’t see an obvious fix. My guess about Z-INDEX is wrong. There’s a few things we can look at. You are using Bootstrap, right? What version? The plugin uses v3.3.6 for the currency / date modal. If your version is different, perhaps Twitter made a change and the 2 versions are not compatible. In that case, I would have to remove the modal or you could change version.

            Another option would be for you to wrap your modal code in another div with a unique id assigned such as “contact-wrapper” or some such thing. This would give it a different root node from the root my modal has to use (<body>). We may get lucky and that would fix it.

            One other option, I saw while browsing your site (very nice, by the way) on some pages the contact form exists at the bottom of the page. Can you change to that design for the page the plugin is on?

          • I talked to support for the site back end that I am using. This was their reply:
            Unfortunately the issue isn’t the z-index but the trigger. You can try using the below CSS to change the z-index but it won’t help because the modal is automatically set to display none.
            So they agreed with you on the z-index. I reconstructed the mortgage page and used the extra white space for the form. I can’t really do that with the vehicle page, and I tried using your suggestion, but the modals on my site are controlled by the creator, so I believe the issue is hard coded into the site. If you have any ideas or ways I can edit your module I can give them a try. Could I some how tell your widget to open another page for the charts or whatever part of the widget that is conflicting. Thanks for the quick reply and all of the help. 🙂

          • You’re very welcome. I’d like to see us resolving this however. THen we can really smile.

            It’s hard for me to debug since I can’t step through the code with breakpoints as it’s executing.

            Do you understand what trigger they are talking about? And whose code is setting the display none? I’m pretty sure the problem has to do with conflict between the Bootstrap modals (are we using the same version of Bootstrap?). My widget only uses one Bootstrap modal, and that’s for the date / currency option. To remove it, 2 things have to happen, 1 the html has to be removed, and 2 the Javascript has to be removed.

            We can first try removing the HTML. Look in the \EN\ folder for the file: calculator.gui.php

            Starting at about line 604, remove or comment out, everything between these 2 comments:

            Save the file. And do a hard refresh on the page with the plugin.

            Does that fix the problem?

            If not, try renaming this file in \js\;

            bootstrap.custom.min.js

            And do a hard refresh and try the plugin again. It may not work with the entire file not loaded, but lets see what happens.

          • I found out if I remove the lines out of the calculator starting with 604 as you indicated and also renamed the file in the js folder, everything on the page works. Your calculator continues to work as far as I can tell also. Where do we go from here? Can I just leave that stuff out. Our customers have to be local to our area, so I don’t think they would ever need to change any of those options.
            Let me know what I need to do for the auto loan calculator also.
            Thanks for all of the help.
            B

          • Happy to hear that. As long as the calculator works, you are all set. I guess you tried it by first just removing the HTML? You also had to rename the JavaScript file? That file has some code that impacts aesthetics. No calculations are in it.

            You may also want to remove the line that looks like this:

            <div class=”foot”><div class=”cr”>©2016 <?php echo ((strtolower($add_link) == ‘yes’) ? ‘<a href=”https://financial-calculators.com” target=”_blank” data-toggle=”tooltip” data-placement=”right” title=”click for more advanced calculator by financial-calculators.com”>financial-calculators.com,<br>all rights reserved</a>’ : ‘financial-calculators.com,<br>all rights reserved’) ?></div><div id=”CCY” data-toggle=”tooltip” data-placement=”right” title=”click to change currency or date format”>$ : mm/dd/yyyy</div></div>

            in the same file where you removed the other HTML. You have to remove it in the section of code for the size you’ve selected. in one of these places: line 114, 229, 342 or 464.

            You don’t have to remove this, but your users will see a feature that they don’t have access to.

          • The only thing I notice today is that when that page is loaded on a web browser, it hangs for a second or two like it is trying to load something. this could be unrelated to the widget, but I didn’t notice it before. Is there a reference I need to remove so it is not looking for the js file? Yes I did remove the html first, but that didn’t fix it. I had to remove the html and rename the js file to fix the issue.

          • I’m sure removing the file is not slowing the load down so much that you would notice a difference in loading. You can prove this to yourself by watching the page load in the browser’s debugger.

            Nonetheless, the reference can be removed. In root folder of the plugin, find this file: fc-autoloan-calculator.php

            Down at about line 314, find this block of code:

            // register supporting JavaScript libraries and Bootstrap
            wp_register_script('fc-supporting', plugins_url('js/supporting.WIDGETS.min.js', __FILE__), array('jquery'), '', true);
            wp_register_script('fc-custom-bootstrap', plugins_url('js/bootstrap.custom.min.js', __FILE__), array( 'jquery' ), '', true);
            // load the JavaScript math library
            wp_register_script('fc-auto-interface', plugins_url('js/interface.AUTOLOAN-WIDGET.min.js', __FILE__), array( 'jquery', 'fc-custom-bootstrap', 'fc-supporting'), '', true);

            Remove or comment out the bold code. Make sure to get the comma in the 2nd row.

            I was thinking about his issue. Because you added the calculator to the page, the comments stopped working. And we approached this as a problem with the calculator, which is fine. But that’s not necessarily the case of course. We could ask the question, why didn’t the other modal (contact form) play nicely? There are several calculators on this site that has multiple modals that can be opened. No special coding required.

            Whose modal is set to display “none”, as their support mentioned?

            But as long as you have it working and you are happy, that’s what counts.

  2. Hi, we have a number of car dealers interested in the product in the UK.. I don’t know if you can help with these questions

    Can we force the default currency to be UK pounds
    Can we change the text within the farm for example change “downpayment” to deposit?
    Can we make the payment always method be end of period and not give the option to change?

    Many thanks

    • Hi Colin,

      Any WordPress plugin that is distributed on WordPress (as all but one of mine are) come with full source code. That makes it so anyone that has some programming skills can change a plugin’s behavior so they can have what they want. I can’t give you all the details right now, but for changing the currency, you can follow the below steps. I’ll get back to you later when I’m not at my day job with how you might get the other features you want.

      In the plugin folder, there is a js folder. Should be here with default install:

      <domain>/wp-content/plugins/fc-loan-calculator/js

      find this file:

      interface.AUTOLOAN-WIDGET.min.js

      With a plain text editor, such as note pad open it up and search for this text:

      a.CCY_CONVENTIONS=[{sep:",",dPnt:".",ccy:”$”,ccy_r:””}

      Should be around row 7. Change the “$” to pound sign. Save, and refresh the webpage

      a.CCY_CONVENTIONS=[{sep:",",dPnt:".",ccy:"£",ccy_r:””}

      This will change the plugin’s default for you

      The downside with this hack is, no one visiting the page will be able to set the currency to “$”. Or at least I don’t think they will be able to. I didn’t actually test that.

      Hope this works for you.

      • Hi Karl – thanks for the reply.. I’ve done that and it seems to have worked!
        I’d really appreciate your help with changing the other two points – I think the second one in particular could be a legal requirement in the UK .. but it’s really good to know that we can make these changes … thanks again

        • You’re welcome.

          The other changes are pretty straight forward. First, in the plugin’s folder, find the file:

          en/calculator.gui.php

          This single file controls everything the user sees. Notice there are 4 sections for the 4 different sizes. Since the calculator on this page uses the shortcode install and it has a selected size of "medium", I’ll use that as an example. Open the above file, and find this line (of course you’ll pick the size you plan to use) at around line 244:

          } elseif(strtolower($size) == “medium”){

          This has all the inputs for the calculator. Find the payment method:

          <div class="input-group">
          <label class= "control-label" for="selPmtMthd">Payment Method?:</label>
          <select id="selPmtMthd" class="control">
          <option value="0" selected="selected">End-of-Period</option><option value="1">Start-of-Period</option></select>
          </div>

          Change the fist line above to look like this:

          <div class="input-group" style="display:none">

          And to change the prompt, you can change the text between the > and < for any "control-label" For your specific case, change this:

          <label class= “control-label” for="edDwnPmt">Deposit?:</label>

  3. Hi Karl – that’s brilliant I’ve carried out the changes you suggested (I almost think I’m getting the hang of it!)

    Unfortunately, I’ve come across another problem .. we’re using a theme from “elegant themes” called Divi.. it comes with a “page builder” module.. and it seems that using your plug-in is causing a conflict and the page builder module keeps hanging..

    just wondered if you had any suggestions?

    I really appreciate your help, thank you very much

    • Colin, I’m sorry you ran into a problem. Unfortunately it doesn’t sound good. But, if you have a public facing link and you would like me to look at the page to see if there’s a change I can make, I will. You can send the link to webmaster @ this domain.

  4. Hi Karl,
    I’m looking for Auto load calculator plugin for wordpress with options for down payment and residual value. Do you have this option?

    Many thanks

    • Hi Dimitar. This calculator includes down payment calculation (or user can enter value), but it does not include residual value. In terms of a loan calculator, I don’t know how "residual value" is used? Normally, a loan calculator will run a schedule until the balance is 0. Can you explain what you mean?

      • Hi Karl,
        The residual value scheme is typical for the leasing of cars and equipment. Residual value is negotiated with the client (e.g. 20%). During the term of the contract, the full funded value (car cost – down payment) is accrued, but only part of the principal is paid (the car’s price – down payment – the residual value). At the end of the contract, the client has the choice – to buy the car at its residual value or to return it to the lessor.

        Many thanks.

        • This I am familiar with (but your original post I thought meant loan calculator – sorry). I hope to have a Lease Calculator ready later in the year.

  5. Hi Karl,
    Great plugin!
    I have two small problems:
    1. Currently you have to enter a value in field “Amount of loan?” manually. I would like to have it automatically by formula: “Price of car” – “Down Payment. Is it possible? Maybe you can help with js snipped to achieve this?
    2. How to make date format “dd/mm/yy” default? I managed to get euro currency default by doing changes to plugins js file but don’t know how to do the same for date.

    Thanks in advance,
    Janis.

    • Thanks Janis. Hope we can get it to work the way you want.

      1. This is by design. All the user has to do is to click the calc button and the amount of the loan will be calculated as well as the payment amount. This allows the user to also enter a loan amount and a deposit and a 0 for the price of the car and it will tell them how expensive of a car they can buy. What do you think?

      2. About the date, it took me a while to figure out, but I think I have it. Are you ready for some surgery?

      Open the file interface.AUTOLOAN-WIDGET.min.js with a plain text editor. I guess you’ve found that one, it’s in the "js" folder. Find this text:

      a.LocalDateConventions=function(b){b&&null!==b

      It should be in row 12 if your text editor wraps the lines correctly. You will have to copy/paste this code to the above:

      b=a.DATE_FORMATS.MDY;

      Make sure you get everything from the beginning "b" to the ending semicolon.

      Enter it like this:

      a.LocalDateConventions=function(b){ b=a.DATE_FORMATS.MDY; b&&null!==b

      Save and then do a hard refresh of your web page. If you are using Windows, that’s done with a Ctrl-F5.

      • Hi Karl,
        Thanks for your reply.

        I fixed date issue and “Amount of Loan” field calculation might do as you explained.
        But I found other problem. When I do calculation and then change my mind about “Down payment” or “Price of car” I can’t do calculation because warning comes up and says that one of values ( Down payment , price of car or Loan amount) should be “0”.
        Ok, I understand that you should use “Clear” button for this new calculation but my client didn’t want to use “Clear” button so I removed it. One more reason we didn’t want to use “Clear” button was that it clears every field but we don’t want “Interest rate” to be cleared because it is not visible for public and set as fixed rate by admin.
        Is there any way to do repeated calculation on the fly by changing “Price of car” or “Down payment” without “Clear” button?

        Thanks for help again.
        Janis

        • The way the calculator works as you describe it is by design. The point is, the calculator will create a payment schedule using the user’s inputs. Someone can say, I want to borrow 20,000 at 4.5% and pay 1,000 for 24 months and the calculator will create the schedule with the final payment being adjusted as needed.

          If you don’t want that behavior, then all the code is included, it can be programmed to do what you want.

          I think what I would do is put the clear button back and adjust the clear() function to only clear the payment amount. If you do this, you will have to rebuild the “min” files. They are minified with Google’s Closure Compiler.

          • Hi Karl,
            Thanks again for answer.

            Yes, I think it is good idea to put the clear button back. Could you point me where and how to adjust clear() function to only clear the payment amount?

            One more thing: how to make strings translatable in “Payment Shedule”?
            I found this line in code: k.append(‘Car Price: ‘+y+’  Down Payment:’+x+””);
            “Car Price: ” needs to be translatable because we having two languages.
            Usually I do this in php:
            But didn’t work in this case, had syntax error. I am not so good with php.

            And how “Print” button works? Print window shows calculator but without any numbers.
            Is it possible to print only “Payment Schedule”?

            Thanks again,
            Janis

          • Janis, with the plugins, the user gets all the source code. I pointed out what function to adjust, but I don’t recall what file that it’s in. But a quick search of the 3 source files will certainly turn it up. Also, it just isn’t possible for me to work a full time job and build this site and teach programming too. So I can’t discuss translations or how to modify the function. (I don’t even do it when people offer to pay me.) Another JavaScript developer should be able to do it rather quickly, I would think.

  6. Hello Sir,

    Thank you so much for creating these awesome and helpful plugins! I am in the process of setting them all up on my site, and I was just wondering if it would be possible to the option for visitors to e-mail the results to themselves? or at least download a PDF of the results. For those who may not have a printer at hand.

    Thank you for your consideration.

    Kind regards,

    Sabrina

    • You’re welcome.

      If your users are using Chrome, it will print to a PDF as a standard feature. For other browsers, users would have to have a PDF print driver installed and then print to that driver to create a PDF. For emailing, it is best to email a PDF.

  7. *add the option/feature.

  8. Oh, also is it possible to hide the calculator name? I have separate CSS styling for the title 🙂

    Thanks so much,
    Sabrina

    • The calculator comes with full source code. You are pretty much free to modify it as long as you keep the copyright intact.

  9. Hello,

    So I just updated this plug-in and it seems to work except that the Help text is now also displaying in full underneath the calculator – is there a fix for this? I would like to update the rest of the plugins but am worried this will happen on all of them.

    Appreciate your help, thank you!

    • I’m sorry for the problem with the auto loan calculator. The text you are seeing is the Help text. There is something about your site’s theme and the calculator that is not compatible, though I don’t know what. Nothing changed that I know about with respect to how the help text is shown.

      Can you send me a link to your calculator page so I can see exactly what is happening?

      FYI, the calculator displayed on this page is the plugin itself.

      • Thanks for confirming the fix via email Sabrina.

        For anyone running into this issue, I’ll get a fix out by the Monday, Nov. 13. In the meantime, you can fix it yourself.

        In the fc-auto-loan-calculator/en folder, in the theme’s plugin folder find the file:

        calculator.gui.php

        With a plain text editor open the file and search for this text:

        “hshow hidden”

        Change the lower case “s” to uppercase, i.e. hShow.

        Save the change and do a hard refresh of the web page.

        That’s it. Just one little stupid typo.

  10. I can not get the fields to display the fonts correctly using firefox. The text is cut off. If you try to type numbers in the field they do not display correctly. Using Edge browser works fine

    • Desktop or mobile? I just tried Firefox v. 58.0.2 on Windows 10 with this page, and the plugin displays fine. Do you see the same problem with this page as you are seeing on your site? If not, then there is a theme conflict somewhere. If you give me your URL, I’ll take a look. (This page has the same plugin as what is offered on the WordPress site.)

    • Thanks for the link. Yes, it’s a conflict between this particular WordPress theme and the calculator’s style sheet. I have a fix, but it means that you need to put a bit of CSS on the page the calculator is on. I hope your developer can do that. Please add this rule:

      .calc-wrap > form.calculator .control.num {
      	padding-top: 5px;
      	padding-bottom: 5px;
      }
      

      This should also be safe to put in your sites styles.css file as well if you can’t get it on the specific page.

Comments, suggestions & questions welcomed...

* Required