🇺🇦 Proudly Ukrainian — every project with us helps support Ukraine's defense and lasting peace in Europe.

Meet the team →
← Web Platforms

Web development case study

Building Smarter Terraces: A Custom WooCommerce Calculator That Does the Math

Custom WordPress plugin built for WooCommerce — enabling precise terrace planning, automatic material calculation, and Figma-accurate UI with seamless UX.

Building Smarter Terraces: A Custom WooCommerce Calculator That Does the Math
Intention: Build a user-friendly calculator that helps customers plan garden terrace foundations and instantly get a material plan
Technologies used: WordPress, WooCommerce, PHP, JavaScript, DOMPDF, REST API, ACF, Tailwind
People Involved: 1 PM, 1 WordPress Engineer, 1 QA
Timeframe: ~1 week (30–40 hours)

Overview

Our client approached us with a request to develop a custom WordPress plugin that seamlessly integrates with WooCommerce and functions as a calculator for planning garden terrace foundations. The goal was to allow users to input terrace dimensions, select the substrate type, and instantly receive a detailed material plan — including the number of terrace support legs (“carriers”). The result could be downloaded as a PDF and added to the WooCommerce cart for easy ordering.
Overview
Our Approach

We began by outlining our standard workflow — starting with wireframes to confirm logic, steps, and UI structure. Once the approach was approved, the client provided a Figma design that fully represented the desired user experience. We analyzed the supplied formulas and clarified the calculation rules in detail. The plugin accepts inputs for terrace width (W) and length (L) in centimeters, with constraints of 150 cm maximum spacing for carriers and main beams, and 60 cm for cross beams.

The logic follows a carriers-first approach:
  • Carrier columns across width (W): intervalsW = ceil(W / 150), positions from 0…W with even steps.
  • Carrier rows along length (L): intervalsL = ceil(L / 150), same rule.
  • Main beams: placed at carrier column X-positions.
  • Cross beams: start at carrier rows; subdivide each gap so every cross-beam gap ≤ 60 cm.

Counts.

  • Main beams = intervalsW + 1
  • Cross-beam rows ≈ ceil(L / 60) + 1 (after subdivision)
  • Carriers (legs) = (intervalsW + 1) × (intervalsL + 1) (every main-beam × carrier-row intersection)

Example (470 × 530 cm):

Across 470 → gaps 118, 118, 118, 116 → 5 main beams

Along 530 → gaps 132, 132, 132, 134 → 5 carrier rows

Cross-beam subdivision: for 132 → 44, 44, 44; for 134 → 44, 44, 46 (all ≤ 60).

Total carriers: 25 (5 × 5)

 
Building Smarter Terraces: A Custom WooCommerce Calculator That Does the Math

Challenges & Solutions

  • Complex geometry: We adapted the formulas for uneven spacing while preserving calculation accuracy.
  • WooCommerce integration: The plugin automatically adds the required number of terrace legs to the cart.
  • PDF generation: A project summary can be downloaded immediately and is also sent via email after checkout.
  • Design precision: Every interface element was implemented in line with the Figma prototype for a clean, intuitive user experience.
  • Tight timeline: The project was delivered within approximately one week (30–40 hours).
Challenges & Solutions

Key outcomes

Accuracy – Even distribution with rule-based rounding for real-world geometry
UX – Guided steps, instant feedback, PDF download
Commerce – Auto product calculation and cart updates in WooCommerce

Work included:

  • Wireframes & UX flows
  • Figma-accurate UI implementation
  • Calculation engine (PHP)
  • Rule tuning & edge-case handling
  • PDF generation (DOMPDF)
  • WooCommerce add-to-cart hooks
  • Admin settings (spacing, product IDs)
  • QA scenarios & regression tests

Next steps

Future iterations may include visual layout previews, beam length optimization, localized units (in/ft), multi-language PDFs, and analytics events for funnel insights.

Engineered logic = trusted results

Clear spacing rules, consistent carrier distribution, and mathematically precise calculations eliminate guesswork and ensure structural accuracy.
Every spacing value follows engineering constraints and real-world construction logic, so customers can trust the numbers.
By validating all inputs and edge cases, the calculator guarantees results that are both reliable for builders and practical for purchasing decisions — reducing uncertainty, support questions, and product returns.

Seamless UX = higher conversion

From entering terrace dimensions to adding all required components to the cart, the entire flow is intuitive and frictionless.
The calculator provides instant visual feedback, auto-generates a branded PDF summary, and lets users finalize purchases without leaving the same page.
This smooth, guided experience not only simplifies complex planning but also boosts engagement, shortens the decision path, and measurably improves conversion rates.

Next steps

Key team members

Oleksii Lihachov

Oleksii Lihachov

Full-Stack Developer

Development

Artem Ishchenko

Artem Ishchenko

Back-end Developer

Development

Anna

Anna

Magento Web Developer

Development

Results

  • Fully functional custom calculator plugin delivered on time.
  • Accurate and reliable calculations with flexible geometry handling.
  • Seamless WooCommerce integration (auto product calculation and cart update).
  • Downloadable and emailed PDF summaries for each project.
  • A smooth, visually consistent user experience matching the Figma design.

Want a similar solution for your business?

If you’re looking for a custom calculator or WooCommerce-integrated plugin tailored to your business logic — we’ll make it happen. Contact us, and we’ll turn your concept into a precise, user-friendly digital tool.

More projects

Tell us what you're building

02
Oleksii, mobile app developer at Skynix

"I'm Oleksii. I work hands-on with our team here at Skynix, turning ideas into real, working products. Tell me what you're building — I read every request myself and reply within one business day."

Oleksii Prozhoha — Skynix, working hands-on with the team
What do you need?
Attach a wireframe or screenshot — PNG or JPG up to 5 MB.

Read by Oleksii · reply within one business day.

bracket icon
bracket icon
bracket icon
bracket icon
bracket icon
bracket icon
slash icon
slash icon
slash icon
slash icon
slash icon
slash icon
bracket icon
bracket icon
bracket icon
bracket icon
bracket icon
bracket icon