Embedding Stylish Cost Calculator in WordPress

Use the approach that matches the page builder you are working in. Every method ultimately renders the same calculator instance, so you can mix and match as needed.

Gutenberg (Block Editor)

1. Open the page or post in the block editor and click Add Block (+).
2. Search for "Stylish Cost Calculator" (block slug stylish-cost-calculator/calc-picker).
3. Select your calculator from the dropdown in the right-hand panel.
4. Publish/Update the page – the block renders the calculator inside the block wrapper and loads the scc-js-frontend-bundle.js assets for you.

Elementor

1. In the Elementor sidebar search for Stylish Cost Calculator and drag the widget into your layout (class-scc-elementor-widget.php).
2. Choose the calculator in the widget settings. The widget uses the shortcode renderer under the hood, so you get the same preview as the classic embed.

Classic Shortcode / Other Builders

1. Navigate to Stylish Cost Calculator → All Calculators in wp-admin.
2. Copy the shortcode shown next to your calculator, e.g. [scc_calculator idvalue="123"].
3. Paste the shortcode into any shortcode block/module (Divi Code block, WP Bakery Text block, Beaver Builder HTML module, etc.).
4. Update the page. The plugin enqueues dist/frontend/scc-js-frontend-bundle.js plus the required CSS automatically.

Additional Tips

• Do not place the shortcode inside a popup/overlay. Popups often defer CSS/JS and will block the calculator styles.
• The plugin exposes a dedicated Gutenberg block, Elementor widget, and shortcode so you never need to iframe the calculator.
• Need to showcase the calculator in multiple languages? Pair the embed with the Wordings/Translation feature (see the "Translate words" article) so each instance uses the right copy.

Once embedded, you can still control calculator behavior (multi-step, color scheme, Smart URL links, etc.) from the main builder inside wp-admin.

Updated on: 25/11/2025