The Blocksify Product Add to Cart block shows the current product’s WooCommerce purchase form in a single-product Dynamic Template.
A simple product shows its price, quantity control, and purchase button. A variable product also shows its option selectors, selected price, stock message, and short description; separate Product Price, Product Stock, and Product Short Description blocks on the same template follow the shopper’s selection automatically.
- Before you start: Activate WooCommerce, create at least one product, and open a Blocksify Dynamic Template for single products.
- See Dynamic Templates overview for the template workflow or Build a WooCommerce product template for the complete layout tutorial.
Where to find it
- Go to Blocksify → Dynamic Templates and open a template that targets single WooCommerce products.
- Open the + (Block Inserter), find Blocksify WooCommerce, and select Product Add to Cart. The current preview product’s purchase form appears.
- Select the block and open the settings sidebar to use Settings and Styling.
Note: The inserter offers this block only in the Dynamic Template editor. For a shop grid on a page, use Product Loop and its Add to Cart card element.
Settings
The Settings panel controls the purchase row and the product details WooCommerce places inside the form. Use the device selector above the inspector before changing Purchase layout for desktop, tablet, or mobile.
| Setting | Description |
|---|---|
| Quantity selector | Stepper, the default, adds minus and plus controls around the number. Input shows the standard WooCommerce quantity field. |
| Purchase layout | Inline places quantity and the purchase button in a wrapping row. Stacked puts them in a column, keeps the quantity control compact, and stretches the button; choose a different value for each device when needed. |
| Open mini cart after adding | Opens a supported WooCommerce Mini Cart or Customify cart drawer after a successful add. The item is still added when the current theme has no supported mini cart to open. |
| Show stock status | Shows WooCommerce’s selected stock message inside a variable-product form. Turn it off when a separate Product Stock block already carries that information. |
| Show price | Shows the form’s product price. For simple products, Blocksify adds the price when the WooCommerce form does not already include one; variable and grouped products keep their own changing price displays. |
| Show variation description | Shows the selected option’s description when that product option has one. |
Note: WooCommerce supplies the purchase-button text and product-type behavior. Product Add to Cart does not provide a custom button-label or icon setting; use the Button block for a separately authored call to action.
Styling
The Styling panel separates the form into parts so you can match your theme without changing WooCommerce’s purchase rules. Add a style only to the part that needs it.
| Part | What it controls |
|---|---|
| Form | Typography, color, background, padding, border, radius, and shadow for the complete purchase form. |
| Label | Option-label typography, color, and margin. |
| Select | Variable-product selectors, including typography, colors, sizing, padding, border, radius, and shadow. |
| Button | The purchase button’s visual styles and margin. |
| Quantity | The quantity input’s visual styles, size, and margin. |
| Checkbox | The grouped-product checkbox color. |
| Clear link | The variable-product reset link’s typography and color. |
| Price and Regular price | The current price and crossed-out regular price. |
| In-stock status, Out-of-stock status, and Backorder status | Typography and color for each availability state. |
| Message | Typography, color, background, padding, border, and radius for purchase errors and notices. |
Visibility can hide the complete block on selected devices. WordPress’s Advanced panel provides the anchor and additional CSS class fields.
Frontend behavior
On the storefront, simple products use their normal quantity and purchase controls. Variable products wait for the shopper to choose every required option, then update the form’s price, availability, description, and purchasable state.
- Linked product details: Product Price, Product Stock, and Product Short Description blocks for the same product update as soon as a valid choice is found. There is no synchronization switch to enable, and clearing the choice restores their original product values.
- Out of stock: WooCommerce shows the unavailable state and prevents an invalid purchase. When a request fails because stock changed after the page loaded, the block displays WooCommerce’s returned message above the form.
- Backorders: When the product allows backorders, WooCommerce shows the backorder message and keeps the valid purchase path available.
- Grouped and external products: Grouped products can show multiple quantity controls and add the chosen items together. External products keep the destination and wording supplied by WooCommerce.
- Successful adds: Supported simple, variable, and grouped forms add without a page reload, show a brief loading state, refresh the cart, and can open the mini cart. The button is temporarily unavailable during the request, which prevents an accidental duplicate click.
- Redirects and extensions: If WooCommerce is configured to redirect shoppers to the cart, the normal form submission and redirect take priority. Forms with extra product options and unsupported cart setups also keep their normal WooCommerce submission, preserving fields added by product extensions.
Before publishing, preview a simple Beanie, the variable Hoodie, an out-of-stock product, and a backorder product so every state fits the surrounding template.