Casa Beds & Appliances

Premium Furniture & Appliance Store NZ

Project Introduction

Casa Beds & Appliances is an online furniture and appliance retailer based in New Zealand. The business offers a wide range of furniture, bedroom suites, dining sets, sofas, and home appliances with flexible finance options and nationwide delivery.

The goal of this project was to build a professional, responsive online store that allows customers to browse products, select product variations, and make purchases easily — all powered by WordPress and WooCommerce.

Check it out

My Role

As the Frontend Developer, I was responsible for:

  • Developing the entire frontend user interface using WordPress and WooCommerce.
  • Integrating and enhancing WooCommerce to support custom shopping cart behavior.
  • Creating a custom color swatch widget to replace default variation selectors, enhancing the shopping experience for products with visual variations (e.g., color, finish).
  • Ensuring responsiveness, performance, and brand-aligned design across devices.

My contributions spanned UI implementation, interaction refinement, and customizing core WooCommerce features for a better purchasing flow.

Target Audience

The website primarily serves:

  • Homeowners and renters looking for affordable furniture and appliances.
  • Budget-conscious shoppers who prefer flexible payment options (including weekly payment plans and finance terms).
  • Customers in New Zealand who want fast delivery and online purchasing convenience.

The UX was optimized for users who are browsing on both desktop and mobile — with clear product categorization and straightforward checkout flows.

Challenges

  1. WooCommerce Customization Limitations

    WooCommerce's default variation selector was limited for products with multiple visual options (e.g., color/finish). I needed a solution that helped users preview and select options more intuitively.

  2. Responsive and Accessible UX

    Ensuring that interactive elements (like the cart and swatches) worked seamlessly on varied screen sizes and touch devices required careful design and testing.

  3. Cart Flow Optimization

    Simplifying the add-to-cart and checkout experience — especially for finance and weekly payment options — while keeping interactions smooth and performant posed technical challenges.

My Approach

Heres how I tackled these challenges:

  • Frontend Architecture
    • Built the frontend using custom WordPress templates and WooCommerce hooks.
    • Ensured consistent styling and responsive layouts using a combination of modern CSS (Flexbox/Grid) and JavaScript enhancements.
  • Custom Color Swatch Widget
    • Replaced the default WooCommerce dropdowns with visual color swatches.
    • Implemented a modular JS component that dynamically updates product images and selected variation based on swatch choice.
    • Improved UI clarity for customers selecting product variants.