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. 

The custom WooCommerce shop page of L’Haricoterie

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.

User account rewards summary table
User account rewards summary table

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

Getting product data from a barcode
Getting product data from a barcode

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.

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.

elit. ipsum Aliquam Sed Phasellus ut