The documentation for WooCommerce Blocks has moved to the WooCommerce monorepo.
Please refer to the documentation in the new location as the files in this repository will no longer be updated and the repository will be archived.
This is the feature plugin for WooCommerce + the Gutenberg. This plugin serves as a space to iterate and explore new Blocks and updates to existing blocks for WooCommerce, and how WooCommerce might work with the block editor.
Use this plugin if you want access to the bleeding edge of available blocks for WooCommerce. However, stable blocks are bundled into WooCommerce, and can be added from the "WooCommerce" section in the block inserter.
To find out more about the blocks and how to use them, check out the documentation on WooCommerce.com.
If you want to see what we're working on for future versions, or want to help out, read on.
We release a new version of WooCommerce Blocks onto WordPress.org every few weeks, which can be used as an easier way to preview the features.
Note: The plugin follows a policy of supporting the "L0" strategy for version support. What this means is that the plugin will require the most recent version of WordPress. It will also require the most recent version of WooCommerce core at the time of a release. You can read more about this policy here.
1.Ensure you have the latest available versions of WordPress and WooCommerce installed on your site.
nvm
or n
, you can do so by running nvm use
or n auto
, respectively.npm install
to install the dependencies.composer install
to install core dependencies.npm run build
(production build).npm run dev
(development build).npm start
(development build + watching for changes).The source code is in the assets/
folder, and the compiled code is stored into build/
.
Run through the "Writing Your First Block Type" tutorial for a quick course in block-building.
For deeper dive, try looking at the core blocks code, or see what components are available.
To begin contributing to the WooCommerce Blocks plugin, see our getting started guide and developer handbook.
Other useful docs to explore:
WooCommerce Blocks are the easiest, most flexible way to build your store's user interface and showcase your products.