Extension Guidelines
This section covers general guidelines, and best practices to follow in order to ensure your product experience aligns with WooCommerce for ease of use, seamless integration, and strong adoption.
We strongly recommend you review the current WooCommerce setup experience to get familiar with the user experience and taxonomy.
We also recommend you review the WordPress core guidelines to ensure your product isn’t breaking any rules, and review this helpful resource on content style.
General
Use existing WordPress/WooCommerce UI, built in components (text fields, checkboxes, etc) and existing menu structures.
Plugins which draw on WordPress’ core design aesthetic will benefit from future updates to this design as WordPress continues to evolve. If you need to make an exception for your product, be prepared to provide a valid use case.
- WordPress Components library
- Figma for WordPress | (WordPress Design Library Figma)
- WooCommerce Component Library
Component Library – Storybook
Storybook is an open source tool for developing UI components in isolation for React, React Native and more. It makes building stunning UIs organized and efficient.
The WooCommerce repository also includes Storybook integration that allows testing and developing in a WooCommerce-agnostic context. This is very helpful for developing reusable components and trying generic JavaScript modules without any backend dependency.
You can launch Storybook by running pnpm --filter=@woocommerce/storybook watch:build locally. It will open in your browser automatically.
You can also test Storybook for the current trunk branch on GitHub Pages: https://woocommerce.github.io/woocommerce