The problem
Crea il tuo caffè lets customers design their own coffee blend and buy it roasted and packed. A standard product page with a few variations could not do this. The price depends on the mix of origins, the quantity, the roast and the packaging, and some buyers want their own logo on the bag.
What I built
I wrote a custom WordPress plugin that turns one WooCommerce product into a blend configurator.
- Origin sliders — 7 origins (Ethiopia, Guatemala, Brazil, Uganda, India, Vietnam, Indonesia) set in steps of 10%. The cart refuses the blend unless the total is exactly 100%.
- Suggested blends — customers can start from a recommended mix and adjust it. Tooltips rate each origin’s characteristics from 1 to 5 coffee beans.
- Live price — the price is the weighted sum of each origin’s price, updated on screen as the customer moves the sliders.
- Volume pricing — 1, 50, 100 or 250 kg. The price per kilo falls with quantity: half at 50 kg, 40% at 100 kg, a third at 250 kg.
- Roast and packaging — light, medium or dark roast; a plain bag, a bag with the customer’s uploaded logo, or a custom design proposal billed as a separate fee.
- Choices saved on the order — origins, quantity, roast, packaging and logo appear in the cart, checkout and order details, so the roaster knows exactly what to produce.
- Home page entry point — a configurator block on the home page, also available as a WPBakery element, passes the first choices to the product page.
Built with
WordPress, WooCommerce and the Larcorso theme with WPBakery; a custom PHP plugin with plain JavaScript and Swiper; WooPayments, Mailchimp for WordPress, Complianz for cookie consent and tawk.to live chat.
Why it was done this way
Blends, origins, flavour ratings and prices live in the product’s attributes in WooCommerce, not in the code. The client can change a price or a suggested blend from the normal product screen, and the configurator picks it up.
