> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/woocommerce/woocommerce/llms.txt
> Use this file to discover all available pages before exploring further.

# WooCommerce Developer Documentation

<div className="relative overflow-hidden bg-gradient-to-br from-[#843cfb] via-[#7e3ff2] to-[#c49cf2] dark:from-[#1a1d27] dark:via-[#242838] dark:to-[#1a1d27] py-20">
  <div className="max-w-6xl mx-auto px-6 lg:px-8">
    <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
      <div className="lg:col-span-7">
        <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white dark:text-gray-100 mb-6">
          Build Commerce Solutions with WooCommerce
        </h1>

        <p className="text-lg sm:text-xl text-white/90 dark:text-gray-300 max-w-2xl mb-8">
          The customizable, open-source ecommerce platform built on WordPress. Create extensions, themes, and integrations for millions of online stores worldwide.
        </p>

        <div className="flex flex-wrap gap-4">
          <a href="/quickstart" className="inline-flex items-center px-6 py-3 rounded-lg bg-white dark:bg-[#242838] text-[#843cfb] dark:text-white font-semibold hover:bg-gray-100 dark:hover:bg-[#2d3142] transition-colors no-underline">
            Get Started
          </a>

          <a href="/api/rest-api/overview" className="inline-flex items-center px-6 py-3 rounded-lg border-2 border-white/30 dark:border-gray-600 bg-white/10 dark:bg-white/5 text-white dark:text-gray-200 font-semibold hover:bg-white/20 dark:hover:bg-white/10 transition-colors no-underline">
            Explore APIs
          </a>
        </div>
      </div>

      <div className="lg:col-span-5 hidden lg:block">
        <div className="relative">
          <div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent dark:from-white/5 rounded-2xl blur-3xl" />

          <div className="relative bg-white/10 dark:bg-white/5 backdrop-blur-sm rounded-2xl p-8 border border-white/20 dark:border-gray-700">
            <div className="space-y-3">
              <div className="h-3 bg-white/40 dark:bg-white/20 rounded w-3/4" />

              <div className="h-3 bg-white/30 dark:bg-white/15 rounded w-full" />

              <div className="h-3 bg-white/30 dark:bg-white/15 rounded w-5/6" />

              <div className="mt-6 h-24 bg-gradient-to-br from-white/20 to-white/10 dark:from-white/10 dark:to-white/5 rounded-lg" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <h2 className="text-2xl sm:text-3xl font-semibold text-gray-900 dark:text-white mb-4">
    Quick Start
  </h2>

  <p className="text-base text-gray-600 dark:text-gray-400 mb-8">
    Get up and running with WooCommerce development in minutes.
  </p>

  <Steps>
    <Step title="Set up your development environment">
      Install the prerequisites: Node.js (via NVM), PNPM, PHP 7.4+, and Composer. Clone the WooCommerce monorepo and run `pnpm install` to install dependencies.

      ```bash theme={null}
      git clone https://github.com/woocommerce/woocommerce.git
      cd woocommerce
      nvm install
      pnpm install
      pnpm build
      ```
    </Step>

    <Step title="Explore the monorepo structure">
      The WooCommerce monorepo contains the core plugin, JavaScript packages, PHP packages, and development tools. Navigate to `plugins/woocommerce/` for the core plugin code.

      <Note>
        Modern code lives in `src/` with PSR-4 autoloading and dependency injection. Legacy code is in `includes/`.
      </Note>
    </Step>

    <Step title="Start building">
      Create your first extension, customize a theme, or integrate with the REST API. Check out our comprehensive guides to learn how to extend WooCommerce.

      ```php theme={null}
      // Example: Add a custom action hook
      add_action('woocommerce_after_checkout_validation', function($data, $errors) {
          // Your custom validation logic
      }, 10, 2);
      ```
    </Step>
  </Steps>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <h2 className="text-2xl sm:text-3xl font-semibold text-gray-900 dark:text-white mb-4">
    Explore by Topic
  </h2>

  <p className="text-base text-gray-600 dark:text-gray-400 mb-8">
    Choose your path to start building with WooCommerce.
  </p>

  <CardGroup cols={3}>
    <Card title="Extension Development" icon="puzzle-piece" href="/extensions/getting-started">
      Build powerful extensions using WooCommerce hooks, filters, and APIs.
    </Card>

    <Card title="Theme Development" icon="palette" href="/themes/overview">
      Create beautiful, customized storefronts with classic or block themes.
    </Card>

    <Card title="REST API" icon="code" href="/api/rest-api/overview">
      Integrate with products, orders, customers, and more via REST API.
    </Card>

    <Card title="Block Development" icon="cube" href="/blocks/getting-started">
      Extend WooCommerce with custom Gutenberg blocks.
    </Card>

    <Card title="Payment Gateways" icon="credit-card" href="/features/payments">
      Implement custom payment methods with the Payment Gateway API.
    </Card>

    <Card title="Shipping Methods" icon="truck" href="/features/shipping">
      Add custom shipping options and integrations.
    </Card>
  </CardGroup>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <h2 className="text-2xl sm:text-3xl font-semibold text-gray-900 dark:text-white mb-4">
    Key Features
  </h2>

  <p className="text-base text-gray-600 dark:text-gray-400 mb-8">
    Powerful APIs and tools to build anything you can imagine.
  </p>

  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
    <div className="p-6 rounded-lg border border-gray-200 dark:border-[#27272a] bg-gray-50 dark:bg-[#1a1d27] hover:border-[#843cfb] dark:hover:border-[#843cfb] transition-colors">
      <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
        Extensive Hook System
      </h3>

      <p className="text-sm text-gray-600 dark:text-gray-400">
        Hundreds of action and filter hooks to customize every aspect of WooCommerce without modifying core code.
      </p>
    </div>

    <div className="p-6 rounded-lg border border-gray-200 dark:border-[#27272a] bg-gray-50 dark:bg-[#1a1d27] hover:border-[#843cfb] dark:hover:border-[#843cfb] transition-colors">
      <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
        REST & Store APIs
      </h3>

      <p className="text-sm text-gray-600 dark:text-gray-400">
        Complete REST API for managing products, orders, and customers. Store API for headless commerce experiences.
      </p>
    </div>

    <div className="p-6 rounded-lg border border-gray-200 dark:border-[#27272a] bg-gray-50 dark:bg-[#1a1d27] hover:border-[#843cfb] dark:hover:border-[#843cfb] transition-colors">
      <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
        Modern PHP Architecture
      </h3>

      <p className="text-sm text-gray-600 dark:text-gray-400">
        PSR-4 autoloading, dependency injection, and modern development practices in the WooCommerce core.
      </p>
    </div>

    <div className="p-6 rounded-lg border border-gray-200 dark:border-[#27272a] bg-gray-50 dark:bg-[#1a1d27] hover:border-[#843cfb] dark:hover:border-[#843cfb] transition-colors">
      <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
        JavaScript Packages
      </h3>

      <p className="text-sm text-gray-600 dark:text-gray-400">
        Over 30 npm packages for building React-based admin interfaces and storefront experiences.
      </p>
    </div>
  </div>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <h2 className="text-2xl sm:text-3xl font-semibold text-gray-900 dark:text-white mb-4">
    Community & Resources
  </h2>

  <p className="text-base text-gray-600 dark:text-gray-400 mb-8">
    Connect with the WooCommerce developer community.
  </p>

  <CardGroup cols={2}>
    <Card title="Join Slack Community" icon="slack" href="https://woocommerce.com/community-slack/">
      Get help, share ideas, and connect with other WooCommerce developers.
    </Card>

    <Card title="GitHub Repository" icon="github" href="https://github.com/woocommerce/woocommerce">
      Explore the source code, report issues, and contribute to WooCommerce.
    </Card>

    <Card title="Developer Blog" icon="newspaper" href="https://developer.woocommerce.com/blog/">
      Stay up to date with the latest WooCommerce development news and tutorials.
    </Card>

    <Card title="Contributing Guide" icon="code-branch" href="/contributing/overview">
      Learn how to contribute code, documentation, and ideas to WooCommerce.
    </Card>
  </CardGroup>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <div className="p-8 rounded-2xl bg-gradient-to-br from-[#843cfb]/10 to-[#c49cf2]/10 dark:from-[#843cfb]/20 dark:to-[#c49cf2]/20 border border-[#843cfb]/20 dark:border-[#843cfb]/30">
    <h2 className="text-2xl sm:text-3xl font-semibold text-gray-900 dark:text-white mb-4">
      Ready to Build?
    </h2>

    <p className="text-base text-gray-600 dark:text-gray-400 mb-6 max-w-2xl">
      Start building your WooCommerce extension, theme, or integration today. Our comprehensive documentation and active community are here to help you succeed.
    </p>

    <a href="/quickstart" className="inline-flex items-center px-6 py-3 rounded-lg bg-[#843cfb] hover:bg-[#7e3ff2] text-white font-semibold transition-colors no-underline">
      Get Started Now
    </a>
  </div>
</div>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.