Home HTML and CSS Responsive WooCommerce Header with Mega Menu & Cart

Responsive WooCommerce Header with Mega Menu & Cart

Share

In this tutorial, we will create a modern Responsive WooCommerce Header using HTML, Tailwind CSS, JavaScript, and Font Awesome 6.7.2.

This e commerce header features a clean design with a product search bar, account drop-down, wishlist’s, shopping cart, and responsive navigation. Additionally, it includes a multi-column mega menu and an interactive right-side shopping cart drawer.

Whether you are building an online shopping website or a custom e commerce interface, this design provides a useful starting point. Let’s explore its important features and functionality.

Important Features

  • Responsive Header: Adapts to desktop, tablet, and mobile screens. Therefore, visitors can easily navigate your website on different devices.
  • Mega Menu: Displays product categories in four organized columns, making product browsing easier.
  • Drop-down Navigation: Includes Shop, Men, Women, and Electronics menus. Additionally, each menu provides useful navigation links.
  • Mobile Menu: Uses expandable sections to organize categories on smaller screens.
  • Product Cards: Displays product images, names, prices, and Add to Cart buttons.
  • Shopping Cart Drawer: Opens from the right side without leaving the current page.
  • Cart Quantity Controls: Allows customers to increase, decrease, and remove products.
  • Automatic Price Calculation: Updates the cart subtotal and total whenever product quantities change.

Technologies Used

This project uses four main front-end technologies:

  • HTML5: Creates the structure of the header, navigation, product cards, and shopping cart.
  • Tailwind CSS: Provides responsive styling, spacing, colors, and layouts.
  • JavaScript: Handles shopping cart functionality, quantity updates, and price calculations.
  • Font Awesome 6.7.2: Adds modern icons for navigation, shopping, accounts, and other actions.

How to Use This Code

Follow these simple steps to run the project:

  1. Create a folder named mctshop-header.
  2. Inside the folder, create an index.html file.
  3. Copy the complete HTML, Tailwind CSS, and JavaScript code.
  4. Save the file and open it in your browser.
  5. Test the drop-down menus, mega menu, mobile navigation, and shopping cart.

You will also like this post

  1. How to Make Your Sticky Navigation Bar Mobile-Friendly
  2. How To Create Sidebar Header HTML & CSS
  3. Responsive Navbar Using HTML CSS And JavaScript
  4. Responsive Navbar Using HTML CSS
  5. Responsive Ecommerce Header Using HTML, CSS & Js

index.html


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MCTShop - WooCommerce Header Code By Mycodingtutorial</title>

<script src="https://cdn.tailwindcss.com"></script>

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
</head>

<body class="bg-gray-50">

<!-- ================= HEADER ================= -->

<header class="bg-white shadow-sm relative z-30">

    <!-- Top Bar -->
    <div class="hidden sm:block bg-gray-950 text-white">
        <div class="max-w-7xl mx-auto px-5 py-2 flex justify-between text-xs">
            <p>Free shipping on orders over $50</p>
            <div class="flex gap-5">
                <a href="#" class="hover:text-purple-400">Help Center</a>
                <a href="#" class="hover:text-purple-400">Track Order</a>
                <a href="#" class="hover:text-purple-400">Contact</a>
            </div>
        </div>
    </div>

    <!-- Main Header -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4">

        <div class="flex items-center justify-between gap-4">

            <!-- Logo -->
            <a href="#" class="flex items-center gap-2 shrink-0">
                <div class="w-10 h-10 bg-purple-600 rounded-xl flex items-center justify-center">
                    <i class="fa-solid fa-bag-shopping text-white text-xl"></i>
                </div>
                <span class="text-2xl font-extrabold text-gray-900">
                    MCT<span class="text-purple-600">Shop.</span>
                </span>
            </a>

            <!-- Desktop Search -->
            <div class="hidden md:flex flex-1 max-w-xl mx-5">
                <div class="flex w-full border border-gray-200 rounded-xl overflow-hidden focus-within:border-purple-500">
                    <input type="search" placeholder="Search products..."
                    class="w-full px-4 py-3 outline-none text-sm">
                    <button class="bg-purple-600 px-6 text-white hover:bg-purple-700">
                        <i class="fa-solid fa-magnifying-glass"></i>
                    </button>
                </div>
            </div>

            <!-- Header Actions -->
            <div class="flex items-center gap-3 sm:gap-5">

                <!-- Account Dropdown -->
                <div class="relative hidden lg:block group">
                    <button class="flex items-center gap-2 text-gray-700 hover:text-purple-600 py-2">
                        <i class="fa-regular fa-user text-xl"></i>
                        <span class="text-sm font-semibold">My Account</span>
                        <i class="fa-solid fa-chevron-down text-[10px]"></i>
                    </button>

                    <div class="absolute right-0 top-full pt-2 w-56 invisible opacity-0 translate-y-2
                    group-hover:visible group-hover:opacity-100 group-hover:translate-y-0
                    group-focus-within:visible group-focus-within:opacity-100 group-focus-within:translate-y-0
                    transition-all duration-200">

                        <div class="bg-white rounded-xl shadow-xl border border-gray-100 p-2">
                            <a href="#" class="flex gap-3 items-center px-4 py-3 rounded-lg hover:bg-purple-50 hover:text-purple-600 text-sm">
                                <i class="fa-regular fa-user"></i> My Profile
                            </a>
                            <a href="#" class="flex gap-3 items-center px-4 py-3 rounded-lg hover:bg-purple-50 hover:text-purple-600 text-sm">
                                <i class="fa-solid fa-box"></i> My Orders
                            </a>
                            <a href="#" class="flex gap-3 items-center px-4 py-3 rounded-lg hover:bg-purple-50 hover:text-purple-600 text-sm">
                                <i class="fa-solid fa-gear"></i> Account Settings
                            </a>
                            <a href="#" class="flex gap-3 items-center px-4 py-3 rounded-lg hover:bg-purple-50 hover:text-purple-600 text-sm">
                                <i class="fa-solid fa-right-from-bracket"></i> Logout
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Mobile/Tablet Account -->
                <a href="/my-account/" aria-label="My Account"
                class="lg:hidden text-gray-700 hover:text-purple-600">
                    <i class="fa-regular fa-user text-xl"></i>
                </a>

                <!-- Wishlist -->
                <a href="#" aria-label="Wishlist"
                class="relative text-gray-700 hover:text-purple-600">
                    <i class="fa-regular fa-heart text-xl"></i>
                    <span class="absolute -top-2 -right-2 bg-purple-600 text-white text-[10px] w-4 h-4 rounded-full flex items-center justify-center">2</span>
                </a>

                <!-- Cart -->
                <button id="openCart" aria-label="Shopping Cart"
                class="relative text-gray-700 hover:text-purple-600">
                    <i class="fa-solid fa-cart-shopping text-xl"></i>
                    <span id="cartCount" class="absolute -top-2 -right-2 bg-purple-600 text-white text-[10px] w-4 h-4 rounded-full flex items-center justify-center">0</span>
                </button>

                <!-- Mobile Menu -->
                <button type="button" popovertarget="mobile-menu"
                aria-label="Open Menu"
                class="md:hidden text-gray-700 hover:text-purple-600">
                    <i class="fa-solid fa-bars text-xl"></i>
                </button>

            </div>
        </div>

        <!-- Mobile Search -->
        <div class="md:hidden mt-4">
            <div class="flex border border-gray-200 rounded-xl overflow-hidden focus-within:border-purple-500">
                <input type="search" placeholder="Search products..."
                class="w-full px-4 py-3 outline-none text-sm">
                <button class="bg-purple-600 px-5 text-white">
                    <i class="fa-solid fa-magnifying-glass"></i>
                </button>
            </div>
        </div>

    </div>


    <!-- ================= DESKTOP NAVIGATION ================= -->

    <nav class="hidden md:block border-t border-gray-100">

        <div class="max-w-7xl mx-auto px-6 flex items-center justify-between">

            <div class="flex items-center gap-7 text-sm font-semibold text-gray-700">

                <!-- Home -->
                <a href="#" class="py-5 text-purple-600 hover:text-purple-700">
                    Home
                </a>


                <!-- SHOP CATEGORIES MEGA MENU -->
                <div class="relative group">

                    <button class="flex items-center gap-2 py-5 hover:text-purple-600">
                        <i class="fa-solid fa-border-all"></i>
                        Shop Categories
                        <i class="fa-solid fa-chevron-down text-[10px]"></i>
                    </button>

                    <!-- Mega Menu -->
                    <div class="absolute left-0 top-full pt-1 w-[850px] invisible opacity-0 translate-y-3
                    group-hover:visible group-hover:opacity-100 group-hover:translate-y-0
                    group-focus-within:visible group-focus-within:opacity-100 group-focus-within:translate-y-0
                    transition-all duration-200">

                        <div class="bg-white border border-gray-100 rounded-2xl shadow-2xl p-7">

                            <div class="grid grid-cols-4 gap-7">

                                <!-- Column 1 -->
                                <div>
                                    <h3 class="text-gray-900 font-bold mb-5 flex items-center gap-2">
                                        <i class="fa-solid fa-shirt text-purple-600"></i>
                                        Fashion
                                    </h3>

                                    <div class="space-y-3 text-sm font-normal">
                                        <a href="#" class="block text-gray-500 hover:text-purple-600">Men's Clothing</a>
                                        <a href="#" class="block text-gray-500 hover:text-purple-600">Women's Clothing</a>
                                        <a href="#" class="block text-gray-500 hover:text-purple-600">T-Shirts</a>
                                        <a href="#" class="block text-gray-500 hover:text-purple-600">Jeans & Trousers</a>
                                        <a href="#" class="block text-gray-500 hover:text-purple-600">Jackets</a>
                                        <a href="#" class="block text-gray-500 hover:text-purple-600">Footwear</a>
                                    </div>
                                </div>

                                <!-- Column 2 -->
                                <div>
                                    <h3 class="text-gray-900 font-bold mb-5 flex items-center gap-2">
                                        <i class="fa-solid fa-laptop text-purple-600"></i>
                                        Electronics
                                    </h3>

                                    <div class="space-y-3 text-sm font-normal">
                                        <a href="#" class="block text-gray-500 hover:text-purple-600">Smartphones</a>
                                        <a href="#" class="block text-gray-500 hover:text-purple-600">Laptops</a>
                                        <a href="#" class="block text-gray-500 hover:text-purple-600">Headphones</a>
                                        <a href="#" class="block text-gray-500 hover:text-purple-600">Smart Watches</a>
                                        <a href="#" class="block text-gray-500 hover:text-purple-600">Cameras</a>
                                        <a href="#" class="block text-gray-500 hover:text-purple-600">Accessories</a>
                                    </div>
                                </div>

                                <!-- Column 3 -->
                                <div>
                                    <h3 class="text-gray-900 font-bold mb-5 flex items-center gap-2">
                                        <i class="fa-solid fa-house text-purple-600"></i>
                                        Home & Living
                                    </h3>

                                    <div class="space-y-3 text-sm font-normal">
                                        <a href="#" class="block text-gray-500 hover:text-purple-600">Furniture</a>
                                        <a href="#" class="block text-gray-500 hover:text-purple-600">Home Decor</a>
                                        <a href="#" class="block text-gray-500 hover:text-purple-600">Kitchen Items</a>
                                        <a href="#" class="block text-gray-500 hover:text-purple-600">Lighting</a>
                                        <a href="#" class="block text-gray-500 hover:text-purple-600">Bedding</a>
                                        <a href="#" class="block text-gray-500 hover:text-purple-600">Storage</a>
                                    </div>
                                </div>

                                <!-- Column 4 -->
                                <div>
                                    <h3 class="text-gray-900 font-bold mb-5 flex items-center gap-2">
                                        <i class="fa-solid fa-basketball text-purple-600"></i>
                                        More Categories
                                    </h3>

                                    <div class="space-y-3 text-sm font-normal">
                                        <a href="#" class="block text-gray-500 hover:text-purple-600">Sports</a>
                                        <a href="#" class="block text-gray-500 hover:text-purple-600">Beauty</a>
                                        <a href="#" class="block text-gray-500 hover:text-purple-600">Toys & Games</a>
                                        <a href="#" class="block text-gray-500 hover:text-purple-600">Books</a>
                                        <a href="#" class="block text-gray-500 hover:text-purple-600">Bags</a>
                                        <a href="#" class="block text-gray-500 hover:text-purple-600">Accessories</a>
                                    </div>
                                </div>

                            </div>

                            <!-- Mega Menu Bottom -->
                            <div class="mt-7 pt-5 border-t border-gray-100 flex justify-between items-center">

                                <p class="text-sm text-gray-500">
                                    Discover all our product categories.
                                </p>

                                <a href="/shop/" class="text-purple-600 font-bold text-sm hover:text-purple-800">
                                    View All Categories
                                    <i class="fa-solid fa-arrow-right ml-2"></i>
                                </a>

                            </div>

                        </div>
                    </div>
                </div>


                <!-- SHOP DROPDOWN -->
                <div class="relative group">

                    <button class="flex items-center gap-2 py-5 hover:text-purple-600">
                        Shop
                        <i class="fa-solid fa-chevron-down text-[10px]"></i>
                    </button>

                    <div class="absolute left-0 top-full pt-1 w-60 invisible opacity-0 translate-y-2
                    group-hover:visible group-hover:opacity-100 group-hover:translate-y-0
                    group-focus-within:visible group-focus-within:opacity-100 group-focus-within:translate-y-0
                    transition-all duration-200">

                        <div class="bg-white rounded-xl shadow-xl border border-gray-100 p-2">

                            <a href="/shop/" class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-purple-50 hover:text-purple-600">
                                <i class="fa-solid fa-store w-5"></i> All Products
                            </a>

                            <a href="#" class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-purple-50 hover:text-purple-600">
                                <i class="fa-solid fa-sparkles w-5"></i> New Arrivals
                            </a>

                            <a href="#" class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-purple-50 hover:text-purple-600">
                                <i class="fa-solid fa-fire w-5"></i> Best Sellers
                            </a>

                            <a href="#" class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-purple-50 hover:text-purple-600">
                                <i class="fa-solid fa-percent w-5"></i> Sale Products
                            </a>

                        </div>
                    </div>
                </div>


                <!-- MEN DROPDOWN -->
                <div class="relative group">

                    <button class="flex items-center gap-2 py-5 hover:text-purple-600">
                        Men
                        <i class="fa-solid fa-chevron-down text-[10px]"></i>
                    </button>

                    <div class="absolute left-0 top-full pt-1 w-52 invisible opacity-0 translate-y-2
                    group-hover:visible group-hover:opacity-100 group-hover:translate-y-0
                    group-focus-within:visible group-focus-within:opacity-100 group-focus-within:translate-y-0
                    transition-all duration-200">

                        <div class="bg-white rounded-xl shadow-xl border border-gray-100 p-2">
                            <a href="#" class="block px-4 py-3 rounded-lg hover:bg-purple-50 hover:text-purple-600">T-Shirts</a>
                            <a href="#" class="block px-4 py-3 rounded-lg hover:bg-purple-50 hover:text-purple-600">Shirts</a>
                            <a href="#" class="block px-4 py-3 rounded-lg hover:bg-purple-50 hover:text-purple-600">Jeans</a>
                            <a href="#" class="block px-4 py-3 rounded-lg hover:bg-purple-50 hover:text-purple-600">Shoes</a>
                            <a href="#" class="block px-4 py-3 rounded-lg hover:bg-purple-50 hover:text-purple-600">Accessories</a>
                        </div>

                    </div>
                </div>


                <!-- WOMEN DROPDOWN -->
                <div class="relative group">

                    <button class="flex items-center gap-2 py-5 hover:text-purple-600">
                        Women
                        <i class="fa-solid fa-chevron-down text-[10px]"></i>
                    </button>

                    <div class="absolute left-0 top-full pt-1 w-52 invisible opacity-0 translate-y-2
                    group-hover:visible group-hover:opacity-100 group-hover:translate-y-0
                    group-focus-within:visible group-focus-within:opacity-100 group-focus-within:translate-y-0
                    transition-all duration-200">

                        <div class="bg-white rounded-xl shadow-xl border border-gray-100 p-2">
                            <a href="#" class="block px-4 py-3 rounded-lg hover:bg-purple-50 hover:text-purple-600">Dresses</a>
                            <a href="#" class="block px-4 py-3 rounded-lg hover:bg-purple-50 hover:text-purple-600">Tops</a>
                            <a href="#" class="block px-4 py-3 rounded-lg hover:bg-purple-50 hover:text-purple-600">Jeans</a>
                            <a href="#" class="block px-4 py-3 rounded-lg hover:bg-purple-50 hover:text-purple-600">Footwear</a>
                            <a href="#" class="block px-4 py-3 rounded-lg hover:bg-purple-50 hover:text-purple-600">Handbags</a>
                        </div>

                    </div>
                </div>


                <!-- ELECTRONICS DROPDOWN -->
                <div class="relative group">

                    <button class="flex items-center gap-2 py-5 hover:text-purple-600">
                        Electronics
                        <i class="fa-solid fa-chevron-down text-[10px]"></i>
                    </button>

                    <div class="absolute left-0 top-full pt-1 w-56 invisible opacity-0 translate-y-2
                    group-hover:visible group-hover:opacity-100 group-hover:translate-y-0
                    group-focus-within:visible group-focus-within:opacity-100 group-focus-within:translate-y-0
                    transition-all duration-200">

                        <div class="bg-white rounded-xl shadow-xl border border-gray-100 p-2">
                            <a href="#" class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-purple-50 hover:text-purple-600">
                                <i class="fa-solid fa-mobile-screen w-5"></i> Smartphones
                            </a>
                            <a href="#" class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-purple-50 hover:text-purple-600">
                                <i class="fa-solid fa-laptop w-5"></i> Laptops
                            </a>
                            <a href="#" class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-purple-50 hover:text-purple-600">
                                <i class="fa-solid fa-headphones w-5"></i> Headphones
                            </a>
                            <a href="#" class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-purple-50 hover:text-purple-600">
                                <i class="fa-solid fa-camera w-5"></i> Cameras
                            </a>
                        </div>

                    </div>
                </div>


                <a href="#" class="py-5 hover:text-purple-600">Contact</a>

            </div>

            <a href="#" class="text-sm font-bold text-purple-600 hover:text-purple-800">
                Special Offers <i class="fa-solid fa-arrow-right ml-1"></i>
            </a>

        </div>
    </nav>


    <!-- ================= MOBILE MENU ================= -->

    <div id="mobile-menu" popover
    class="m-0 inset-x-0 top-0 w-full max-w-none max-h-[100dvh] overflow-y-auto border-0 bg-white p-5 shadow-xl backdrop:bg-black/40">

        <div class="flex justify-between items-center mb-6">
            <a href="#" class="flex items-center gap-2 shrink-0">
                <div class="w-10 h-10 bg-purple-600 rounded-xl flex items-center justify-center">
                    <i class="fa-solid fa-bag-shopping text-white text-xl"></i>
                </div>
                <span class="text-2xl font-extrabold text-gray-900">
                    MCT<span class="text-purple-600">Shop.</span>
                </span>
            </a>

            <button popovertarget="mobile-menu" popovertargetaction="hide"
            aria-label="Close menu"
            class="w-10 h-10 rounded-full bg-gray-100">
                <i class="fa-solid fa-xmark"></i>
            </button>
        </div>

        <!-- Mobile Account -->
        <a href="/my-account/" class="flex items-center gap-3 p-4 mb-4 rounded-xl bg-purple-50 text-purple-700 font-semibold">
            <i class="fa-regular fa-user text-xl"></i>
            My Account
            <i class="fa-solid fa-arrow-right ml-auto"></i>
        </a>

        <nav class="flex flex-col text-sm">

            <a href="#" class="py-4 border-b font-semibold text-purple-600">
                <i class="fa-solid fa-house w-7"></i> Home
            </a>

            <!-- Mobile Mega Categories -->
            <details class="border-b group">
                <summary class="flex items-center justify-between py-4 font-semibold cursor-pointer list-none">
                    <span><i class="fa-solid fa-border-all w-7 text-purple-600"></i> Shop Categories</span>
                    <i class="fa-solid fa-plus text-xs group-open:hidden"></i>
                    <i class="fa-solid fa-minus text-xs hidden group-open:block"></i>
                </summary>

                <div class="bg-gray-50 rounded-xl p-4 mb-4 space-y-4">

                    <div>
                        <p class="font-bold text-gray-900 mb-3">
                            <i class="fa-solid fa-shirt text-purple-600 mr-2"></i> Fashion
                        </p>
                        <div class="grid grid-cols-2 gap-3 pl-2 text-gray-500">
                            <a href="#" class="hover:text-purple-600">Men's Clothing</a>
                            <a href="#" class="hover:text-purple-600">Women's Clothing</a>
                            <a href="#" class="hover:text-purple-600">T-Shirts</a>
                            <a href="#" class="hover:text-purple-600">Jeans</a>
                            <a href="#" class="hover:text-purple-600">Shoes</a>
                            <a href="#" class="hover:text-purple-600">Bags</a>
                        </div>
                    </div>

                    <div class="border-t pt-4">
                        <p class="font-bold text-gray-900 mb-3">
                            <i class="fa-solid fa-laptop text-purple-600 mr-2"></i> Electronics
                        </p>
                        <div class="grid grid-cols-2 gap-3 pl-2 text-gray-500">
                            <a href="#">Smartphones</a>
                            <a href="#">Laptops</a>
                            <a href="#">Headphones</a>
                            <a href="#">Smart Watches</a>
                            <a href="#">Cameras</a>
                            <a href="#">Accessories</a>
                        </div>
                    </div>

                    <div class="border-t pt-4">
                        <p class="font-bold text-gray-900 mb-3">
                            <i class="fa-solid fa-house text-purple-600 mr-2"></i> Home & Living
                        </p>
                        <div class="grid grid-cols-2 gap-3 pl-2 text-gray-500">
                            <a href="#">Furniture</a>
                            <a href="#">Home Decor</a>
                            <a href="#">Kitchen Items</a>
                            <a href="#">Lighting</a>
                        </div>
                    </div>

                    <div class="border-t pt-4">
                        <p class="font-bold text-gray-900 mb-3">
                            <i class="fa-solid fa-basketball text-purple-600 mr-2"></i> More
                        </p>
                        <div class="grid grid-cols-2 gap-3 pl-2 text-gray-500">
                            <a href="#">Sports</a>
                            <a href="#">Beauty</a>
                            <a href="#">Books</a>
                            <a href="#">Toys & Games</a>
                        </div>
                    </div>

                </div>
            </details>


            <!-- Mobile Shop -->
            <details class="border-b group">
                <summary class="flex items-center justify-between py-4 font-semibold cursor-pointer list-none">
                    <span><i class="fa-solid fa-store w-7 text-purple-600"></i> Shop</span>
                    <i class="fa-solid fa-plus text-xs group-open:hidden"></i>
                    <i class="fa-solid fa-minus text-xs hidden group-open:block"></i>
                </summary>

                <div class="pl-8 pb-4 space-y-4 text-gray-500">
                    <a href="/shop/" class="block">All Products</a>
                    <a href="#" class="block">New Arrivals</a>
                    <a href="#" class="block">Best Sellers</a>
                    <a href="#" class="block">Sale Products</a>
                </div>
            </details>


            <!-- Mobile Men -->
            <details class="border-b group">
                <summary class="flex items-center justify-between py-4 font-semibold cursor-pointer list-none">
                    <span><i class="fa-solid fa-person w-7 text-purple-600"></i> Men</span>
                    <i class="fa-solid fa-plus text-xs group-open:hidden"></i>
                    <i class="fa-solid fa-minus text-xs hidden group-open:block"></i>
                </summary>
                <div class="pl-8 pb-4 space-y-4 text-gray-500">
                    <a href="#" class="block">T-Shirts</a>
                    <a href="#" class="block">Shirts</a>
                    <a href="#" class="block">Jeans</a>
                    <a href="#" class="block">Shoes</a>
                    <a href="#" class="block">Accessories</a>
                </div>
            </details>


            <!-- Mobile Women -->
            <details class="border-b group">
                <summary class="flex items-center justify-between py-4 font-semibold cursor-pointer list-none">
                    <span><i class="fa-solid fa-person-dress w-7 text-purple-600"></i> Women</span>
                    <i class="fa-solid fa-plus text-xs group-open:hidden"></i>
                    <i class="fa-solid fa-minus text-xs hidden group-open:block"></i>
                </summary>
                <div class="pl-8 pb-4 space-y-4 text-gray-500">
                    <a href="#" class="block">Dresses</a>
                    <a href="#" class="block">Tops</a>
                    <a href="#" class="block">Jeans</a>
                    <a href="#" class="block">Footwear</a>
                    <a href="#" class="block">Handbags</a>
                </div>
            </details>


            <!-- Mobile Electronics -->
            <details class="border-b group">
                <summary class="flex items-center justify-between py-4 font-semibold cursor-pointer list-none">
                    <span><i class="fa-solid fa-laptop w-7 text-purple-600"></i> Electronics</span>
                    <i class="fa-solid fa-plus text-xs group-open:hidden"></i>
                    <i class="fa-solid fa-minus text-xs hidden group-open:block"></i>
                </summary>
                <div class="pl-8 pb-4 space-y-4 text-gray-500">
                    <a href="#" class="block">Smartphones</a>
                    <a href="#" class="block">Laptops</a>
                    <a href="#" class="block">Headphones</a>
                    <a href="#" class="block">Cameras</a>
                </div>
            </details>

            <a href="#" class="py-4 border-b font-semibold">
                <i class="fa-solid fa-phone w-7 text-purple-600"></i> Contact
            </a>

            <a href="#" class="py-4 font-semibold text-purple-600">
                <i class="fa-solid fa-percent w-7"></i> Special Offers
            </a>

        </nav>

    </div>

</header>


<!-- ================= DEMO PRODUCTS ================= -->

<main class="max-w-7xl mx-auto px-5 py-12">

    <div class="mb-8">
        <p class="text-purple-600 font-semibold text-sm">OUR COLLECTION</p>
        <h1 class="text-3xl sm:text-4xl font-extrabold text-gray-900 mt-2">
            Featured Products
        </h1>
        <p class="text-gray-500 mt-2">Discover our latest products.</p>
    </div>

    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">

        <!-- Product 1 -->
        <div class="bg-white rounded-2xl overflow-hidden border border-gray-100">
            <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=600"
            class="w-full aspect-square object-cover" alt="Watch">
            <div class="p-4">
                <p class="text-xs text-gray-400">Accessories</p>
                <h3 class="font-bold mt-1">Premium Watch</h3>
                <p class="text-purple-600 font-bold mt-2">$89.00</p>
                <button onclick="addToCart(1)"
                class="w-full mt-4 py-3 bg-purple-600 hover:bg-purple-700 text-white rounded-xl text-sm font-semibold">
                    <i class="fa-solid fa-cart-plus mr-2"></i> Add to Cart
                </button>
            </div>
        </div>

        <!-- Product 2 -->
        <div class="bg-white rounded-2xl overflow-hidden border border-gray-100">
            <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=600"
            class="w-full aspect-square object-cover" alt="Headphones">
            <div class="p-4">
                <p class="text-xs text-gray-400">Electronics</p>
                <h3 class="font-bold mt-1">Wireless Headphones</h3>
                <p class="text-purple-600 font-bold mt-2">$59.00</p>
                <button onclick="addToCart(2)"
                class="w-full mt-4 py-3 bg-purple-600 hover:bg-purple-700 text-white rounded-xl text-sm font-semibold">
                    <i class="fa-solid fa-cart-plus mr-2"></i> Add to Cart
                </button>
            </div>
        </div>

        <!-- Product 3 -->
        <div class="bg-white rounded-2xl overflow-hidden border border-gray-100">
            <img src="https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?w=600"
            class="w-full aspect-square object-cover" alt="Camera">
            <div class="p-4">
                <p class="text-xs text-gray-400">Electronics</p>
                <h3 class="font-bold mt-1">Digital Camera</h3>
                <p class="text-purple-600 font-bold mt-2">$129.00</p>
                <button onclick="addToCart(3)"
                class="w-full mt-4 py-3 bg-purple-600 hover:bg-purple-700 text-white rounded-xl text-sm font-semibold">
                    <i class="fa-solid fa-cart-plus mr-2"></i> Add to Cart
                </button>
            </div>
        </div>

        <!-- Product 4 -->
        <div class="bg-white rounded-2xl overflow-hidden border border-gray-100">
            <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=600"
            class="w-full aspect-square object-cover" alt="Shoes">
            <div class="p-4">
                <p class="text-xs text-gray-400">Fashion</p>
                <h3 class="font-bold mt-1">Running Shoes</h3>
                <p class="text-purple-600 font-bold mt-2">$75.00</p>
                <button onclick="addToCart(4)"
                class="w-full mt-4 py-3 bg-purple-600 hover:bg-purple-700 text-white rounded-xl text-sm font-semibold">
                    <i class="fa-solid fa-cart-plus mr-2"></i> Add to Cart
                </button>
            </div>
        </div>

    </div>

</main>


<!-- ================= CART OVERLAY ================= -->

<div id="cartOverlay"
class="fixed inset-0 bg-black/50 z-40 opacity-0 invisible transition-opacity duration-300">
</div>


<!-- ================= RIGHT CART DRAWER ================= -->

<aside id="cartDrawer"
class="fixed top-0 right-0 h-full w-full sm:max-w-md bg-white z-50 translate-x-full transition-transform duration-300 ease-in-out flex flex-col shadow-2xl"
aria-label="Shopping cart">

    <div class="flex items-center justify-between px-5 py-5 border-b">
        <div>
            <h2 class="text-xl font-extrabold">Shopping Cart</h2>
            <p class="text-xs text-gray-400 mt-1">
                <span id="headerCartCount">0</span> items in your cart
            </p>
        </div>

        <button id="closeCart" aria-label="Close cart"
        class="w-10 h-10 rounded-full bg-gray-100 hover:bg-purple-100 hover:text-purple-600 flex items-center justify-center">
            <i class="fa-solid fa-xmark text-lg"></i>
        </button>
    </div>

    <div class="px-5 py-4 bg-purple-50 border-b">
        <p class="text-sm text-gray-700">
            <i class="fa-solid fa-truck-fast text-purple-600 mr-2"></i>
            Free shipping on orders over $50!
        </p>
    </div>

    <div id="cartItems" class="flex-1 overflow-y-auto px-5 py-2"></div>

    <!-- Empty Cart -->
    <div id="emptyCart"
    class="hidden flex-1 flex-col items-center justify-center text-center px-5">

        <div class="w-20 h-20 rounded-full bg-purple-50 flex items-center justify-center mb-5">
            <i class="fa-solid fa-cart-shopping text-purple-500 text-3xl"></i>
        </div>

        <h3 class="text-xl font-bold">Your cart is empty</h3>
        <p class="text-sm text-gray-500 mt-2">Looks like you haven't added anything yet.</p>

        <button id="continueShopping"
        class="mt-6 bg-purple-600 hover:bg-purple-700 text-white px-7 py-3 rounded-xl font-semibold">
            Continue Shopping
        </button>
    </div>

    <!-- Cart Footer -->
    <div id="cartFooter" class="border-t p-5 bg-white">

        <div class="flex gap-2 mb-5">
            <input type="text" placeholder="Coupon code"
            class="flex-1 min-w-0 px-4 py-3 bg-gray-50 border rounded-xl text-sm outline-none focus:border-purple-500">

            <button class="px-4 py-3 bg-gray-900 text-white rounded-xl text-sm font-semibold hover:bg-purple-600">
                Apply
            </button>
        </div>

        <div class="flex justify-between text-sm text-gray-500 mb-3">
            <span>Subtotal</span>
            <span id="cartSubtotal">$0.00</span>
        </div>

        <div class="flex justify-between text-sm text-gray-500 mb-3">
            <span>Shipping</span>
            <span class="text-green-600 font-semibold">Calculated at checkout</span>
        </div>

        <div class="flex justify-between items-center border-t pt-4 mb-5">
            <span class="font-bold">Estimated Total</span>
            <span id="cartTotal" class="text-xl font-extrabold text-purple-600">$0.00</span>
        </div>

        <a href="/cart/"
        class="block text-center w-full border-2 border-gray-200 hover:border-purple-600 hover:text-purple-600 font-semibold py-3 rounded-xl">
            View Cart
        </a>

        <a href="/checkout/"
        class="block text-center w-full bg-purple-600 hover:bg-purple-700 text-white font-semibold py-4 rounded-xl mt-3">
            Proceed to Checkout
            <i class="fa-solid fa-arrow-right ml-2"></i>
        </a>

        <p class="text-center text-xs text-gray-400 mt-4">
            <i class="fa-solid fa-lock mr-1"></i>
            Secure checkout guaranteed
        </p>

    </div>

</aside>


<!-- ================= JAVASCRIPT ================= -->

<script>

const products = {
    1: {
        id: 1,
        name: "Premium Watch",
        sku: "WATCH-001",
        price: 89,
        image: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=300"
    },
    2: {
        id: 2,
        name: "Wireless Headphones",
        sku: "AUDIO-002",
        price: 59,
        image: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=300"
    },
    3: {
        id: 3,
        name: "Digital Camera",
        sku: "CAM-003",
        price: 129,
        image: "https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?w=300"
    },
    4: {
        id: 4,
        name: "Running Shoes",
        sku: "SHOE-004",
        price: 75,
        image: "https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=300"
    }
};

let cart = [];

const drawer = document.getElementById("cartDrawer");
const overlay = document.getElementById("cartOverlay");


// Open Cart
function openCart() {
    drawer.classList.remove("translate-x-full");
    overlay.classList.remove("opacity-0", "invisible");
    document.body.classList.add("overflow-hidden");
}


// Close Cart
function closeCart() {
    drawer.classList.add("translate-x-full");
    overlay.classList.add("opacity-0", "invisible");
    document.body.classList.remove("overflow-hidden");
}


// Add To Cart
function addToCart(id) {

    const product = products[id];

    const existing = cart.find(item => item.id === id);

    if (existing) {
        existing.quantity++;
    } else {
        cart.push({
            ...product,
            quantity: 1
        });
    }

    updateCart();
    openCart();
}


// Increase Quantity
function increaseQuantity(id) {
    const item = cart.find(item => item.id === id);

    if (item) item.quantity++;

    updateCart();
}


// Decrease Quantity
function decreaseQuantity(id) {

    const item = cart.find(item => item.id === id);

    if (!item) return;

    item.quantity--;

    if (item.quantity <= 0) {
        cart = cart.filter(product => product.id !== id);
    }

    updateCart();
}


// Remove Product
function removeProduct(id) {
    cart = cart.filter(item => item.id !== id);
    updateCart();
}


// Update Cart
function updateCart() {

    const cartItems = document.getElementById("cartItems");
    const emptyCart = document.getElementById("emptyCart");
    const cartFooter = document.getElementById("cartFooter");

    const totalQuantity = cart.reduce(
        (sum, item) => sum + item.quantity, 0
    );

    const subtotal = cart.reduce(
        (sum, item) => sum + item.price * item.quantity, 0
    );

    document.getElementById("cartCount").textContent = totalQuantity;
    document.getElementById("headerCartCount").textContent = totalQuantity;

    document.getElementById("cartSubtotal").textContent =
        "$" + subtotal.toFixed(2);

    document.getElementById("cartTotal").textContent =
        "$" + subtotal.toFixed(2);


    if (cart.length === 0) {

        cartItems.classList.add("hidden");

        emptyCart.classList.remove("hidden");
        emptyCart.classList.add("flex");

        cartFooter.classList.add("hidden");

        return;
    }

    cartItems.classList.remove("hidden");

    emptyCart.classList.add("hidden");
    emptyCart.classList.remove("flex");

    cartFooter.classList.remove("hidden");


    cartItems.innerHTML = cart.map(item => `

        <div class="flex gap-4 py-5 border-b border-gray-100">

            <div class="w-24 h-28 shrink-0 bg-gray-100 rounded-xl overflow-hidden">
                <img src="${item.image}"
                alt="${item.name}"
                class="w-full h-full object-cover">
            </div>

            <div class="flex-1 min-w-0">

                <div class="flex justify-between items-start gap-2">

                    <div class="min-w-0">
                        <h3 class="text-sm font-bold text-gray-900 leading-5">
                            ${item.name}
                        </h3>

                        <p class="text-xs text-gray-400 mt-2">
                            SKU: ${item.sku}
                        </p>
                    </div>

                    <button onclick="removeProduct(${item.id})"
                    class="text-gray-400 hover:text-red-500"
                    aria-label="Remove ${item.name}">
                        <i class="fa-regular fa-trash-can"></i>
                    </button>

                </div>

                <p class="text-purple-600 font-bold text-sm mt-2">
                    $${item.price.toFixed(2)}
                </p>

                <div class="flex items-center justify-between mt-3">

                    <div class="flex items-center border rounded-lg overflow-hidden">

                        <button onclick="decreaseQuantity(${item.id})"
                        class="w-8 h-8 hover:bg-gray-100">
                            <i class="fa-solid fa-minus text-xs"></i>
                        </button>

                        <span class="w-9 text-center text-sm font-semibold">
                            ${item.quantity}
                        </span>

                        <button onclick="increaseQuantity(${item.id})"
                        class="w-8 h-8 hover:bg-gray-100">
                            <i class="fa-solid fa-plus text-xs"></i>
                        </button>

                    </div>

                    <p class="text-sm font-bold">
                        $${(item.price * item.quantity).toFixed(2)}
                    </p>

                </div>

            </div>

        </div>

    `).join("");

}


// Cart Events
document.getElementById("openCart").addEventListener("click", openCart);

document.getElementById("closeCart").addEventListener("click", closeCart);

overlay.addEventListener("click", closeCart);

document.getElementById("continueShopping").addEventListener("click", closeCart);

document.addEventListener("keydown", function(e) {
    if (e.key === "Escape") {
        closeCart();
    }
});


// Initial Cart
updateCart();

</script>

</body>
</html>

Final Words

This Responsive WooCommerce Header provides a modern e commerce layout with useful navigation and shopping features. Moreover, its mega menu, mobile navigation, and interactive shopping cart help create a better browsing experience.

You can customize the colors, products, categories, and layout according to your website requirements. Finally, use this project as a starting point for developing your own e commerce website.

Explore more HTML, CSS, JavaScript, and WordPress tutorials on MyCodingTutorial.

Post Rating
6.4 / 10
User rating: 6.4 / 10
Rate this post
Click a number to rate this article.
Mycodingtutorial

Web Designer & Developer

Hello, I’m Mohit, is a PHP Developer and Web Designer skilled in PHP, HTML, CSS, JavaScript, MySQL, and WordPress. He creates responsive, modern, and user-friendly websites with a focus on clean UI/UX design.

-->