How to customize Guest Checkout Page?

magento.stackexchange https://magento.stackexchange.com/questions/327698

Question

My guest checkout page looks ugly. enter image description here

How can I customize just the guest checkout and add these fields? Image below.

enter image description here

I have found tutorials here at https://www.mageplaza.com/devdocs/custom-checkout-component-magento-2.html. But I am still kind of confused how to edit certain fields.

Was it helpful?

Solution

In your custom module, create checkout_index_index.xml in frontend/layout:

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Vendor\Module\Block\Notice" name="checkout.notice" template="Vendor_Module::notice.phtml" />
        </referenceContainer>
    </body>
</page>

In the block file, you can create a function to check if a customer is logged in or not, for example: isLoggedin() and then in .phtml file, you can write something like below:

<?php if($block->isLoggedin()): ?>
    <div class="notice-content"> <!--Apply css and other formating as per your need -->
    Please verify your billding and shipping address before placing order, you can edit address details from my account

    Avoid Shipping Delays!- Age Verification Notice -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
<?php endif; ?>
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top