With Advanced options, you control layout with custom CSS and tell the app exactly where to place the widget pieces on your theme.
Navigate to Widget customization → Advanced options to access the advanced settings.
Add custom CSS
Use Custom CSS → Widget layout to style the widget without editing your theme.
Example:
.slot-widget { max-width: 520px; margin: 0 auto; }
.slot-widget .btn { border-radius: 8px; }
Place the Scheduling form in your theme
Enter a Container selector (jQuery/CSS selector).
The form will be added to the first element that matches.Examples:
#product-form,.product__info,.product-form
Container injection method: choose one
Insert after – add the form after the targeted element (default).
Insert before – add the form before the targeted element (useful if you want the form to appear above titles, images, or ATC).
Place the Booking button
In Blocks placement → Button, set a Container selector where the CTA should appear.
Examples:
.product__actions,.product-form,.product__info-wrapper
Container injection method: pick Insert after or Insert before depending on whether the button should appear below or above the target container.
Place the Notice
Blocks placement → Notice → Container selector: set the anchor for your notice text.
Examples:
.product__title,.product__subtitle,.product__info
Container injection method: choose Insert after (below the target) or Insert before (above the target).
Map your theme’s “Add to cart” button (for compatibility)
Your theme’s selector may differ. Default is:
button[name=add]
If your Add to Cart button isn’t affected/hidden when you enable related options, inspect your theme and replace this with the correct selector (e.g., .product-form__submit, #AddToCart), then Save.
Quick selector tips:
Prefer IDs (
#product-form) or unique classes (.product__info).Target a container near where you want the element to appear; the app will insert after that container.
If multiple matches exist, only the first match is used.