Entrusted to complete the re-design of their WordPress e-commerce store, the mission was to:
- Revamp the look and feel of the website to create a superior user experience.
- Add functionality while maintaining / improving site speed
- Modernise the tooling which is used to build / deploy the site
I decided to use the WordPress native 2024 block theme for the following reasons:
- Lightweight & performant
- Reputable, well used and supported
- Takes advantage of WordPress blocks architecture (the direction in which WP is moving)
Project Kick Off!
The first step was to collaborate with a designer who would create the new site design. After an initial consultation with the client to outline the process and discuss the project in detail the designs were made and sent to client sent for approval. After some back and forth the designs were approved and I then began the process of bringing them to life!
This was the design of the homepage:

Development Workflow
I used the tool ‘Local‘ to build the site locally and regularly deployed the site to staging so that the client could see the work-in-progress and give feedback during this process.
In line with AGILE methodology, I believe that having small feedback loops is a good idea as problems are caught early and fixed instead of becoming bedded into the project and more difficult to root out. Furthermore, it ensures that the client’s voice is heard and they are able to shape the project into their vision.

Lazy Loading of Video on the Product Page
Task: The client wanted to have a video of the product on the product page but did not want this to slow down the page.
Solution: I used a lightweight plugin (WP Lazy Loading) to lazy load the video however, a custom hook was required in order for this lazy loading functionality to work in the WooCommerce Gallery in which the video sits.
Result: A much enhanced UX and a very small impact on Page Load Speed! On page load, a placeholder image is loaded, it is only after the user clicks watch does the actual video start to load.
Deployment Process
The building of this site took around 6 weeks, during which time there were many new orders and customers registered on the existing site. These now had to be added to the redesigned site’s DB which is harder than it should be due to the structure of the WordPress database!
New orders were added using this plugin, new users were directly added through the database as this was the fastest and most reliable solution. This does somewhat simplify what is a fairly tricky process that requires good knowledge of the WooCommerce database and the pitfalls to avoid such as emailing every single customer in the database by mistake!
Following the data transfer, manual testing was done to ensure all customer accounts were still linked correctly to their Moodle account and they could access the courses which they had already bought.
The following process was then followed to deploy the site to live:
- Deploy site to staging
- Test on Staging
- Activate ‘Maintence Banner’ on live site to ensure new orders could not be made
- Integrate new orders/customers into new site
- Deploy site to live
- Run tests on live to ensure site work
- Remove ‘Maintence Banner’ and monitor closely for 24 hours
Given the architecture of WordPress and the tools at our disposal in this situation making a smooth deployment process where there was testing at every stage was a challenge. However, the process was still robust and ultimately let to the site being deployed successfully.