WooCommerce with ForgeWP

Build high-performance, reactive WooCommerce stores with React components.

On This Page

The Modern WooCommerce React Storefront

@forgewp/woocommerce combines the robustness of WooCommerce e-commerce backend with the speed and flexibility of modern React frontends.

Install @forgewp/woocommerce

pnpm add @forgewp/woocommerce

src/templates/ProductGrid.tsx

1import React from "react"
2import { ProductCard, CartDrawer, useCart } from "@forgewp/woocommerce"
3
4export function ShopPage({ products }) {
5  const { itemCount } = useCart()
6  return (
7    <div>
8      <header className="flex justify-between py-6">
9        <h1 className="text-3xl font-bold">Store</h1>
10        <CartDrawer badgeCount={itemCount} />
11      </header>
12      <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
13        {products.map(product => (
14          <ProductCard key={product.id} product={product} />
15        ))}
16      </div>
17    </div>
18  )
19}