L’Haricoterie is a small delicatessen-type store located in the heart of Loire Valley, France. The shop core value is promoting local producers and distributing their organic, fair-trade products via a physical store and an e-commerce shop.
In 2017, Jean-Michel Guerton contacted me to create the WooCommerce website for L’Haricoterie. The e-shop was created with a strong relation with the “real” on-site store in mind.
What problem did I solve?
I had to develop a custom WooCommerce theme for L’Haricoterie with webdesigns created by Thomas. The specificity of this e-commerce development not only resided in its custom front-end user experience; this project had some complex technical challenges related to product and order management.
Thanks to the flexibility of WooCommerce, turning these custom needs into reality was a complete success.
Custom WooCommerce features
Product submission form and reward system
One of the many specificities of L’Haricoterie is that any user can promote and submit a product via a custom form. Once submitted, the product is then inserted as a draft product in WooCommerce; the admin can finally decide if it should be made available on the e-shop.
A custom reward system has been developed for this process: every time a “curated product” has been sold on the website, its original author gets a specific percentage and wins “haricots” (“beans”). These points can then be used on the e-shop as order discounts.
A custom user account section has been designed and developed and gives access to a detailed listing on points history (gains and uses).
Barcode implementation on WooCommerce products
From the beginning of this project, client was very clear that the on-site real store needed a deep integration with the e-shop. Every product has its own barcode, stored in WooCommerce as custom metadata.
Scanning barcodes
While shopping in the “real” Haricoterie store, a customer can use on-site smartphones, directly linked to the e-commerce site, and photo-scan products barcode to add them in their cart. The entire physical experience of shopping at L’Haricoterie is deeply integrated with WooCommerce; the on-site payment is done directly on the smartphone just like a normal web purchase.
On the server-side, barcode photo analysis and product search are powered via AJAX requests (Rest API) and the zbarcode PHP library.
Fetching nutritional data
In the back-office, WooCommerce products meta data has been extended to receive custom information relative to nutritional information, product weight and packaging details, expiration date, etc.
A custom PHP and JS development has been tailored to help the shop administrator fetch new product data automatically via third-party APIs (OpenFoodFacts, Nutritionix, Datakick & Outpan).
Once retrieved, data from the API (usually OpenFoodFacts) is transformed and inserted in specific fields (ingredients, nutritional information). This process is a huge time-saver for the admin, and is a great way to quickly store and enhance product details that are usually complex to enter manually.
Drive-in admin availabilities management
Because orders can be physically picked up at the Haricoterie store in Villedômer, I had to implement a custom way to define shop manager availabilities. An admin settings page has been developed so that the shop manager could precisely define his availability for every weekdays. For each available day, two time slots can be defined (morning and afternoon). Holidays can also be added in order to avoid any possible customer show-up on specific dates.
The drive-in customer form, on the front-end side Settings for the drive-in form, on the back-end side
To reflect these availabilities on the front-end, the WooCommerce checkout template has been highly customized. If a customer selects “Drive-in (pickup) delivery”, a new form will be displayed and user will have the possibility to choose the day and time to pickup its order in the Haricoterie store.