Change coupon field style in checkout

Hi there,

so this topic we showed how to remove it:

https://generatepress.com/forums/topic/move-coupon-field-in-checkout-woocommerce/#post-946501

Or you can use this CSS to strip back the styling:

.woocommerce-form-coupon-toggle .woocommerce-info {
    background-color: transparent;
    border: 0;
    color: #000;
    padding-left: 0;
}
.woocommerce-form-coupon-toggle .woocommerce-info a {
    color: #000;
}
.woocommerce-form-coupon-toggle .woocommerce-info a:hover {
    color: #aaa !important;
}

Hello david! It worked perfectly.

However I would like to change the color of the link since it is not displayed well.

You can help me?

Thank you!

Sorry where can I find this form field you are referring to?

A screenshot and some guideline to get there might help :)

Hello Tom! The payment page is for the site http://www.rebajaslocas.com

And I mean the field of the coupon, the code that David gave me removes the block blue color, however the colors of the link are not displayed correctly.

Is this what you are referring to?
https://www.screencast.com/t/AiHA93cQZF5k

If so I don't see the link color you are referring to?

Let me know :)

The checkout page :)

https://www.rebajaslocas.com/finalizar-compra/

Screenshot 1: https://mega.nz/#!jksAzAqK!Dy6G_Tj5IHXINJLDBAlTTC9-uLXoLwEMR0-iMmtCa00
Screenshot 2: https://mega.nz/#!etkkhQDI!2CPWnFG2mGcFPMSOC-RQxTCyU-hqqYr5VCSRd3Morcs

Try this:

.woocommerce-form-coupon-toggle .woocommerce-info a,
.woocommerce-form-coupon-toggle .woocommerce-info a:hover,
.woocommerce-form-coupon-toggle .woocommerce-info a:focus {
    color: #0066c0;
}

Hi leo! Thanks for answering.

I have used the code and it works, it shows the blue color link, however when I click it turns gray and then white.

How can I correct this?

Can you try the edited CSS?
https://generatepress.com/forums/topic/change-coupon-field-style-in-checkout/#post-946676

You already have this CSS added also which will overwrite my CSS:

.woocommerce-form-coupon-toggle .woocommerce-info a:hover {
    color: #aaa !important;
}

Hi leo! It worked very well, and finally I would like that when doing hover it would not turn gray but black.

As Generatepress does by default.

Thank you!

As mentioned above, it's #aaa on hover because you already have the CSS added with !important.

You can just change the color there.

Hi leo!! You're the best, it worked for me.

Then I leave all the code, Could you verify that everything is fine?

.woocommerce-form-coupon-toggle .woocommerce-info {
    background-color: transparent;
    border: 0;
    color: #000;
    padding-left: 0;
}
.woocommerce-form-coupon-toggle .woocommerce-info a {
    color: #000;
}
.woocommerce-form-coupon-toggle .woocommerce-info a:hover {
    color: #000000 !important;
}
.woocommerce-form-coupon-toggle .woocommerce-info a,
.woocommerce-form-coupon-toggle .woocommerce-info a:focus {
    color: #0066c0;
}

It's just that I'm a novice in everything that is code.

Thank you!

I edited your code slightly. Other than that it looks good!