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.

Placement	CSS Selector
Product Page	simpler-checkout.simpler-product-page
Mini Cart	simpler-checkout.simpler-minicart
Cart Page	simpler-checkout.simpler-cart-page
Checkout Page	simpler-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

Checkout Page

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

Cart Page

<!-- attach this block to your desired reference Container or Block
and adjust the before/after properties to move it to the desired placement -->
<block class="Magento\Checkout\Block\Cart"
    name="simpler.cart.page"
    template="Simpler_Checkout::button.phtml"
    after="checkout.cart.totals"
    ifconfig="simpler_checkout/settings/show_in_cart_view">
    <arguments>
        <argument name="view_model" xsi:type="object">
                Simpler\Checkout\ViewModel\CartButton
            </argument>
    </arguments>
</block>

Minicart

<item name="simpler_minicart_checkout" xsi:type="array">
    <item name="component" xsi:type="string">Simpler_Checkout/js/view/checkout</item>
    <!-- change this value to your desired sort order -->
    <item name="sortOrder" xsi:type="string">90</item>
    <item name="position" xsi:type="string">simpler.minicart</item>
    <item name="config" xsi:type="array">
            <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>

Product Page - Configurable Product

<block class="Magento\Catalog\Block\Product\View"
    name="simpler.product.page"
    template="Simpler_Checkout::button.phtml"
    after="product.info.addtocart"
    ifconfig="simpler_checkout/settings/show_in_product_view">
    <arguments>
        <argument name="view_model" xsi:type="object">
            Simpler\Checkout\ViewModel\ConfigurableProductButton
        </argument>
    </arguments>
</block>

Product Page - Simple Product

<block class="Magento\Catalog\Block\Product\View"
    name="simpler.product.page"
    template="Simpler_Checkout::button.phtml"
    after="product.info.addtocart"
    ifconfig="simpler_checkout/settings/show_in_product_view">
    <arguments>
        <argument name="view_model" xsi:type="object">
        Simpler\Checkout\ViewModel\SimpleProductButton
        </argument>
    </arguments>
</block>