WooCommerce Ice-Cream Configurator

Eiswerk Brehna makes ice cream in Brehna, Saxony-Anhalt, and sells it in cups, online and to businesses. Their shop was to let a customer put together a cup of their own: choose the flavours, set the order of the layers, add their own label and order as many cups as they need. They brought ready-made product designers such as Zakeke as inspiration, and wanted a flow of their own.

WooCommerce sells products with fixed variants. Every combination of flavours and layer order would have needed a variant of its own, and a label file has no place in a variant at all. The price had to follow each choice, and whoever fills the cups had to see what goes in, in which order, under which label.

We built a WooCommerce plugin that places the configurator on any page through a shortcode. The customer works on one screen. There is one size, a 550 ml cup. The customer names it and picks flavours from a grid of pictures. A drawing of the cup fills from the bottom, one layer per flavour, each showing that flavour's picture. Arrows move a layer up or down, a cross removes it. A cup takes two to four flavours. The customer can attach a label design as a PDF, sets the number of cups and sees the price change with every step. The cup in progress stays in the browser session, so reloading the page does not lose it.

Every finished cup becomes a WooCommerce product of its own, hidden from the catalogue. Its name carries the cup's name, the number of cups and the flavours. Its description lists the layers in order and links the label file. In the cart it is one line. From there, checkout, payment and order emails work as for any other product, and the team finds recipe and label on the product the order points to. The server works out the price again when it creates the cup, from the settings and the chosen flavours: a start price, a surcharge for each distinct flavour and a volume discount by number of cups. The price in the browser is for display only.

Flavours are ordinary WooCommerce products in a category the plugin creates. The first gallery picture of a flavour becomes its layer in the cup, so the product photo stays as it is. A flavour without that picture does not appear in the configurator, which is easy to miss when adding a new one. A button on each flavour's product page can send the customer on to the configurator.

Most changes after January 2023 concerned prices and tax. WooCommerce gives a product created in code the standard tax class, whatever its flavours carry, so from March 2023 each cup took the tax class of its first flavour. The start price came from the catalogue at first: in late December 2022 the cheapest flavour product, two days later only products with 550 in their name. That saved keeping a price in a second place and tied the price to how products were named. The flavour surcharge sat in the code. In August 2023 we moved start price, flavour surcharge, the smallest and largest order and the texts around the configurator to a settings page in the WordPress admin, nine fields in all, and added the volume discount. From then on a price change needed no new plugin version.

For the same shop we built a second plugin in November and December 2022: plus and minus buttons in the product list and a cart in the sidebar that updates its total without reloading the page.

The plugin is PHP for WordPress and WooCommerce. It registers the shortcode, creates the two product categories it needs and gives the configurator an endpoint of its own that lists the flavours, creates the cup product and puts it in the cart. The configurator is a Vue 3 app with Pinia and Tailwind CSS, built with Vite into one script that the shortcode writes into the page. A build script raises the version number and packs the plugin as a zip to upload in the WordPress admin.

The first version, on 3 December 2022, showed a paper cup turning in 3D with three.js. Four days later we replaced it with the flat drawing. The 3D cup looked good and showed nothing of what the customer had picked. The flat one shows exactly that, and it runs without WebGL.

Customers could build a cup, attach a label and order it in quantity on one page, and Eiswerk received an ordinary WooCommerce order with recipe and label link on the ordered product. Eiswerk's shop no longer runs on WooCommerce, and the configurator is not online any more. Personalised cups for businesses now start with an enquiry form on their site.

Two things we would do differently today. The label PDFs went into a folder inside the plugin, and WordPress replaces a plugin's folder when a new version is installed. They belong in the uploads folder. And only the browser checked that a file was a PDF. The server should check it as well.

If you want customers to configure a product in your shop, this carries over. Turn each configuration into a normal product or order line, so checkout, payment and order emails stay untouched. Work out the price on the server and never take one from the browser. Show customers what they chose rather than a model of the empty product. Put prices and limits where your team can change them without a developer.