When BoxBuilder is enabled on a product, the builder UI automatically appears on the single product page. You can control exactly where it’s placed.
Position Options
Configure the builder position in BoxBuilder → Settings → General under Builder Position.
Full-Width Positions
These positions span the full width of the product page, below the product image/summary area:
| Position | Description |
|---|
| Before Product Tabs | Above the WooCommerce product tabs (Description, Reviews, etc.) — recommended for classic themes |
| Replace Product Tabs | Replaces the product tabs entirely with the box builder |
| After Product Tabs | Below the product tabs |
Narrow Positions
These positions place the builder within the product summary column (next to the product image):
| Position | Description |
|---|
| After Price | Below the product price |
| After Short Description | Below the short description / excerpt |
| After Add to Cart Form | Below the default add to cart button |
| After Product Meta | Below the product meta (SKU, categories, tags) |
Block Theme Position
| Position | Description |
|---|
| After Product Details Block | For Full Site Editing / block themes — placed after the product details block |
Manual Placement
| Position | Description |
|---|
| Shortcode Only [boxbuilder] | Disables automatic placement — use the [boxbuilder] shortcode or Gutenberg block to place the builder manually |
Choosing the Right Position
Classic Themes
Block Themes
Page Builders
Before Product Tabs works best for most classic themes (Storefront, Astra, GeneratePress, etc.). The builder gets full width and is prominently placed without interfering with the product image area.
If you’re using a Full Site Editing theme (like Twenty Twenty-Four), use After Product Details Block for the best placement.
If you use Elementor, Divi, or another page builder, select Shortcode Only and place [boxbuilder] where you want the builder to appear. This gives you full control over positioning.
If you’re not happy with any of the automatic positions, select “Shortcode Only” and use the [boxbuilder] shortcode or Gutenberg block to place the builder exactly where you want it.
Summary Panel Position
You can also choose which side the summary panel appears on:
| Position | Description |
|---|
| Right Side | Summary panel on the right, product grid on the left (default) |
| Left Side | Summary panel on the left, product grid on the right |
Hiding the Default Add to Cart
When BoxBuilder is enabled on a product, the default WooCommerce “Add to Cart” button is automatically hidden. The box builder’s own “Add to Cart” button is used instead, which validates the box before adding to cart.