Docs

[mat_kinotek]

hi,
how can i style the add coupon option at check out so the field and the button are next to each other, instead of one on top of each other? Currently they are on top of each other (see screenshot). I need both of them on the same line, one next to each other. page is here: https://cherrylaser.com/shop/checkout/ (you have to add a product to see the check out)
thanks!

[Prasant Rai]

Hello Mat,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer:

.woocommerce-info.x-alert.x-alert-info.x-alert-block {
    float: left;
    width: 45%;
}

form.checkout_coupon {
    float: left;
    width: 50%;
    margin-left: 15px !important;
}

Thanks.

[mat_kinotek]

thank you,
but that didn’t work. I need the button next to the field, same line, next to each other.
Pleas see screenshot attached of exactly how i need it.
Thanks!

[Rupok]

Hi there,

Let’s use this :

.woocommerce-account .checkout_coupon, .woocommerce-checkout .checkout_coupon {
  width: 100%;
}

.woocommerce_checkout_coupon .form-row.form-row-first, .woocommerce_checkout_coupon .form-row.form-row-last {
  clear: none;
  display: inline-block;
  float: left;
  margin-right: 10px;
  width: 200px;
}

.woocommerce_checkout_coupon .form-row.form-row-last .button {
  margin-top: -18px;
  padding: 8px 12px;
}

Hope this helps.

Cheers!

[Author]

Posts