By Mike Belanger
Blog updated on October 29, 2026
To add a WordPress cost calculator to your website, install the plugin, create a calculator with your own prices, then embed it on a page. I use the steps below to explain that workflow, including what to check before visitors use the form.
In WordPress, open Plugins → Add New, search for Stylish Cost Calculator, then choose Install Now and Activate. If you bought a paid version, follow the official ZIP installation instructions for that download and license. Use the official plugin source.
Still deciding which plugin fits? Read the WordPress cost and price calculator comparison first. This page focuses on setting up SCC.
Open Stylish Cost Calculator → All Calculators. Create a calculator or start from a relevant calculator template. Give it a name you will recognize when embedding it.
List the choices that affect the estimate: quantities, service levels, optional extras and any minimum charge. Add the matching elements, set their labels and prices, and save. A template provides a starting layout; replace its example prices with your own.
Base service $100 + 3 units at $25 + an optional $20 extra = $195. These example amounts are not suggested market rates.
For an estimate that still needs a review, say so beside the total. Choose a currency and check the current plan details before relying on a paid feature. There is no single setup time that fits every pricing model.
Use the embedding method that matches your editor:
Copy the exact shortcode from your own calculator. Its ID selects the calculator to display; an example ID will not work on your site.
Saved calculator → block, Elementor widget or shortcode → public page. You do not need an iframe or a separate database installation.
Save or update the page and open its public URL. Check the official embedding guide if your editor differs.
Ready to build your estimate form? Browse SCC calculator templates and choose a starting point that matches your service.
I recommend checking the public page while signed out, on both a phone and a desktop. A builder preview alone does not prove that the calculator works for visitors.
Decide whether visitors should request a quote or proceed to payment. Enable only the actions your calculator and plan support, and explain what happens when the visitor uses them.
For WooCommerce, create the relevant products or variants and configure the calculator’s Payment Settings. The WooCommerce integration guide distinguishes individually linked items from the combined-line-item option. Check the calculator price against the cart price, and configure shipping and tax in WooCommerce. Formula adjustments need particular care because the two integration modes behave differently.
For help choosing a store workflow, use the WooCommerce price calculator comparison. Keep a quote request clearly labeled if the business must approve the work before it becomes an order.
Confirm that the selected calculator exists, save it, and check that its shortcode or widget points to the right ID. Review the public page after clearing the relevant page cache. If an optimization plugin delays scripts, test that setting on staging rather than disabling unrelated production features.
No. This workflow builds an interactive calculator from the prices and rules you configure. Adding it to a page does not automatically price historical orders.
Need help with an embed or pricing rule? Contact Stylish Cost Calculator support with the page URL, calculator ID and an example of the expected total.
