Skip to main content

Button Style

Customizing the Button Appearance

The default installation of the Simpler Checkout Magento Module will try to attach blocks including the Simpler Checkout button to predefined places in your store. If you want to adjust the appearance or the position of the button, you can try one of the following methods.

Adjusting CSS Rules

Each default button placement will render a custom HTML element as the custom block's element with a specific class for each placement. You can adjust the CSS rules of this element using your theme at will to better match your needs.

PlacementCSS Selector
Product Pagesimpler-checkout.simpler-product-page
Mini Cartsimpler-checkout.simpler-minicart
Cart Pagesimpler-checkout.simpler-cart-page
Checkout Pagesimpler-checkout.simpler-checkout-page

Extending the Magento layout through your theme

If CSS won't cut it, and you need to move or attach the whole block to a different reference, you can copy and adjust any of the following blocks in your theme

<item name="simpler_checkout" xsi:type="array">
<item name="component" xsi:type="string">Simpler_Checkout/js/view/checkout</item>
<!-- change this value to your desired displayArea -->
<item name="displayArea" xsi:type="string">summary</item>
<!-- change this value to move the component in the displayArea -->
<item name="sortOrder" xsi:type="string">0</item>
<item name="config" xsi:type="array">
<item name="position" xsi:type="string">simpler.checkout.page</item>
<item name="template" xsi:type="string">Simpler_Checkout/checkout</item>
<item name="configUrl" xsi:type="url" path="simpler/config/checkout">
simpler/config/checkout
</item>
</item>
</item>