Home › Forums › WoodMart support forum › Woocommerce coupon checkout position

Woocommerce coupon checkout position

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • March 19, 2026 at 12:34 pm #713329

    jordi
    Participant

    My client wants the coupon field to appear open/expanded right before selecting the payment method in the checkout. Would it be possible to do this with a new checkout layout?

    March 19, 2026 at 5:59 pm #713395

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    Can you please share the screenshot where you want to show the coupon field?

    Also, please read and follow the instructions here to create and use the custom layout for the checkout page:
    https://xtemos.com/docs-topic/checkout-page-builder/

    Best Regards.

    March 20, 2026 at 2:47 pm #713489

    jordi
    Participant

    They wanted before the payment method, I used this cose and works perfectly:

    /* Contenedor flex para input + botón lado a lado en checkout Woodmart */
    .woocommerce .checkout_coupon,
    .woocommerce .woocommerce-form-coupon,
    .woocommerce-checkout .coupon,
    .coupon {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
    margin: 15px 0 !important;
    }

    /* Input ocupa el espacio disponible */
    .woocommerce-checkout .coupon .input-text,
    .woocommerce .checkout_coupon .input-text,
    .woocommerce-form-coupon .input-text {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 180px !important;
    margin: 0 !important;
    height: 48px !important; /* altura estándar en Woodmart */
    border-radius: 6px 0 0 6px !important;
    border: 1px solid #e5e5e5 !important;
    }

    /* Botón personalizado con color #6B9E80 */
    .woocommerce-checkout .coupon .button,
    .woocommerce .checkout_coupon .button,
    .ts-apply-coupon {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 140px !important;
    height: 48px !important;
    line-height: 46px !important;
    padding: 0 24px !important;
    border-radius: 0 6px 6px 0 !important;
    white-space: nowrap !important;
    font-size: 14px !important;

    /* Color principal */
    background-color: #6B9E80 !important;
    color: #ffffff !important;
    border: none !important;
    }

    /* Hover para mejor UX (un poco más oscuro) */
    .ts-apply-coupon:hover,
    .woocommerce-checkout .coupon .button:hover {
    background-color: #5a8c6e !important; /* tono más oscuro de #6B9E80 */
    color: #ffffff !important;
    }

    /* Evitar que Woodmart fuerce width 100% */
    .woocommerce-checkout .coupon .input-text,
    .woocommerce-checkout .coupon .button {
    max-width: none !important;
    }

    /* Responsive: en móvil pasa a columna */

    @media     (max-width: 768px) {
    .woocommerce .checkout_coupon,
    .coupon {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    }

    .woocommerce-checkout .coupon .input-text {
    border-radius: 6px !important;
    }

    .ts-apply-coupon {
    border-radius: 6px !important;
    width: 100% !important;
    }
    }

    Attachments:
    You must be logged in to view attached files.
    March 20, 2026 at 3:09 pm #713497

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    Thank you for the update and for sharing your solution.

    We’re glad to hear that you were able to achieve the desired result and that the custom code is working perfectly for your needs.

    If you have any further questions or need additional assistance in the future, feel free to reach out.

    Best Regards.

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Woocommerce coupon checkout position’ is closed to new replies.