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!

enter image description here

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

• KernelPaniC: Thanks for your reply. I tried to add but it doesn't work, nothing has changed. I made the reindex, cleaned the cache etc etc
• fmsthird: did you run setup upgrade first then redeploy static content?
• fmsthird: if you can provide us your exact code it would be easier for us to help you