Stylish Cost Calculator
  • English
Go to website
Back
Articles on:Tutorials (how to)
Get detailed, step-by-step guides for creating your cost calculator effortlessly.

Categories

  • Video Tutorials
  • Troubleshooting
  • Features
  • Tutorials (how to)
  • Elements
  • FAQs
  • Integrations
  • Use Cases
  • AI Features
  • Stylish Cost Calculator
  • Stylish Price List
  • Cancel Yearly Subscription: How do I cancel my yearly license subscription?
    If you're looking to cancel your license subscription, please follow the steps below. Just so you know, this will stop the plugin from working. Estimated Time: 2 minutes Step 1 https://members.stylishcostcalculator.com/ If you don't remember your password, click forgot password and enter the emial you have used to purchase the license Step 2 Click Subscriptions Click CanceSome readers
  • Customizing The Style Of The Calculator Form
    Elevate your website's visual appeal and align it seamlessly with your brand identity using our Custom CSS feature for the Stylish Cost Calculator. This powerful functionality allows you to delve deep into customization, offering you complete control over the appearance and style of your calculator forms. You can do it through your CalculatorSome readers
  • Customize the email quote message at the calculator level
    As of April 2023, you can now customize the outgoing email quote message for each individual calculator instance. FAQs What happens to the settings on the Global Settings page? You can continue to modify global-level settings, which will serve as default settings for existing or new calculator forms. However, any settings made under Calculator Settings will take precedence over the global-level settings. How to Use Step 1. Edit your calculatorSome readers
  • How do I style my 'Email Quote', 'Detailed List' or 'Coupon' Buttons?
    While we don't offer support to users for coding their site, we can show you a few different ways you can style the buttons. If you're not comfortable with CSS, we recommend you find a CSS developer on Fiverr or Upwork. Note: Add this CSS to your page. If you don't know how to do this, please contact a CSS developer or buy our custom web design help package starting at $80 USD. Use the WordPress Customize CSS feature to style the clasSome readers
  • Implementing Base Fees: Adding Mandatory Charges in Your Calculator Form
    How do I charge a base fee or mandatory fee in my calculator form? To include a mandatory base fee in your calculator form, you have two methods at your disposal: Using the Fee & Discount Adjuster Element: You can add a fixed amount or percentage as a base fee to the total or to a subsection of your calculator. This fee will automatically be included in all calculations. (https://storage.crisp.chat/users/helpdesk/website/c5f0153cc3f4b000/fee-discount-adjuster-314ob5eo.pngFew readers
  • How to link two Distance Cost Elements?
    With this script we can copy the arrival address of a Distance cost element to the departure address of a second Distance Cost element. It is necessary to have experience manipulating HTML to follow this tutorial This is useful for cases in which the user needs to calculate Scales between one direction and another. First we neFew readers
  • Font Colors: How do I change the colors of my titles, services, buttons and elements?
    You can change the color of your titles, total price bar, object colors (sliders, dropdown), and CTA buttons. Step 1. Click on the calculator-level settings button. Step 2.Few readers
  • Important: Understanding the math of a slider, sections vs subsections
    There are a few ways to use a slider, but there are 2 main ways. Use it as a stand-alone slider and give it a price per unit. Use it as an element (product/service) multiplier, and set the price of the slider to 0. Read more here about the slider element. Understanding Sections and Subsections When creating forms in theFew readers
  • Master Guide - trigger a charge, fee or discount
    Welcome to the Stylish Cost Calculator help desk! Our platform empowers you to dynamically set fees, charges, or discounts using advanced conditional logic. Whether you're configuring shipping costs, package deals, or unique pricing models, our guide will provide you with the tools and insights you need to optimize your calculations for a moFew readers
  • Member's Portal: How do I change my email address or payment method?
    There are two member portals associated with the Stylish Cost Calculator. Located at https://member.stylishcostcalculator.com • Access your license keys and download files. Located at https://designful.onfastspring.com/account • Access your invoice, change your payment method, cancFew readers
  • Smart URL Parameters: Automating Element Selections with JavaScript
    Introduction The Smart URL, however, lets you make special links that open your calculator form with some options already picked. This is great for sharing forms that are partly filled out, saving time for your customers. Benefits, Features & Use Cases Benefits: Save time for customers Make forms easier to use Share specific calculator setups quickly Features: Create links with pre-selected options Works with dropdowns, checkboxes, and other basic elemFew readers
  • Installing Stylish Cost Calculator Premium via zip file
    Congratulations on your purchase of Stylish Cost Calculator Premium. Please follow the process as per the screenshots below - Navigate to 'Plugins Add New' Click 'Upload Plugin' button Select the zip file you had downloadedFew readers
  • Business objectives: What are your goals?
    There are different ways you can use Stylish Cost Calculator to achieve various business goals and objectives. If you found more creative and interesting ways to use the cost calculator for your business, we would love to hear. Send us a message on our contact form https://stylishcostcalculator.com/support Pay with Paypal for businesses who want to use the cost calculator as a selling tool Add to Cart for businesses who wantFew readers
  • Customer Contact Details: How do I build my calculator to request their name, address, ect..
    You can use the Email Quote Form Builder to request contact details, suggestions, comments and basically any user inputs. ✔️ This method will pop up a form when the user clicks the Email Quote user action button. X This method will not show the user details on the PDF Quote. color 314AFew readers
  • License: How do I activate my premium license for Stylish Cost Calculator?
    Step 1 - Delete the free version (if you have it previously installed). Note: your previous work is safe. Step 2 - Grab your license from your completed order email. Or, from the Member's Portal. *Step 3 -Few readers
  • User Action Buttons: how to trigger them with HTML (buttons on page)
    Introduction If you want to add additional buttons to your page that activate any of the User Action Buttons (Email Quote, Detailed List, Add To Cart, Coupon), please refer to the information below. Email Quote Button View Detailed List ButtonFew readers
  • Translation: Can I change words on the frontend? Can I translate words into my own language?
    Article moved to here - https://help.stylishcostcalculator.com/en/article/translation-feature-or-change-words-a-complete-guide-fp8nqt/Few readers
  • Total Price Font Size: How do I change the size of the font size?
    To change the total price of the font size, you need to edit the title font size. Step 1 - Click Calculator-Level Settings Step 2 - Click Font Settings You can use custom CSSFew readers
  • Ultimate Guide: How to Activate Volume Discounts Based on Product Selection or Quantity
    Welcome to the ultimate guide on how to set up volume discounts based on your customers' product selections or quantities. One of the most effective ways to incentivize larger purchases and enhance customer loyalty is by offering volume discounts. Whether you're looking to offer discounts for bulk purchases or particular product combinations, we'veFew readers
  • Coupon, Detailed List Buttons: How do I remove them?
    Inside the 'Calculator Settings' dashboard, you can click settings, then choose which frontend button you want to turn off. Step 2Few readers
  • Custom Percentage Addition: Is it Possible to Include a Custom Percentage in the Calculator?
    Can I add a custom percentage to specific parts of the calculator or to the total calculation? Yes, in the premium version of our plugin, you can add a custom percentage to any subsection of your calculator form, which can consist of various elements representing different services, products, or categories. To do this, simply add a Fee & Discount Adjuster element to your desired subsection. Currently, you canFew readers
  • Drag & Drop: How can I change the position (sort) my fields after building?
    Yes, you can now use our drag and drop feature to sort categories and services. Right now, you can only drag and drop within the same subsection. However, we are working on a feature for this to work throughout the entire calculator instance.Few readers
  • Updating the premium plugin.
    Step 1. Disable then Delete the free version of the Stylish Cost Calculator. Don’t worry, your previous work is safe. Step 2. Download the premium version of Stylish Cost Calculator zip from the Member's Portal. Step 3. Upload ‘Stylish Cost Calculator Premium ‘ zip file to WordPress (screenshot here) Step 4. Activate a nFew readers
  • Hide Buttons: How do I hide the Detailed List and other buttons?
    For lead generation, you might want to hide certain buttons. Open the Calculator Settings on your calculator editing page Search for "CTA Buttons (User Action Buttons)" and disable the button of your choice (https://s3.amazonaws.com/cdn.freshdesk.Few readers
  • Installation: How to install Stylish Cost Calculator
    Tutorial: Installation by zip file Step 1. Disable then Delete the free version of the Stylish Cost Calculator. Don’t worry, your previous work is safe. Step 2. Download the premium version of Stylish Cost Calculator zip file here Step 3. Upload ‘Stylish Cost Calculator Premium‘ version toFew readers
  • Duplicate a list (instance) of a calculator
    Note: The video below is when we didn't have the duplication feature.Few readers
  • Images: How to add images to the dropdown menus
    In our premium version, you can add images to the dropdown menus.Few readers
  • Customize Email Quotes: a complete guide to customizing the email estimates to the customer
    If you wish to cusotmize how the email quotes are sent to the user, you can do it with this method below. Step 1. Turn off Email Quotes to the User Your calculator form Calculator Settings Email Settings: set to admin only Step 2. Setup Zapier or Make.com to Send Customized Quote Emails Setup customized email quotes in minutes with Zapier. (https://storage.crisp.cFew readers
  • Prevent an Element from Displaying on the PDF
    Prevent an Element from Displaying on the PDF Read this article here: No Cost Items: How do I display or hide these itemsFew readers
  • SCC: Migrate domains (transfer domains)
    STo migrate your webstie to another domain, from a staging or testing site, please see the steps below. Step 1 - Login into the member's portal https://members.stylishcostcalculator.com/licenses/ Step 2 - Click on License Keys Step 3 - Click on Manage Sites Step 4 - Deactivate old domain Step 5 - Access the SCC plugin on the new site and enter your original license key (https://storage.crisp.chat/users/helpdesk/website/c5f0153ccFew readers
  • Width: How do I increase the width of the calculator container?
    Add this CSS code to the WordPress customize CSS screen or any Custom CSS input box. Change the XXX to your calculator ID. Step 1 - https://prnt.sc/12jugtj Step 2 - https://prnt.sc/12juhxr Step 3- Add the custom code below.Few readers
  • Block Free Email Accounts: from submitting email quote forms
    Block Free Email Accounts What It looks like Access the Global Settings Enable Block Free Email Accounts By default, it blocks 25 free emal providers. Send us an email if you want any domains added to the list. (https://storage.crisp.chat/users/helpdesk/website/c5f0153cc3f4b000/image18va1ot.pngFew readers
  • How to build a calculator or medicine dosage calculation
    Yes, you can do this by following the steps below From the 'Calculator Settings' menu, find the 'Show Currency label' option and disable it. Add the unit value word beside the total (mg for this tutorial). Use the slider element and enter the calculator of the person's weight inFew readers
  • Basic back-end to front-end explained
    Step 2:  https://help.stylishcostcalculator.com/en/article/important-understanding-the-math-of-a-slider-sections-vs-subsections-1c10sjj/Few readers
  • Video - Trigger (charge) a fee if a product is selected with conditional logic
    If you want to charge a fee for a product chosen, follow these steps. Step 1. Create a product using a dropdown or checkbox element. Step 2. Add a Fee & Discount Adjuster element to the same subsection as the element above. Step 3. Add conditional logic to the Fee Discount Adjuster element, and make it trigger when the product (above) is selected. Check out our master guide on How to trigger a fee or discount (https://help.stylishcostcalculator.com/en/article/masteFew readers
  • Product Selected: Charge a fee when a product is selected.
    If you want to charge a fee if a product is chosen, follow these steps. Step 1. Create a product using a dropdown or checkbox element. Step 2. Add a Fee & Discount Adjuster element to the calculator. Step 3. Add conditional logic to the Fee & Discount Adjuster element, and make it trigger when the product (above) is selected.Few readers
  • WooCommerce + File Uploads + Stripe: How to receive files and payments at the same time
    This is the easiest solution, but you will not receive the image files immediately. You will receive the payment, and you will need to email the user asking for your files. First Setup SCC with Stripe Go to the global settings page and input your Stripe API information (25 minutes). Go to your calculator and activate Stripe at the bottom of the page (1 second) Add the file upload element 3. Add the file upload elemeFew readers
  • Slider vs Quantity Box (Number Input Box)
    If you're not yet familiar with how the math of a slider works, it's recommended to first learn that here The main difference is the slider has the capability to multiply the values of any elements in the same subsection, whereas the number input box does not. Some users might have to reverse might have to swap a slider for a quantity box, and vice versFew readers
  • Submit Button: How do I add a submit button?
    The calculator wasn't built to have a submit button. The idea of submit buttons is to use the 'Email Quote' button, or any of the five buttons that you can have at the bottom. (Detailed List, Email Quote, Coupon, Add-To-Cart (Woocommerce), Paypal) It depends on what action you want the customer to make, or what action they want to make. A stylish Cost Calculator was built to handle various actions. Alternatively, you're welcome to change the word "Email Quote" to "Submit" using ourFew readers
  • Package Deal - How to give a discount if a user selects a products
    If you want to give if a product is chosen, follow these steps. Step 1. Create one or more products/services using a dropdown or checkbox element. Step 2. Add a Fee & Discount Adjuster element to the same subsection as the element above. Step 3. Add conditional logic to the Fee & Discount Adjuster element, and make it trigger when the product(s) (above) is selected. Check the master guide for triggers a charge or discount (https://help.stylishcostcalculator.com/eFew readers
  • Frontend Styling: I need inspiration to design my calculator's frontend look
    This user has used Frontend Style 2 with the border-line feature turned on. They used a different colour background for the calculator compared to the rest of the page. This helps the user visualize where the calculator starts and ends.Few readers
  • Square Footage Calculator
    Few readers
  • How do I translate words, or change words on the frontend?
    Articled moved to here - https://help.stylishcostcalculator.com/en/article/translation-feature-or-change-words-a-complete-guide-fp8nqt/Few readers
  • Zero Dollar Items: How to make a $0 item show up on the detailed list.
    Original article is here: https://help.stylishcostcalculator.com/en/article/no-cost-items-how-do-i-display-or-hide-these-items-1djyte7/Few readers
  • Footer Notes: How do I add footer notes to the quote form?
    This setting is found under the global settings tab.Few readers
  • How to Apply and Display Mandatory Fees on the Frontend
    The Fee & Discount Adjuster can be utilized to impose a fixed dollar amount or percentage fee that is applicable to the total cost of the entire calculator.Few readers
  • Frontend: How do I change my font colors on websites with black or dark backgrounds?
    Read below if you need help styling your form for websites with black backgrounds. Add Custom CSS Add Custom CSS via Calculator Settings Email Quote Form Below is the color to turn the titles of each input box to red, as an example, for the Email Quote form.Few readers
  • Force item to show up on PDF or Hide Item from PDF
    Item is $0 and Not Selected Default Behavior - It will not show up on the PDF or Detailed List Item is $0 and Selected Default Behavior - It will appear on the PDF or Detailed List since it's been selected. Force It To Show - Make the cost $0.001, and it will for it show up.Few readers
  • Adding Stylish Cost Calculator in a dark background page or section
    Dark backgrounds are a popular choice for many websites, especially those with dark mode options. The Stylish Cost Calculator plugin is designed primarily for light backgrounds, but you can easily adapt it for use on darker pages with a few adjustments. Dark backgrounds can be easier on the eyes. They provide a sleek, modern look. They can help certain elements stand out. color 31Few readers
  • How to Send Personalized AI Email Quotes with Stylish Cost Calculator (ultimate guide)
    If you would like to summarize the email quote or personalize the email quote to specifically what the user has chosen in the cost calculator form, this guide is for you. Turn off email quotes to the user: Access the calculator-level settings and change the email setting to Admin only. Link Stylish Cost Calculator to Zapier.com or Make.com (https://storage.crisp.chat/users/helpdesk/website/Few readers

Not finding what you are looking for?

Chat with us or send us an email.

  • Chat with us
  • Send us an email
© 2025Stylish Cost Calculator