Styling Layout Form Field and Button in Checkout Page?

If you need to change the style of the “Apply Gift Card” field, the CSS would be custom to your site. We follow the same styling as the “Apply Coupon” that comes with WooCommerce, but some themes will target that form specifically.

You can either put custom CSS into the ‘Additional CSS’ area of your theme, or you can edit the template files directly. See this article in our guide for information about editing the template files:

https://www.pimwick.com/pw-faq/apply-gift-card-template/

O.k., I will check this. Thanks for your support!

Little success: with my little CSS knowledge I was able to change the form field and buttons in shopping cart and checkout page, the ugly files are gone and looking much better now.

I was not able to change the simple label text ‘Have a gift card?’…. grr.
I think it’s because the <label> has no class not id …?

<label for="pwgc-redeem-gift-card-number">Have a gift card?</label>

Also I’m missing the right colour and the DIVI like mouse over effect (getting light gray and showing a ‘>’), that’s above the thing I can do.

This is the CSS, I added it to the themes CSS file :

/* Layout Gift Card field */
input#pwgc-redeem-gift-card-number {
    font-weight: 500!important;
    font-size: 20px!important;
    color: #fff!important;
    border-radius: 3px;
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
    border: none!important;
    background-color: rgba(0,0,0,.2)!important;
    height: 49px;
    width: auto;
}

/* Layout Gift Card button */
input#pwgc-redeem-button {
    font-size: 20px;
    font-weight: 500;
    padding: .3em 1em;
    line-height: 1.7em!important;
    background: transparent!important;
    position: relative;
    border: 2px solid;
    border-radius: 3px;
    -webkit-transition: all .2s;
    transition: all .2s;
}

Regards
kraeMit

• This reply was modified 4 years, 3 months ago by kraeMit.
• This reply was modified 4 years, 3 months ago by kraeMit.
• This reply was modified 4 years, 3 months ago by kraeMit.

Changing the text can’t be done in CSS, however you could overwrite the template as described in the guide.

Another option is to “translate” this text. Follow these steps to “translate” the text for your store language using the free Loco Translate plugin:

1. Click on the Loco Translate -> Plugins menu on the left.
2. Click on the PW WooCommerce
3. Click on the New Language button
4. Set the following options:
Choose a Language = English (or your site’s language)
Choose a Location = Custom (the default selection will store the translation in your own languages folder)
5. Click on Start Translating

Hm o.k. ‘label’ has somehow a global meaning in the WP installation. That could be a proposal for a change.

Thanks for your suggestion, just great! I changed the template just as written in https://www.pimwick.com/pw-faq/apply-gift-card-template/ …

For the card page I changed apply-gift-card.php : I added the <H3> tags for the label (and deleted a <br> tag because of line space) and it works! Thanks!

    <div id="pwgc-redeem-gift-card-form">
        <form id="pwgc-redeem-form">
            <div id="pwgc-redeem-gift-card-container">
                <label for="pwgc-redeem-gift-card-number"><?php _e( '<strong><H3></strong>Have a gift card?<strong></H3></strong>', 'pw-woocommerce-gift-cards' ); ?></label>
                <div id="pwgc-redeem-error"></div>
                ...

All the best!
Regards
kraeMit