> ## Documentation Index
> Fetch the complete documentation index at: https://docs.swiftlywp.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Builder Position

> Control where the box builder appears on the WooCommerce product page.

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

<Tabs>
  <Tab title="Classic Themes">
    **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.
  </Tab>

  <Tab title="Block Themes">
    If you're using a Full Site Editing theme (like Twenty Twenty-Four), use **After Product Details Block** for the best placement.
  </Tab>

  <Tab title="Page Builders">
    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.
  </Tab>
</Tabs>

<Tip>
  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.
</Tip>

## 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.