By
Mike
By
Mike
We can create a cost calculator in WordPress with Stylish Cost Calculator (SCC). First, we'll install the plugin. Then we'll start from scratch, use a template, or try the AI Setup Wizard. We'll configure the fields and prices in SCC's visual editor, test the built-in preview, and place the saved calculator on a page.
Visitors choose what they need and see the total change as they go. That can help them plan a budget or prepare a quote request before they contact us.
We'll work through the setup, explain how quantities and optional extras affect the price, and cover Gutenberg, Elementor, and shortcodes. A live shirt-printing example will show these features in action. We can apply the same ideas to services, rentals, and other products.
We need a WordPress account that can install plugins. If someone else manages the site, they can handle this step and give us access to the calculator builder.
The official WordPress plugin listing helps us confirm that we’re installing the right plugin. Several products have similar names.
For a paid edition, use the download and license steps from the member account. Follow the current upgrade instructions if we’re moving from Free to a paid version. Don’t assume that both editions should stay active together.
Once the plugin is active, open the calculator dashboard. Before changing a calculator already used on a live page, make a working copy. That gives us room to test new labels and prices without changing an existing customer experience.
Open Stylish Cost Calculator in the WordPress dashboard and choose Add New, shown as NEW in the current plugin header. Give the calculator a name that describes its job, such as "Cleaning Estimate" or "Project Price Calculator."
We have three starting points: a blank calculator, a template, or AI-assisted setup. Choose one, then review its fields and pricing in the editor.
Once we open a calculator, the editor shows Calculator Builder and Calculator Preview. The builder holds the sections, subsections, and element cards we configure. The preview shows the form visitors will use.
The preview can sit beside the builder or dock below it. Use the docking controls above the preview to change its position. We can test choices in this panel without opening a separate page.
Expand an element card in Calculator Builder to edit its title, options, and pricing settings. Use Save in the header to keep changes. The Embed button in that same header provides the next step for placing the saved calculator on our website.
Choose a blank calculator when we want to build a small form around our own pricing. This works well when we already know which choices affect the total.
For the first version, we can add a service or product choice, a quantity control, and an optional extra. A short form makes it easier to trace each charge before adding more options.
We don't need to recreate a large form just because the plugin can support one. A calculator with four clear fields can be enough to answer the customer's pricing question.
Open the template library and choose a layout with pricing similar to ours. Load it, rename the calculator, and review its fields, images, and sample prices.
A template saves some setup work. We still need to replace the demo content and check how its quantities and extras work. Keep only the choices our business actually offers.
We'll use the T-Shirt Printing calculator later to show image choices, quantity pricing, and a live itemized total. It gives us a ready example while we learn what SCC can do.
For a guided start, choose AI-Powered Setup from the new-calculator options. This is SCC's AI Setup Wizard. Follow the prompts about our business, pricing structure, and the features we need, then review the suggested calculator in the editor.
Treat the result as a starting point. Replace suggested prices with our own rates, remove fields we don't need, and check quantities and extras. AI-generated settings need the same price checks as a template or blank build.
Before adding more fields, choose the next step for the visitor. They might use the price to plan a budget, request a detailed quote, or pay for an order.
That decision helps us keep the form focused. If a job needs a scope review, we can show an estimate and invite a quote request. A service with a fixed scope may be ready for payment.
Check our installed plan before choosing advanced features. The free edition includes basic fields. Email and PDF quotes, conditional logic, multi-step forms, and payments require a suitable paid plan.
Whether we started with a blank form or a template, the next step is to add or edit the fields. Each field should help calculate the price or collect a detail we need to complete the request.
In Calculator Builder, find the subsection where the field belongs. Use + Add Subsection if we need another pricing group.
Adding and sorting are separate actions. + Add Element opens the type selector; dragging changes the order of an existing card. Choose the field type based on the answer we need:
| What we need from the visitor | Field to consider | Example |
|---|---|---|
| One choice from a short list | Dropdown | Service package or print option |
| An optional extra | Checkbox | Add delivery or extra editing |
| A number of units | Quantity slider | Items, hours, or rental days |
| A choice people need to see | Image choices | Product style or finish |
Add a clear label, then enter the options and prices where needed. If a label includes an amount, update that text whenever we change the saved price.
For a cleaning estimate, we might ask for the service type, home size, and extra tasks. For a rental, we might need the equipment type and number of days. The field choices should follow the way we charge.
Here's how several SCC controls look together in the shirt-printing example:
We can use those controls in other kinds of calculators too. The images could show room types or materials. The dropdown could list service packages, while the slider could count hours.
Keep labels specific. "Number of rental days" tells us more than "Quantity." Short help text can explain what an option includes without making the label hard to scan.
Use SCC's fields to turn your services, products, and optional extras into a price customers can explore. Start with the choices that matter most.
Now we'll decide how each selection affects the total. Write down which costs apply once and which rise with quantity before changing the field settings.
| Charge type | How it works | Illustrative example |
|---|---|---|
| Fixed fee | Applies once to the job or order | $20 setup fee |
| Unit price | Multiplies by the chosen quantity | $10 per item |
| Optional unit extra | Adds a price for each unit when selected | $2 per item for a finish |
| Optional fixed extra | Adds one charge when selected | $15 delivery per order |
These are sample amounts to explain the math. We'll use our own rates in the calculator.
For a simple estimate, the rule might be:
Total = fixed fee + (quantity × unit price) + selected extras
SCC's field prices and quantity settings handle many simple estimates. More complex calculations may need the Advanced Pricing Formula feature.
Expand the relevant element card in Calculator Builder. For a selection field, review the labels and price entries for its options. For a Slider, open its Pricing Structure selector.
Choose Unit Price + Quantity Multiplier when we charge a price for each unit. Choose Quantity Multiplier Only when the slider should multiply other priced elements without adding its own base price. Sliding Scale (Flat Rate per Range) applies one base amount to a range of quantities.
For range pricing, review the From, To, and Price For Range entries. Use + Price Range to add another range. In Advanced Options, check Starting value and Slider steps so the control begins at a valid quantity and moves in the increments we expect.
The right mode depends on our actual price rule. Switching modes can change the math, so repeat the same test order after making a change.
SCC uses subsections to group pricing fields. A quantity slider can affect other priced items in its subsection. Place per-unit choices together, and keep one-time charges outside the quantity group that would multiply them.
For example, a $20 setup fee charged once should stay $20 when quantity changes from two items to ten. A $2 finish charged per item should increase with the order size.
Review the quantity control's limits, starting value, and pricing mode. If we use volume pricing, check every range. A price that works for two items may change at a larger quantity.
Also check the behavior before swapping a slider for a number field. A plain number input doesn't automatically apply the same quantity rules to nearby fields. The control's settings need to match the calculation we want.
Once the main price works, we can add choices that help customers shape their estimate. These might include delivery, premium materials, an extra service, or a faster turnaround.
For each extra, decide whether we charge once or per unit. A checkbox can add a fixed delivery charge. An extra priced per item needs the right quantity settings so the amount rises with the order.
Start with a clear label and leave the choice unselected when it is truly optional. Then test what happens when we select it and remove it again.
With conditional logic on a suitable paid plan, we can show a field when an earlier answer makes it relevant. A delivery address could appear after the visitor chooses delivery. A service form could ask for more details when someone selects a larger project.
To set this up, expand the element we want to show or hide in Calculator Builder. Open Conditional Logic near the bottom of its settings. Choose the earlier element that will act as the trigger, then set the condition that should reveal this field.
Test both answers in Calculator Preview: one that meets the condition and one that doesn't. Add more conditions only after that first rule behaves as expected.
The shirt-printing example shows this idea with artwork. Selecting Front Only Design reveals a field for uploading a design idea. We can use a similar pattern when a customer needs to share a file for a quote.
Keep the estimate useful before asking for too much information. If a file is optional, explain that. If we need it to confirm a price, say so near the upload field.
Whenever a choice hides a priced field, test the total again. An option that disappears shouldn't leave behind a charge the visitor no longer expects. We'll check those paths along with the visible fields.
While editing the calculator, use the built-in Calculator Preview panel to test the form. Select options, adjust quantities, and compare the total with the rule we wrote down. This panel is part of the SCC editor; we don't need to open another page for this first check.
Change one choice at a time so we can trace its effect on the price. If the total appears on the final step of a multi-step form, move through the steps to check it there.
Once the configuration is ready, click Save. After embedding the calculator, we'll test it again on the WordPress page. The editor preview checks the calculator; the page check also covers its layout, theme, and loaded assets.
Let's see that in the live shirt-printing example. We selected Tee, set quantity to two, chose two ink colors, and chose two logos or artworks.
The itemized list should make the price easy to follow:
| Part of the estimate | Calculation for this selection | Amount |
|---|---|---|
| Printing subtotal | Sliding Scale base amount for the 2-4 range | $22 |
| Two ink colors | 2 shirts × $2 extra | $4 |
| Two logos or artworks | 2 shirts × $1 extra | $2 |
| Total | $22 + $4 + $2 | $28 |
This shows how SCC combines a base price with extras that change with quantity. In our public test, adding the second ink color moved the total from $22 to $26. Adding the second logo moved it to $28. Switching to hoodies added $8 for the two shirts, bringing the total to $36.
The demo's slider uses Sliding Scale (Flat Rate per Range). Its 2-4 shirt range has a $22 base price. The ink and logo extras still change with shirt quantity, which is why this two-shirt order adds $4 and $2.
These demo results don't mean every shirt costs $11. Range pricing and per-unit pricing are different rules. We'll review every range and any discount conditions before adapting this example to real orders.
The labels alone don't tell the whole story. A field may show "$2 extra," while its effect on the order depends on quantity. The itemized list lets us see that difference.
If our result doesn't match, return to the selected style, quantity, and dropdown choices. Check for another selected extra before changing any prices. We'll also make sure we're looking at the actual order total if the template displays other example totals beside it.
When our own pricing is harder to model, we can ask our team about the calculator setup with a worked example. Include the choices, the price we expect, and how we reached it.
SCC can update the total as visitors choose services or products. Use the itemized view to check how each choice affects the estimate.
Once the math works, we'll make the form easy to use. Adjust the colors, fonts, and spacing to suit the website, and keep the total easy to find.
Use product images when they help explain a choice. For service options, clear text may be enough. The goal is to help customers understand what they're selecting.
Sections can organize headings and steps. A short estimate may work on one screen. A longer calculator can use a multi-step layout on a suitable paid plan, with related choices on each step.
To add a step, create at least two sections. Open the settings icon for the second or a later section and enable Activate Multi-step. The first section starts the form; we don't enable this switch on the first section.
A builder section isn't always a separate page in the customer form. We need to enable the step setting where a new page should begin.
For example, we could separate service choices from project details and contact information. The shirt-printing demo uses separate steps for print options, colors, and graphic design. Both approaches let the visitor focus on one group of decisions at a time.
Give each step a useful title and keep navigation easy to find. Check that visitors can go back and change an answer without losing other choices.
Name the total so customers know what it means. "Estimated project price" fits a service that needs a final review. An order calculator should explain what the shown amount includes.
Place notes about shipping, tax, minimum orders, or review requirements near the relevant choice or total. Use wording that matches the way we actually sell the service.
The W3C guide to accessible forms recommends clear labels, helpful instructions, and asking only for needed details. We'll check those basics along with keyboard access, readable text, and useful error messages.
Save the calculator, then open the page where it will appear. A short heading above the form can explain its purpose: "Get an estimate for your project."
There are two different checks here. Calculator Preview belongs to the SCC editor and tests the form while we configure it. WordPress Preview or View Page opens the page that contains the saved calculator, with the website's layout around it.
First test in SCC, then save the calculator. Next, embed it, save the WordPress page, and open the page's preview or frontend view to test again. A draft page preview lets us do this before sharing the page publicly.
A service page, product page, or dedicated quote page can give the form a useful home. Keep a short explanation above it so visitors know what the estimate covers.
In the WordPress block editor, add the Stylish Cost Calculator block and select our saved calculator. Save the page as a draft first, then preview it.
If we prefer the shortcode method, add a Shortcode block and paste the code copied from the calculator dashboard. Keep it in its own block so WordPress can process it.
Open the page in Elementor, add the Stylish Cost Calculator widget, and choose the saved form. If our version doesn't include that widget, use Elementor's Shortcode widget with the calculator's shortcode.
Use Elementor to place and style the calculator, then save or update the page. Open its frontend view to test selections, quantities, and totals. Don't use Elementor's editing canvas as the final functional test: its editing view may not reproduce every part of the saved page's behavior.
Open the calculator dashboard and copy the shortcode for the form we want to display. It will look similar to:
[scc_calculator idvalue="123"]
The number identifies a saved calculator. The 123 above is an example; use the code copied from our own dashboard. Paste it into a Shortcode block or the matching widget in the page builder.
Save the page and check its public preview. Confirm that it shows the intended calculator, then change a field to make sure the total responds. SCC supplies the interactive form, so this step uses the calculator we've already built.
Our first check takes place in Calculator Preview, the built-in panel within the SCC editor. Test the choices and totals there, then save the calculator.
After embedding it, save the WordPress page and open its page preview or frontend view. This is a separate check from the SCC panel. Also check the published page while logged out, because the theme, page builder, and cache can affect what visitors see.
Start with a small order or job whose price we can check by hand. Then test the main ways a visitor can change it.
| Test | What should happen |
|---|---|
| Choose the smallest allowed quantity | The price matches our minimum-quantity rule |
| Add and remove an optional extra | Its charge appears and disappears correctly |
| Increase quantity | Per-unit charges rise; fixed fees stay fixed |
| Change a choice that hides another field | The total follows the new set of valid choices |
| Cross a volume-price threshold | The intended price applies on both sides of the break |
| Move backward through form steps | Choices and totals stay consistent |
For each volume-price break, test just below it, at it, and just above it. This can reveal a gap or overlap between ranges that a small-order test would miss.
Compare a few results with jobs we already know how to price. Correct arithmetic can still produce a poor estimate if a cost is missing from the rule.
On a phone, check that labels remain readable, controls fit the screen, and the next action stays easy to reach. On a computer, try moving through the form with a keyboard.
If we collect contact details or files, test the required-field messages too. Customers should understand what they need to fix without losing their selections.
Use SCC to help customers explore their options before they contact you. Check known examples, then add the quote or payment step that fits your business.
A clear total is useful on its own. We can also help customers save the result or take the next step, depending on how we handle orders.
With a suitable paid plan, configure the email quote form and its message. Check the business recipient, customer fields, subject, and selected-item summary. If we enable a PDF, open a test copy and compare its total with the calculator.
For a service estimate, the message might explain that we need to review the project details before confirming the job. Keep the next step specific, such as a call to confirm scope or a request for a missing file.
WordPress email delivery needs its own check. The WordPress email documentation explains that a successful send request doesn't prove a message reached its recipient. We'll test delivery to the business and customer inboxes, check spam folders, and review our mail setup if needed.
If we're ready to accept orders at the shown price, we can configure a supported payment option, such as Stripe, PayPal, or WooCommerce integration, with the right plan.
Before taking real orders, test the payment amount, currency, and confirmation message in the provider's test mode. Check how shipping, tax, artwork approval, and refunds fit the order process.
We can also keep the calculator as an estimate tool and offer a quote request. Choose the next step that matches the amount of review each order needs.
When a total looks wrong, first check where the problem appears. Is it already wrong in the calculator preview, only on the page, or only in a quote email?
| Problem | What we'll check first |
|---|---|
| An extra is charged once instead of per unit | Quantity settings and the field's pricing group |
| A fixed setup fee rises with quantity | Whether the quantity control affects that fee |
| The label and total disagree | Both the visible option text and saved price |
| A larger order has an unexpected subtotal | Volume pricing, ranges, and discount rules |
| The page shows the shortcode as text | The block or widget type and the actual calculator ID |
| Preview works but the public page doesn't | Saved changes, relevant caches, and script optimization |
| A quote submits but no email arrives | Recipients, mail delivery settings, logs, and spam folders |
Change one thing at a time, then repeat the same order. If preview shows the correct price but the page doesn't, investigate the page behavior before rewriting the pricing rules.
Review the customer-facing text after a change too. A field label, image caption, or quote message can show an old price even when the total uses the new one.
For a useful support request, include the page URL, chosen options, quantity, expected result, and result shown. A screenshot of the itemized list can make the difference easy to spot.
We can start with the free SCC plugin and its basic fields. Features such as email and PDF quotes, conditional logic, multi-step forms, and payments depend on the installed edition. Choose the plan based on what our calculator needs to do.
Start from scratch for a small form built around a known price rule. Use a template for a ready layout, or choose AI-Powered Setup for guided suggestions. All three routes lead to an editable calculator whose prices and behavior we need to check.
Simple estimates can use field prices and quantity settings. We should still write out the pricing rule so we can check the result. More complex math may need the Advanced Pricing Formula feature.
We can use SCC's visual controls to add fields, prices, and layout choices. We still need to understand our rates and test the result. Special styling or behavior outside those controls may need extra work.
We don't need WooCommerce just to display a calculator and an estimate. Use its integration when it fits the store and checkout process we want.
Yes. With a suitable paid plan, we can offer an email quote after showing the estimate. Accepting payment is a separate choice, so we can keep a review step for projects that need one.
We can build calculators around services, rentals, or products. The important part is to match the inputs and pricing rules to the business. Hours, rental days, and item counts can each need different limits and fees.
Start with one offer we can price clearly. Install SCC, create the calculator, add the fields, and check a few known results. Then place it where customers already look for pricing.
If a special pricing rule needs a closer look, we can talk through the calculator requirements with our team before expanding the form.
Start from scratch or use a template to build your first estimate. Add your prices, test the result, and give customers a clear next step.
