PROJECT
FHJ — Jewellery Website Revamp
Frontend and WooCommerce experience improvements for a Hong Kong fine jewellery website.
OVERVIEW
The project.
THE CHALLENGE
What needed to change.
The existing website already contained an established WooCommerce catalogue, product data, plugins and theme infrastructure, so a complete rebuild was neither necessary nor desirable.
The challenge was to introduce a refreshed visual direction and improve the shopping experience while continuing to work within the existing WordPress ecosystem.
Several requirements also went beyond standard theme settings. These included responsive navigation behaviour, product filtering and presentation, variation selection, size guidance, wishlist interactions, bilingual interface elements, and page-specific styling.
The project therefore required a balance between preserving the existing system and selectively extending or overriding it where greater control was needed.
THE APPROACH
How I approached it.
I approached the revamp as a progressive enhancement of the existing website rather than replacing its underlying commerce system.
The existing WordPress and WooCommerce architecture was retained, while individual customer-facing components were reviewed and customised according to the new design requirements.
Key areas of work included:
Product catalogue experience
Refined product presentation, typography, alignment, sorting and category filtering to create a cleaner and more consistent browsing experience.
Product detail experience
Customised WooCommerce variation interfaces, size selection labels, size-guide behaviour, product availability messaging and other product-specific interactions.
Wishlist experience
Adjusted the wishlist presentation and interactions to better integrate it with the redesigned product experience.
Responsive navigation
Implemented and refined mobile navigation behaviour separately from the desktop experience, including responsive menu layouts and page-specific header treatments.
Content and visual consistency
Updated layouts and styling across service, story, contact and other content pages to establish a more consistent visual language throughout the website.
Bilingual compatibility
Implemented interface changes with the site’s English and Traditional Chinese content structure in mind, including translatable WooCommerce interface elements.
Where the existing theme or plugins could provide the required functionality, I retained them. Where they could not, I introduced targeted PHP, CSS and JavaScript customisations rather than adding unnecessary plugins or rebuilding entire sections.
SELECTED SCREENS
Across desktop and mobile.
SERVICES
Frontend Development
WordPress Customisation
WooCommerce Customisation
Responsive Development
UI / UX Implementation
Theme & Plugin Integration
TECHNOLOGIES
WordPress
WooCommerce
PHP
JavaScript
CSS
Elementor
ACF
TranslatePress
OUTCOME
The result.
The completed revamp delivers a more consistent and refined customer-facing experience while preserving FHJ’s existing WordPress and WooCommerce infrastructure.
Product discovery, product detail interactions, wishlist presentation, responsive navigation and supporting content pages now follow a more cohesive design direction across desktop and mobile.
By extending the existing system rather than replacing it, the project avoided an unnecessary platform migration while still allowing substantial frontend and user-experience improvements.
The resulting website remains manageable through the existing WordPress backend while providing greater flexibility for future content, product and interface updates.