Introduction
This client is someone we have worked with for many years with other businesses and websites who came to us with a new business they were launching.
The new business was an ecommerce store like their others, but selling a small range of configurable items. Customers needed to be able to set the dimensions of the products they were buying and in real time see the price update based on their chosen dimensions.
The client had experience using WordPress, so of course they wanted to take advantage of WordPress and WooCommerce for this build as well.
It needed to be fast, easy to navigate, simple to use and flexible enough to grow with them.
Project Scope
The client spent a while working with their suppliers to nail down how these configurable items will sell on the site and compiling a large spreadsheet of the different colours, sizes, pricing that we would need to work with.
The key focus for this project was the functionality for the configurable products on the front end. We needed to find a solution that talked to WooCommerce and updated the price of the product in real time. We also needed to set up pricing logic between certain ranges of dimensions, so that as users triggered the next range, the multiplier changed too. Of course this all needed to be intuitive and easy for customers to use.
The client had a very clear idea of how they envisaged it working on the front end for the customers, and it was our job to make that vision become a reality.
Development and Technology
The foundations of this build were WordPress and WooCommerce and we opted to use ACF (Advanced Custom Fields) blocks for this project as well. There were a few evergreen pages on the site which we wanted to make as easy as possible for the client to update, and we wanted to take advantage of the block editor for these.
For the configurable products we used a combination of a pricing formula plugin for WooCommerce to help with some of the pricing logic and a JavaScript UI library to turn the number fields into range sliders. It worked great, with the formulas editable in the backend and dynamic JS logic respecting whatever was set in the backend.
We utilised ACF again for the single product pages to allow the client to add multiple downloadable spec sheets.
We also used AJAX filtering on the shop pages for customers to be able to quickly find exactly what they are looking for.
Results and Outcomes
The result was a clean, modern, fast ecommerce store that is super easy to navigate.
The client was thrilled that we had managed to capture the exact vision they had for the product pages to help customers configure the items as easily as possible and responsively across all devices.
Being a new site, it was going to take some time to drive traffic and sales, but with a focussed marketing campaign for our internal SEO team at the time, they made their first sales in record time and were thrilled by how easy it was to maintain in the WordPress backend.
They particularly noted how easy the new block editor was to use and how much they enjoyed being able to visually see the page content as they were editing it, rather than entering the data into meta fields as they had done previously with their other sites.
Join our waiting list & get 40% off!
Limited to the first 5 companies that sign up.
