[Resolved] Customize coupon area at woocommerce checkout

[Dorin]

I have a bit of a struggle with this. I want ‘the coupon input box and apply button’ area to be shorter (the same width or shorter than the billing details column). Also, I’d like to decrease the spacing between the input box and the button. And then the button to have the same height as the input box. For mobile, these two should be stacked vertically, both width 100%. Thanks.

[Fernando]

Hi Dorin,

Try adding this through Appearance > Customize > Additional CSS:

.woocommerce-checkout .woocommerce-form-coupon {
    display: flex;
    width: 60%;
    flex-wrap: wrap;
}

.woocommerce-checkout .woocommerce-form-coupon > p:first-of-type {
    flex-basis: 100%;
}

.woocommerce-checkout .woocommerce-form-coupon > p.form-row-first {
    margin-right: 4px;
}

.woocommerce-checkout .woocommerce-form-coupon > p.form-row-first input {
    height: 100%;
}

@media (max-width: 768px) {
    .woocommerce-checkout .woocommerce-form-coupon {
        width: 100%;
    }

    .woocommerce-checkout .woocommerce-form-coupon > p.form-row-first {
        margin-right: 0px;
        flex-basis: 100%;
    }

    .woocommerce-checkout .woocommerce-form-coupon > p.form-row-last {
        flex-basis: 100%;
    }

    .woocommerce-checkout .woocommerce-form-coupon > p.form-row-last button {
        width: 100%;
    }
}

[Dorin]

Perfect. Thank you so much, Fernando.

[Fernando]

You’re welcome Dorin!

[Author]

Posts