Course Enrollment Redesign from Figma to WordPress
Vladimir Dimitrow
Verified
Like this project
What the client had to say
Wonderful job! I like especially how you and your colleague Mitko are a great team in handling client communication and implementation.
Willi Mueller
Jan 24, 2026, Client
Posted Sep 25, 2025
Rebuilt Bhakti-Ratna 5 course page into a flexible, conversion-ready enrollment flow from Figma to Wordpress
Likes
0
Views
7
Timeline
Aug 5, 2025 - Jan 23, 2026
Jiva.org — Bhakti-Ratna 5 Course Package (Variable Product + Custom Enrollment UI)
Overview
We rebuilt the Bhakti-Ratna 5 course page into a flexible, conversion-ready enrollment flow. The course comes with multiple configuration paths (study track, visa support, accommodation with months/meals), so we implemented it as a WooCommerce variable product with a clean, guided UI—exactly matching the client’s Figma design and without a mini-cart.
Goals
Offer a single course package with clear options:
Study track: All Classes or Only Sanskrit
Visa support: Yes/No
Accommodation: Yes/No → if Yes: pick one of three classes, select 1–6 months, and meals 3× daily Yes/No
Show prices directly in option labels (e.g., Only Sanskrit ($120), All Classes ($250)).
Use the page /bhakti-ratna as the canonical CTA entry point, mirroring the provided design.
Remove the right-side mini-cart for a focused, distraction-free checkout path.
What We Delivered
1) Figma-to-Live Enrollment UI
Pixel-faithful implementation of the provided design on /bhakti-ratna with a simplified, step-by-step selector layout.
Clear price visibility inside each choice to reduce cognitive load and comparison friction.
Responsive layout with accessible controls and consistent spacing/typography.
2) Variable Product Architecture (WooCommerce)
Converted “Bhakti-Ratna 5” into a variable product with structured attributes:
Study Track (All Classes / Only Sanskrit)
Visa Support (Yes / No)
Accommodation (No / Yes → Class A/B/C • Months 1–6 • Meals Yes/No)
Conditional logic in the add-to-cart form: accommodation sub-options appear only when relevant.
Prices embedded in option labels and mapped to the correct variation pricing for accurate totals and taxes.
3) Streamlined Flow (No Mini-Cart)
Removed the mini-cart from the template to keep the user focused on selecting options and enrolling.
Clean server-side templates (no JS/CSS “hiding”) for a compliant, maintainable implementation.
4) Data, Validation & Clarity
Guardrails to prevent incomplete selections (e.g., months required if accommodation = Yes).
Human-readable variation titles in order/checkout for staff clarity (e.g., All Classes • Visa Support: Yes • Accommodation: Class B • 3 months • Meals: No).
Optional notes/tooltips for complex choices (e.g., how meals affect total).
Implementation Highlights
WooCommerce template overrides for the single product form to support nested/conditional attributes.
Variation/attribute schema designed to avoid explosion of combinations while keeping reporting clean.
Price-in-label strategy synced with variation data to ensure totals match what users see.
Lightweight, dependency-free front-end logic; accessible markup and keyboard-friendly controls.
Outcome
A single, elegant enrollment page that handles complex program configurations without confusing the user.
Higher clarity at selection time (prices in-line) and fewer drop-offs thanks to a focused, mini-cart-free layout.
Easier fulfillment and support with clear variation data in orders.
URL: jiva.org/bhakti-ratna
Stack: WordPress, WooCommerce (Variable Products), Custom templates
Role: UX/UI implementation from Figma, WooCommerce architecture, front-end build, QA & validation