When checkout page is loaded it shows apply discount code section like this

enter image description here

We want that it should be preopen as shown in below image

enter image description here

How to modify core magento functionality to pre open this section when we go to checkout page.

  • using custom theme or custom module ?? – Rk Rathod Aug 13 '19 at 10:26
  • i think using custom theme would be more better. – Ashar Riaz Aug 13 '19 at 11:03
  • using your theme just copy phtml file into your theme and added "active": true – Rk Rathod Aug 13 '19 at 12:07
  • thankyou. i used your below code and it worked. i added it inside my theme – Ashar Riaz Aug 13 '19 at 12:13
  • ok bro... no problem.. :) – Rk Rathod Aug 13 '19 at 12:14

You have 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="Vendor_Module::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.


On page Load Dynamically require to open some particulate tab.

], function ($) {
    'use strict';

    jQuery( document ).ready(function() {                      
        jQuery( "#your selector" ).accordion({
            "openedState": "active",
            "collapsible": true,
            "active": [1,4], /** Integrat Dynamic open tab  */
            "multipleCollapsible": true,

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.