Adding Space in Checkout Form

Question

I've used Bodak Module :https://github.com/sbodak/magento2-checkout-custom-form

And I changed the checkout to my liking.

How can I add the spaces between the text "If you don't have the code, you can skip this step." and the textbox?

I tried with css but it also changes those above.

Thanks!

Answer 1

You can override that template file at app/design/frontend/<Theme Vendor>/<Theme Name>/Bodak_CheckoutCustomForm/view/frontend/templates/order/view/custom_fields.phtml. This is a better approach than editing the file directly as your changes will be overwritten if you ever decide to update this module.

As for the file:

<?php
/** @var Bodak\CheckoutCustomForm\Block\Order\CustomFields $block */
/** @var Bodak\CheckoutCustomForm\Model\Data\CustomFields $customFields */
$customFields = $block->getCustomFields($block->getOrder());
?>
<?php if($customFields): ?>
    <div class="block block-order-details-view">
        <div class="block-content">
            <div class="box">
                <strong class="box-title"><span><?php /* @escapeNotVerified */ echo __('Other information') ?></span></strong>
                <div class="box-content">
                    <strong><?php /* @escapeNotVerified */ echo __('Buyer') ?>:</strong>
                    <?php echo $this->escapeHtml($customFields->getCheckoutBuyerName()); ?><br>
                    <strong><?php /* @escapeNotVerified */ echo __('Buyer email address') ?>:</strong>
                    <?php echo $this->escapeHtml($customFields->getCheckoutBuyerEmail()); ?><br>
                    <strong><?php /* @escapeNotVerified */ echo __('Purchase order no.') ?>:</strong>
                    <?php echo $this->escapeHtml($customFields->getCheckoutPurchaseOrderNo()); ?><br>
                    <strong><?php /* @escapeNotVerified */ echo __('Goods mark') ?>:</strong>
                    <?php echo $this->escapeHtml($customFields->getCheckoutGoodsMark()); ?>
                </div>
            </div>

            <div class="box">
                <strong class="box-title"><span><?php /* @escapeNotVerified */ echo __('Comment') ?></span></strong>
                <div class="box-content" style="margin-bottom: 20px"> <?php /*Just add your CSS inline to the specific container you want to add spacing below.*/ ?>
                    <?php echo nl2br($this->escapeHtml($customFields->getCheckoutComment())); ?>
                </div>
            </div>
        </div>
    </div>
<?php endif; ?>

If you can post your updated code here so I can see it, I'll show you exactly what to change.

Answer 2

You can modify view/frontend/templates/order/view/custom_fields.phtml. It is the one responsible for rendering your custom field in the checkout page.
Check below modified code (I have added a <br> on top of the custom comment):

<?php
/** @var Bodak\CheckoutCustomForm\Block\Order\CustomFields $block */
/** @var Bodak\CheckoutCustomForm\Model\Data\CustomFields $customFields */
$customFields = $block->getCustomFields($block->getOrder());
?>
<?php if($customFields): ?>
    <div class="block block-order-details-view">
        <div class="block-content">
            <div class="box">
                <strong class="box-title"><span><?php /* @escapeNotVerified */ echo __('Other information') ?></span></strong>
                <div class="box-content">
                    <strong><?php /* @escapeNotVerified */ echo __('Buyer') ?>:</strong>
                    <?php echo $this->escapeHtml($customFields->getCheckoutBuyerName()); ?><br>
                    <strong><?php /* @escapeNotVerified */ echo __('Buyer email address') ?>:</strong>
                    <?php echo $this->escapeHtml($customFields->getCheckoutBuyerEmail()); ?><br>
                    <strong><?php /* @escapeNotVerified */ echo __('Purchase order no.') ?>:</strong>
                    <?php echo $this->escapeHtml($customFields->getCheckoutPurchaseOrderNo()); ?><br>
                    <strong><?php /* @escapeNotVerified */ echo __('Goods mark') ?>:</strong>
                    <?php echo $this->escapeHtml($customFields->getCheckoutGoodsMark()); ?>
                </div>
            </div>

            <div class="box">
                <strong class="box-title"><span><?php /* @escapeNotVerified */ echo __('Comment') ?></span></strong>
                <div class="box-content">
                    <br/> /** This will add br space */
                    <?php echo nl2br($this->escapeHtml($customFields->getCheckoutComment())); ?>
                </div>
            </div>
        </div>
    </div>
<?php endif; ?>