The WooCommerce Product Add to Cart Block allows you to display an “Add to Cart” button for a selected WooCommerce product directly inside the Block Editor.
This block is designed to work seamlessly with WooCommerce and supports simple and compatible product types. It is lightweight, flexible, and theme-friendly.
Overview
Use this block when you want to:
- Insert an Add to Cart button anywhere in your content
- Promote a specific product inside blog posts or landing pages
- Build custom sales sections using blocks
- Keep full design control inside the Block Editor
The button uses WooCommerce’s native functionality, ensuring compatibility with themes and extensions.
Requirements
- WordPress 6.0+
- WooCommerce installed and activated
How to Use
- Open the Block Editor.
- Click the “+” Add Block button.
- Search for WooCommerce Product Add to Cart.
- Insert the block.
- Select a product using the product selector in the block settings.
- Customize alignment and button text (if available).
Block Settings
Depending on your configuration, the block may include:
- Product Selector
Choose which WooCommerce product to connect to the button. - Text Alignment
Align the button left, center, right, or justify. - Button Label (Optional)
Customize the button text (e.g., “Buy Now”, “Get Access”, etc.).
How It Works
The block renders the WooCommerce add-to-cart markup for the selected product. On the frontend:
- The button submits to WooCommerce.
- AJAX add-to-cart works if enabled in WooCommerce settings.
- Cart redirects follow WooCommerce configuration.
The block does not override WooCommerce core behavior — it integrates with it.
Styling
The block inherits styles from:
- Your active theme
- WooCommerce styles
- Any custom CSS you apply
You can customize the appearance using:
- Block editor design tools (if supported)
- Additional CSS
- Theme overrides
Example Use Cases
- Pricing sections on landing pages
- Inline purchase buttons inside tutorials
- Feature comparison tables
- Sales pages for WordPress plugins