Cost Calculator 3.5 Beta Preview: A Smoother, Easier Workflow Experience

Hello Cost Calculator users! It’s been a long time since we rolled out a major upgrade like this one. And we’re thrilled to finally share what we’ve been working on behind the scenes.

Cost Calculator 3.5 is nearly here, and it’s not just a regular update. It’s a rework of the core experience. This means your calculators are now faster, lighter, and smoother to use.

In this article, we’ll walk you through why we decided to rebuild the plugin from scratch, how it benefits you, and what’s coming next. And at the end, you’ll get a chance to be among the first beta testers. Let’s dive in!

Why We Rebuilt the Core of Cost Calculator

Some of you might be wondering: “Why did we rebuild the plugin from scratch?” The truth is, the old version was working fine, but over time, it started to show signs of slowing down. With the new features and more complexity, we started to receive feedback about slower load times. This was especially popular among larger forms. As the core became more overloaded with scripts, the performance began to dip.

Rather than patching things up, we decided to take a step back and rebuild the core to:

• Improve Performance: Make calculators load faster and perform smoothly, even with complex forms.
• Simplify Maintenance: Clean up the codebase to fix bugs and add new features with ease.
• Enable Future Features: Set the stage for powerful new features that the old core could not support.

This complete rewrite took time, but we believe it’s worth it for a better and future-proof experience.

What’s New: A Modern Tech Stack 

Even though the interface may look similar to what you’re used to, the technology behind Cost Calculator 3.5 is completely different. We’ve upgraded from Vue 2 + Webpack to Vue 3 + TypeScript + Vite. It brings significant improvements to the plugin’s performance, scalability, and maintainability.

     Here’s what’s under the hood:

1. Vue 3: The entire frontend is now built with Vue 3, the latest major version of the framework we have always used. This means:

• Faster rendering and smaller bundles (thanks to an improved virtual DOM and reactivity system). Your calculators will load faster than ever before.
• Better state management and improved component organization.
• Full TypeScript support out of the box. You get a more stable plugin, reducing the chance of errors and making future updates smoother.

1. TypeScript: We rewrote the plugin’s codebase in TypeScript to improve stability. We did it by providing strong typing and better error-checking during development.
2. Vite: We swapped out Webpack for Vite. It is a cutting-edge build tool that’s fast, reliable, and optimized for modern development. With Vite, we’ve experienced:

• Instant feedback during development.
• Build times that are 5x faster (from ~2.9s to 0.5s for larger projects).
• Smaller output bundles, which makes the plugin load faster.

These technological updates result in a more responsive and stable plugin, with a faster loading time and improved overall performance.

For developers looking to learn more about Vue 3, check out the official Vue.js documentation.

Performance Improvements

One of the biggest improvements you’ll notice is speed. We optimized the plugin on multiple fronts:

• Faster Builds: Vite has reduced our build times by about 5x compared to the old Webpack setup.

• Improved Core Web Vitals: Performance improvements also show up in user experience metrics:

1. Largest Contentful Paint (LCP): Now 0.30s, down from 0.42s. This means content appears faster.
2. Cumulative Layout Shift (CLS): Improved from 0.42 to 0.03. Layouts are now more stable, preventing unexpected shifts.
3. Interaction to Next Paint (INP): Reduced to 72ms so your forms respond more quickly to user input.

Smaller File Sizes: Vite’s optimized bundling reduces the plugin file size, making it lighter to load.

These improvements ensure faster load times and a smoother user experience, especially on complex calculators or slower devices. They also help optimize SEO performance, especially with Core Web Vitals improving, which is important for Google PageSpeed metrics.

Cleaner Codebase for Easier Customization

This rebuild is about more than improving performance. It is about making things work better for you.

We restructured the entire codebase to be modular, intuitive, and easy to maintain. Every change serves to give you a more reliable experience and ensures long-term efficiency.

The image above gives a peek into how the plugin’s code is organized in the new version (right side) compared to the old version (left side). 

Clear File Structure

We organized the code into separate folders for types, actions, pages, and features. No more digging through tangled files to find what you need.

For developers: the MVC-style layout and TypeScript definitions make it easier than ever to customize the plugin.

Better Styling 

The old approach used very specific auto-generated classes with a lot of !important rules, making custom theming tricky. In the new version, we’ve significantly reduced this overkill. 

We also overhauled the CSS and styling logic to make it easier to match your theme or apply custom styles.

You can now adjust spacing, colors, or layouts without wrestling the plugin’s CSS. The default look stays modern and clean, but customizing it is far less painful.

Another bonus: the new code is more up-to-date, so everything works better with other plugins and the latest WordPress updates. It runs smoothly on PHP 8+, and we tested it with popular tools to avoid any conflicts. Upgrading today means future-proofing your setup.

What’s Coming Next

The Cost Calculator 3.5 beta version is mainly focused on improving the core functionality. But it also sets the stage for amazing features coming in future updates. These are some of them:

🔄 Flexible Display Modes

You’ll be able to display your calculator in different styles: full-width, as a multi-page wizard, a compact sidebar widget, or a floating sticky button. And you can move and style the live summary panel as needed. This flexibility lets you match the calculator to your site’s design perfectly.

📊 Advanced Order Flows & Analytics

You will take a multi-step estimate and turn it into a full checkout process. We plan to add a new Order Analytics dashboard that shows you revenue, conversion, and other important stats. So you can track performance easily. Data models are now typed, which keeps your datasets fast and memory-friendly.

💳 Subscription & “Buy Now, Pay Later” Payments

This will allow you to accept recurring payments through Stripe, PayPal, or other gateways directly from your calculator. It is perfect for memberships or retainers. The payment modules will only load when needed instead of loading on every page view.

🤖 AI-Powered Field Generation

Simply describe your pricing scenario in plain English, and the AI will generate the fields, options, and a basic formula for you. It’s that easy! This feature also uses TypeScript, which helps the AI engine smoothly inject the needed elements.

🎨 Visual Style Presets

This will let you switch between different looks like Material, Glass-morphism, or Flat with just two clicks. You won’t need to know any CSS to make these changes, and it’ll be easier to match the calculator to your theme with fewer complicated settings.

📈 Progress Bar & Step Indicators Refresh

The progress bars and step indicators for multi-page calculators will be redesigned to be sleeker and more accessible. One update to the design will instantly update every version of your progress bar.

These features were difficult to implement with the old code. But with the new core, they will be possible to roll out in future updates.

Help Us Test: Try the Beta Today

Now’s your chance to try it early and help us shape the final release.

Download Cost Calculator Beta 3.5 Free: 

Download Cost Calculator Beta 3.5 Pro:

1. Install and Activate both: Go to your WordPress admin panel, navigate to Plugins > Add New > Upload Plugin, and select the downloaded ZIP file. After installing, activate both versions of the plugin.

Note: For Pro, you need to enter this activation key:
sk_X;8V0L9-yJ2%W4h^cgPfwTNHY?!qe 
The key works until May 17, and after expiration, it will be invalid.

2. Explore Everything: Test features you usually use, rebuild one of your calculators and see what’s changed. The more you test, the more likely you’ll help catch bugs we can fix before the final version.

3. Send Feedback: If something doesn’t work as expected, even small glitches, please let us know. We also want to hear your suggestions. 

👉 Please submit all bugs, issues, and feedback through [this form].

This is the only way to qualify for rewards and help us improve the release.

Your thoughts help us fine-tune this release and deliver the best version possible.

Want to stay connected with the Cost Calculator community? Join our Facebook group to see the latest updates, get tips, and have discussions with fellow users. 

🌟 Perks for Beta Testers:

• Discount Coupon: Active beta participants will receive a 50% discount toward Cost Calculator Pro or renewal.
• Shout-Out in Changelog: Top 10 helpful testers will be featured in our final release notes with their permission.
• Early Access to New Features: Get a first look at what we’re building next.

By joining the beta, you’re helping us catch issues early and ensuring a rock-solid final release for everyone.

Ready to Explore the New Cost Calculator?

This release lays the groundwork for everything we’re building next.

We’d love for you to try the beta, share your feedback, and help shape the final version. Your thoughts mean a lot, and early testers will get special rewards.

Thank you for being part of the Cost Calculator community. We can’t wait to see what you create with 3.5!

Stay tuned because the official release is planned to be out soon. Drop a comment below and share your thoughts with us. And as always, happy calculating!