Hearth
Designing an Editorial WordPress Commerce Site for Elevated Kitchen and Dinnerware
Project Overview: For this site, I was tasked with creating a fully functional WordPress storefront using a pre-built theme and the WooCommerce plugin. This meant learning how to work inside WordPress’s rigid theme systems while still producing a layout that felt visually cohesive. I used the Ruby Ecommerce theme as my starting point and WooCommerce to manage the product catalog and the add-to-cart and checkout experience. Throughout this project, I learned how to configure plugins, manage product data, and problem-solve around theme limitations while maintaining a clean, editorial layout.
The Problem: The project aimed to make kitchen upgrading more accessible. Most e-commerce sites bury great products under cluttered navigation and endless categories, which makes it difficult for users to understand what they actually need. By pre-selecting essential cookware and diningware, I set out to create a shop that removes that friction and gives users a clear, confident starting point for building a more elevated kitchen.
The Solution: To make the shopping experience feel more approachable, I selected a set of kitchen and dining essentials and built the structure of the site around that focused collection. The Home page introduces the value of the collection through simple messaging, lifestyle imagery, and clear category entry points so users understand what the shop offers before seeing any products.
WooCommerce handled the catalog and buying flow, but most of the work went into customizing Ruby Ecommerce’s default blocks to fit the shop’s style and voice. I refined the page hierarchy, incorporated a new color palette, and made typographic changes to accomplish an editorial aesthetic. The addition of the original product’s assets (photos and product descriptions) helped create descriptive and well-staged product pages. Customer reviews, category tiles, and the About page supported the browsing experience by giving users a better sense of what the shop offers
Throughout this project, I used WordPress’s block editor and custom styling to create a smoother browsing experience. My focus was on reducing visual noise and keeping the layout simple, so users could move through the shop without feeling overwhelmed. By limiting the site to the essentials and presenting each product clearly, the overall flow became more direct and confident.
Results: Building Hearth strengthened my ability to make design decisions within a constrained framework. I learned how WooCommerce organizes content and how themes can override certain styling choices. I also gained a better sense of how to adjust the site without breaking its structure. Moving forward, I want to explore more advanced customization, possibly through CSS overrides, and apply that knowledge in my final project now that I’m more familiar with WooCommerce.