Modal design
Pick how the modal opens, one shape for everything in it, and the order of its details.
Modal template
- Full-height panel from the right
- Sheet rising from the bottom
- Narrow card, image on top
| Template | Behavior |
|---|---|
| Centered dialog (default) | Free's layout |
| Side panel | Full-height panel that slides in from the right or left edge; image above the details |
| Bottom sheet | Rises from the bottom, up to 1120 px wide, with rounded top corners |
| Full screen | Covers the whole page; content centered up to 1200 px |
| Compact card | Narrow (440 px), image on top |
| Setting | Default | Template |
|---|---|---|
| Opens from | Right edge (or Left) | Side panel |
| Panel width (px) | 480 (320–900) | Side panel |
| Maximum height (% of screen) | 85 (40–95) | Bottom sheet |
Free's Modal tab settings (colors, spacing, closing behavior, animation) apply to every template; the side panel and bottom sheet use their own slide-in. Phones always get a full-width layout.
Modal shape
| Shape | Result |
|---|---|
| Square | Sharp corners everywhere, including the window and scrollbar |
| Rounded (default) | Soft 10 px corners; the window keeps the Modal tab's corner radius |
| Pill | Fully round buttons and controls, round thumbnails, 30 px window corners |
The shape applies to the close button, gallery image, arrows and thumbnails, swatches, quantity, add to cart buttons, product navigation, related products and the scrollbar. Square and Pill also set the window corners, in place of the Modal tab's Window shape and Corner radius (px); Rounded keeps those. When the Add to Cart tab's Style is Custom, the add to cart buttons keep their own corner radius.
Detail order
- The Modal Design tab: Template cards (Centered dialog, Side panel, Bottom sheet, Full screen, Compact card)
- The Shape card below
Drag the parts into any order (or use the arrow buttons). Default order: Title, Star rating, Price, Stock status, Short description, Add to cart, Attributes table, Custom text block, SKU & categories, Full details link. Free's parts are still switched on or off on the Product Content and Add to Cart tabs.
Pro detail parts
| Setting | Default | Shows |
|---|---|---|
| Stock status badge | On | A colored badge with WooCommerce's availability text, e.g. "5 in stock" (green), out of stock (red), backorder (amber) |
| Attributes table | Off | Visible attributes, weight and dimensions, as on the Additional information tab |
| Custom text block | Empty | Your text on every product, such as shipping or returns. Links and basic formatting allowed; empty hides it |
| Short description word limit | 0 (full) | Shortens the short description with "…" (0–200 words); a limit removes its formatting and links |
Sticky image
For the image-left and image-right arrangements on screens wider than 768 px. Not used by the Side panel and Compact card.