In the cart page, I need to display a simple input box and Apply button for the coupon section. For this, I need to remove the collapsible element. We need to work around

<div class="block discount" id="block-discount" data-mage-init='{"collapsible":{"openedState": "active", "active": true, "saveState": false}}'>
    <div class="title" data-role="title">
        <strong id="block-discount-heading" role="heading" aria-level="2"><?php echo __('Discount Codes') ?></strong>

Please check the screenshot. I need to remove the "Discount Codes" collapsible tab.

enter image description here

  • i added the answer for the same, you can style it as per your need using CSS – Hiren Jan 17 at 13:36
  • have you tried my answer? because it is working here – Hiren Jan 17 at 13:41

Add below code into app/design/frontend/Vendor/Your_Theme/Magento_Checkout/frontend/templates/cart/coupon.phtml

<form id="discount-coupon-form"
      action="<?= $block->escapeUrl($block->getUrl('checkout/cart/couponPost')) ?>"
      data-mage-init='{"discountCode":{"couponCodeSelector": "#coupon_code",
                                       "removeCouponSelector": "#remove-coupon",
                                       "applyButton": "button.action.apply",
                                       "cancelButton": "button.action.cancel"}}'>
    <div class="fieldset coupon<?= strlen($block->getCouponCode()) ? ' applied' : '' ?>">
        <input type="hidden" name="remove" id="remove-coupon" value="0" />
        <div class="field">
            <label for="coupon_code" class="label"><span><?= $block->escapeHtml(__('Enter discount code')) ?></span></label>
            <div class="control">
                <input type="text"
                       value="<?= $block->escapeHtmlAttr($block->getCouponCode()) ?>"
                       placeholder="<?= $block->escapeHtmlAttr(__('Enter discount code')) ?>"
                        <?php if (strlen($block->getCouponCode())) :?>
                        <?php endif; ?>
        <div class="actions-toolbar">
            <?php if (!strlen($block->getCouponCode())) :?>
            <div class="primary">
                <button class="action apply primary" type="button" value="<?= $block->escapeHtmlAttr(__('Apply Discount')) ?>">
                    <span><?= $block->escapeHtml(__('Apply Discount')) ?></span>
            <?php else :?>
                <div class="primary">
                    <button  type="button" class="action cancel primary" value="<?= $block->escapeHtmlAttr(__('Cancel Coupon')) ?>"><span><?= $block->escapeHtml(__('Cancel Coupon')) ?></span></button>
            <?php endif; ?>
    <?php if (!strlen($block->getCouponCode())) : ?>
        <?= /* @noEscape */ $block->getChildHtml('captcha') ?>
    <?php endif; ?>

You can customize the html as per your need

| improve this answer | |
  • update your question with all issues, as per your question now it will remove the collapsible element. – Hiren Jan 17 at 13:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.