[Resolved] Change coupon field style in checkout

Home Forums Support [Resolved] Change coupon field style in checkout

Home Forums Support Change coupon field style in checkout

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #946312
    Pedro

    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?

    #946515
    David
    Staff
    Customer Support

    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;
    }
    #946567
    Pedro

    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!

    #946581
    Leo
    Staff
    Customer Support

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

    A screenshot and some guideline to get there might help πŸ™‚

    #946588
    Pedro

    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.

    #946594
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #946597
    Pedro
    #946676
    Leo
    Staff
    Customer Support

    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;
    }
    #947113
    Pedro

    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?

    #947130
    Leo
    Staff
    Customer Support

    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;
    }
    #947328
    Pedro

    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!

    #947329
    Leo
    Staff
    Customer Support

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

    You can just change the color there.

    #947345
    Pedro

    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!

    #947491
    Leo
    Staff
    Customer Support

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

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.