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.

Offer a single course package with clear options:

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.

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.

Converted “Bhakti-Ratna 5” into a variable product with structured attributes:

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.

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.

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).

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.

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