Using Magento 2 I would like to expand the "Apply Discount Code" as default.

The current code is

<div class="payment-option-title field choice" data-role="title" role="tab" aria-selected="false" aria-expanded="false" tabindex="0">

I think the code should be

<div class="payment-option-title field choice" data-role="title" role="tab" aria-selected="true" aria-expanded="true" tabindex="0">

I have no idea where to edit this code Thank you in advance


You have to set the Discount collapsible widget to active true.
You can do so by overriding the template file in your custom module.


<?xml version="1.0" encoding="UTF-8"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <referenceContainer name="cart.summary">
            <block class="Magento\Checkout\Block\Cart\Coupon" name="checkout.cart.coupon" as="coupon" template="Anshu_Custom::cart/coupon.phtml"/>



// @codingStandardsIgnoreFile

<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"><?= /* @escapeNotVerified */ __('Apply Discount Code') ?></strong>
    <div class="content" data-role="content" aria-labelledby="block-discount-heading">
        <form id="discount-coupon-form"
              action="<?= /* @escapeNotVerified */ $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><?= /* @escapeNotVerified */ __('Enter discount code') ?></span></label>
                    <div class="control">
                        <input type="text" class="input-text" id="coupon_code" name="coupon_code" value="<?= $block->escapeHtml($block->getCouponCode()) ?>" placeholder="<?= $block->escapeHtml(__('Enter discount code')) ?>" <?php if (strlen($block->getCouponCode())): ?> disabled="disabled" <?php endif; ?> />
                <div class="actions-toolbar">
                    <?php if (!strlen($block->getCouponCode())): ?>
                        <div class="primary">
                            <button class="action apply primary" type="button" value="<?= /* @escapeNotVerified */ __('Apply Discount') ?>">
                                <span><?= /* @escapeNotVerified */ __('Apply Discount') ?></span>
                    <?php else: ?>
                        <div class="primary">
                            <button  type="button" class="action cancel primary" value="<?= /* @escapeNotVerified */ __('Cancel Coupon') ?>"><span><?= /* @escapeNotVerified */ __('Cancel Coupon') ?></span></button>
                    <?php endif; ?>

In the coupon.phtml template file, I have changed

<div class="block discount" id="block-discount" data-mage-init='{"collapsible":{"openedState": "active", "saveState": false}}'>


<div class="block discount" id="block-discount" data-mage-init='{"collapsible":{"openedState": "active", "active": true, "saveState": false}}'>

I have added "active": true in the collapsible widget configuration.

Anshu is the namespace and Custom the module name.

| improve this answer | |
  • Unfortunately this did not work. Also tried editing vendor/magento/module-checkout/view/frontend/templates/cart/coupon.phtml directly but the change did not work – Darren Sutherland Oct 18 '18 at 22:40
  • @DarrenSutherland Are you using any custom theme? or if the default template is already overwritten? Check which template is being called. – Anshu Mishra Oct 19 '18 at 6:11
  • I'm using the theme Infortis Ultimo. using Chrome this is what I can find <div class="payment-option _collapsible opc-payment-additional discount-code" data-bind="mageInit: {'collapsible':{'openedState': '_active'}}" data-collapsible="true" role="tablist"> – Darren Sutherland Oct 21 '18 at 1:16
  • Try to change data-bind="mageInit: {'collapsible':{'openedState': '_active'}}" to data-bind="mageInit: {'collapsible':{'openedState': '_active', 'active': true}}" – Anshu Mishra Oct 21 '18 at 9:48
  • discount.phtml or coupon.phtml file? – jafar pinjar Nov 14 '18 at 12:32

My store was using the 'vendor/magento/module-sales-rule/view/frontend/web/template/payment/discount.html'

So I override it in my theme here 'app/design/frontend/VENDOR/THEME/Magento_SalesRule/web/template/payment/discount.html'

(have only included the relevant / updated first part of file below)

<div class="payment-option _collapsible opc-payment-additional discount-code _active"
 data-bind="mageInit: {'collapsible':{'openedState': '_active', 'active': true}}">
<div class="payment-option-title field choice" data-role="title" aria-expanded="true">
    <span class="action action-toggle" id="block-discount-heading" role="heading" aria-level="2">
        <!-- ko i18n: 'Apply Discount Code'--><!-- /ko -->
<div class="payment-option-content" data-role="content" role="tabpanel" style="display: block;">

So the important updates / additions are:

'active': true

That alone did nothing, so added

style="display: block;"

On the .payment-option-content div

(Also added some aria role stuff)

Then do all the usual redeploy stuff, or for a quick update without the whole sha-bang, just replace the file in pub/static/.....

Hope this saves someone some time :]

| improve this answer | |
  • 1
    This is the solution that worked for my checkout. Thank you. (What a strange place to have the relevant widget!) – S Adamson Jan 31 at 1:16
  • Yes the widget seemed a bit lost & confused when I found him ;) – 00-BBB Feb 4 at 12:50

I've got the same issue and I'm also using Ultimo but that doesn't override Magento core for this functionality.

I need the "Apply Discount Code" block expanded by default and then I'll sort it's styling out, it's a bit hidden as standard.

I've got the correct file - vendor/magento/module-sales-rule/view/frontend/web/template/payment/discount.html

but not matter what I do, the block won't expand on load.

I've tried adding "active": true into

<div class="payment-option _collapsible opc-payment-additional discount-code"
 data-bind="mageInit: {'collapsible':{'openedState': '_active'}}">

changed to

<div class="payment-option _collapsible opc-payment-additional discount-code"
 data-bind="mageInit: {'collapsible':{'openedState': '_active', 'active': true}}">

but that didn't work, so I tried

<div class="payment-option _collapsible opc-payment-additional discount-code"
 data-bind="mageInit: {'collapsible':{'openedState': '_active' },'active': true}">

but that didn't work either.

It might be that the first div isn't the one collpasing as when I inspect it and click on it it's actually the next div that expands and collapses

<div class="payment-option-title field choice" data-role="title">
    <span class="action action-toggle" id="block-discount-heading" role="heading" aria-level="2">

Does anyone have any idea on how to get the collapsed div to expand by default. I've researched it on the web and read the javascript accordion instructions on the Magento site but I can't figure it out.

Would really appreciate the help.

| improve this answer | |

I had the same issue and resolved it but in my case i have to add comment box so i copied same content of discount code html.

To resolve you need to make below changes. (add directly "display:block" in div which have "data-role" attribute to "content"(data-role="content")

  1. Add this to make arrow postion to up (to make like section is open)

      data-bind="mageInit: {'collapsible':{'openedState': '_active','active': true,'disabled':false}}"
  2. Replace this

    <div class="content" data-role="content" aria-labelledby="block-discount-heading">


    <div class="content" data-role="content" aria-labelledby="block-discount-heading" style="display:block">
| improve this answer | |

You can simply change this line on


<div class="block discount" id="block-discount" data-mage-init='{"collapsible":{"openedState": "_active"}}'>


<div class="block discount" id="block-discount" data-mage-init='{"collapsible":{"openedState": "_active", "active": true, "saveState": false}}'>


| improve this answer | |

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.