Skip to main content

Attractive Mart

Attractive Mart storefront homepage with a diecast car hero, shop-by-category tiles, a product grid, and an FAQ section

Overview

Attractive Mart is a WooCommerce store for diecast cars, hobby toys, and everyday gadgets, built on a custom Astra child theme. The storefront replaces the stock WooCommerce templates with its own homepage, category browsing, product grid, slide-out cart and account drawers, and checkout, styled with Tailwind CSS.

What I Built

  • Custom Astra child theme
  • Homepage with hero, categories, and FAQ
  • Product grid with category filters
  • AJAX add-to-cart
  • Slide-out cart drawer
  • Account drawer
  • Product search
  • Product image gallery
  • Customized checkout
  • Responsive mobile menu

Tech Stack

WordPressWooCommercePHPTailwind CSSJavaScript

Links

Visit Store

Challenges Faced

WooCommerce and Astra both ship their own markup and styles, so a custom design meant overriding templates without breaking the cart, checkout, and account flows they depend on. The cart and account drawers had to stay in sync with WooCommerce's cart fragments after AJAX add-to-cart, and Tailwind's utility classes had to coexist with the parent theme's global CSS without leaking into each other.

Future Plans & Improvements

Add product reviews and a wishlist, grow the catalog beyond the launch collection, and add local payment and delivery options at checkout.