From woocommerce-commerce
Builds WooCommerce Gutenberg blocks for cart, checkout, products; extends via Store API, PHP schema, and @woocommerce/blocks-checkout React API.
npx claudepluginhub orcaqubits/agentic-commerce-skills-plugins --plugin woocommerce-commerceThis skill is limited to using the following tools:
**Fetch live docs**:
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
Fetch live docs:
site:developer.woocommerce.com blocks extensibility for blocks extension docshttps://developer.wordpress.org/block-editor/ for Block Editor handbookwoocommerce checkout blocks extension api for checkout extension patternsReact-based blocks for the WordPress block editor (Gutenberg):
[woocommerce_cart] shortcode[woocommerce_checkout] shortcode (default since WC 8.3)A dedicated REST API powering the block-based cart and checkout:
/wp-json/wc/store/v1/cart, cart/items, checkout, products, batch| Package | Purpose |
|---|---|
@woocommerce/blocks-checkout | Checkout extension API |
@woocommerce/blocks-registry | Block type registration |
@woocommerce/blocks-components | Shared React components |
@woocommerce/settings | Access WC settings in JS |
@wordpress/blocks | Core block registration |
@wordpress/block-editor | Editor components |
@wordpress/element | React wrapper |
The block-based checkout provides extension points:
Use ExtendSchema and StoreApi classes to:
ExtendSchema::register_endpoint_data()Use @woocommerce/blocks-checkout exports:
registerCheckoutFilters — modify displayed values (item names, prices, subtotals)ExperimentalOrderMeta — slot for adding custom order meta displayExperimentalDiscountsMeta — slot for custom discount displayregister_block_type()BlockRegistryedit and save React componentsRegister with register_block_type():
block.json — metadata file defining name, attributes, supports, editor/frontend scriptsedit.js — editor componentsave.js — save component (or null for dynamic)render.php — server-side rendering for dynamic blocksUse dynamic blocks with render_callback or render.php for product data:
Register custom data via woocommerce_blocks_loaded action:
Automattic\WooCommerce\StoreApi\Schemas\ExtendSchemaextensions.{namespace}Register checkout_data processing via woocommerce_store_api_checkout_update_order_from_request:
add_action( 'before_woocommerce_init', function() {
if ( class_exists( \Automattic\WooCommerce\Utilities\FeaturesUtil::class ) ) {
\Automattic\WooCommerce\Utilities\FeaturesUtil::declare_compatibility(
'cart_checkout_blocks', __FILE__, true
);
}
});
cart_checkout_blocks compatibility in every extension@woocommerce/blocks-checkout hooks rather than DOM manipulationblock.json for block metadata (WordPress standard)Fetch the WooCommerce Blocks extension docs and Block Editor handbook for exact API methods, slot names, and filter signatures before implementing.