Product Icon

WooCommerce

Sell online with the flexible, customizable eCommerce platform designed to grow with your business. From your first sale to millions in revenue, Woo is with you. See why merchants trust us to power 3.4 million online stores.

Allow the Cart and Checkout blocks Coupon field to be displayed by default

It would be helpful on the new Cart and Checkout blocks to have a setting to allow the coupon field to be displayed by default instead of having to click the “Add a Coupon” link to open it.

Author

Robert

Current Status

Open

Last updated: August 16, 2024

1 comment

Log in to comment on this feature request.

  1. jarnoojasaar says:

    Really need this simple option. Current messy fallback if anyone is interested:

    add_action( ‘wp_footer’, function () {
    if ( ! is_checkout() && ! is_cart() ) {
    return;
    }
    ?>

    (function () {
    let autoOpening = false;

    function openCouponPanelAuto() {
    const btn = document.querySelector(
    ‘.wp-block-woocommerce-checkout-order-summary-coupon-form-block ‘ +
    ‘.wc-block-components-totals-coupon.wc-block-components-panel ‘ +
    ‘.wc-block-components-panel__button’
    );
    if (!btn) return false;

    // Already open
    if (btn.getAttribute(‘aria-expanded’) === ‘true’) return true;

    // Remember scroll position BEFORE opening
    const scrollX = window.scrollX || window.pageXOffset || 0;
    const scrollY = window.scrollY || window.pageYOffset || 0;

    autoOpening = true;
    btn.click();

    // After Woo focuses input asynchronously, undo focus + undo any scroll jump.
    const restore = () => window.scrollTo(scrollX, scrollY);

    setTimeout(() => {
    if (!autoOpening) return;

    const input = document.querySelector(‘#wc-block-components-totals-coupon__input-coupon’);

    // Blur only on auto-open (keep Woo’s UX for manual user clicks)
    if (input && document.activeElement === input) {
    input.blur();
    }

    // Restore scroll position
    restore();
    requestAnimationFrame(restore);
    setTimeout(restore, 120);

    autoOpening = false;
    }, 80);

    return true;
    }

    openCouponPanelAuto();

    // Observe React renders (Blocks often mounts after DOMContentLoaded)
    const observer = new MutationObserver(() => {
    if (openCouponPanelAuto()) observer.disconnect();
    });
    observer.observe(document.documentElement, { childList: true, subtree: true });

    // Safety fallback (~5s max)
    let attempts = 0;
    const interval = setInterval(() => {
    attempts++;
    if (openCouponPanelAuto() || attempts > 50) {
    clearInterval(interval);
    observer.disconnect();
    }
    }, 100);
    })();

    <?php
    }, 100 );