- This topic has 13 replies, 3 voices, and was last updated 4 years, 9 months ago by Leo.
-
AuthorPosts
-
July 1, 2019 at 10:19 am #946312Pedro
Hello! By default WooCommerce shows the coupon field as a news item on the chekout page. (A blue box)
I would like to change it and it would only be shown as a simple text.
How could I do it?
July 1, 2019 at 3:03 pm #946515DavidStaffCustomer SupportHi 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; }
July 1, 2019 at 6:07 pm #946567PedroHello 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!
July 1, 2019 at 6:29 pm #946581LeoStaffCustomer SupportSorry where can I find this form field you are referring to?
A screenshot and some guideline to get there might help π
July 1, 2019 at 6:36 pm #946588PedroHello 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.
July 1, 2019 at 6:40 pm #946594LeoStaffCustomer SupportIs this what you are referring to?
https://www.screencast.com/t/AiHA93cQZF5kIf so I don’t see the link color you are referring to?
Let me know π
July 1, 2019 at 6:44 pm #946597PedroThe 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-hqqYr5VCSRd3MorcsJuly 1, 2019 at 10:45 pm #946676LeoStaffCustomer SupportTry 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; }
July 2, 2019 at 8:32 am #947113PedroHi 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?
July 2, 2019 at 8:47 am #947130LeoStaffCustomer SupportCan you try the edited CSS?
https://generatepress.com/forums/topic/change-coupon-field-style-in-checkout/#post-946676You already have this CSS added also which will overwrite my CSS:
.woocommerce-form-coupon-toggle .woocommerce-info a:hover { color: #aaa !important; }
July 2, 2019 at 12:11 pm #947328PedroHi 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!
July 2, 2019 at 12:13 pm #947329LeoStaffCustomer SupportAs mentioned above, it’s
#aaa
on hover because you already have the CSS added with!important
.You can just change the color there.
July 2, 2019 at 12:31 pm #947345PedroHi 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!
July 2, 2019 at 4:30 pm #947491LeoStaffCustomer SupportI edited your code slightly. Other than that it looks good!
-
AuthorPosts
- You must be logged in to reply to this topic.