Button Style
How to control where the Simpler checkout button appears on your storefront.
Navigate to Extensions > Extensions > Modules > Simpler Checkout > Edit, then open the Button tab. It has four sections — one per surface the button can appear on: Product Page, Cart Page, Checkout Page, and Minicart. Each lets you enable the button and choose a default placement. Product Page and Minicart expose extra fields for fine-tuning against custom themes.
Placement
Toggle Activated on a surface to turn the button on, then pick a Button Placement from the dropdown.
| Surface | Placement Options |
|---|---|
| Product Page | Bottom of "Add to Cart" Button (default), Top of Product Page, Bottom of Product Page |
| Cart Page | Top of Cart Page, Bottom of Cart Page |
| Checkout Page | Top of Checkout Page, Bottom of Checkout Page |
| Minicart | Top of Mini-Cart, Bottom of Mini-Cart |
Override Position
If none of the defaults land where you want, target a specific element by CSS selector. Every surface has this option.
Enter a selector in Override Position — #example-id or .example-class — then pick a placement style:
| Style | Effect |
|---|---|
| top | Insert above the target element. |
| bottom | Insert below the target element. |
| marquee | Banner-style placement designed to stand out; recommended when the button sits between tightly-spaced elements. |
The selector must match exactly one element on the page.
Custom Theme Settings
Two surfaces expose extra fields that tell Simpler how to read from a custom theme's DOM. Leave the defaults unless your theme differs from the OpenCart standard.
Product Form Selector (Product Page). Simpler reads the current quantity and selected options live from your product form so the checkout payload matches what the shopper sees. Default: #product. If your theme uses a different form element, enter its CSS selector here — otherwise the button will send quantity 1 and no options selected.
Override Position on its own doesn't tell Simpler where the product form is. If your theme doesn't use #product, you also need to update Product Form Selector, or quantity and options won't be captured.
Minicart Container Selector (Minicart). Simpler watches this element for AJAX cart updates and refreshes the button when its contents change. Default: #cart-container, #cart. If your theme uses a different minicart container, enter its CSS selector here — otherwise the button won't refresh after add-to-cart.
Need to drop the button somewhere these options can't reach? See Custom Theme Integration.