Return to previous page

Customize Colour / Size Buttons for Mobile Devices in Cart & Checkout Pages

This topic has 8 replies, 3 voices, and was last updated 8 years, 9 months ago ago by Eva Kemp

  • Avatar: Olga777
    Olga777
    Participant
    January 2, 2016 at 17:50

    Mobile devices:

    In Checkout Page Button “Place Order” is very pale (washed out grey) colour, it is hard to see it… How Can I change the colour (and possibly the size – to make it bigger) of this button? I would like it to match my main bright colour, to make it VISIBLE for a user.

    Also in Cart page: Buttons “Apply Coupon”, “Update Cart” – the same issue, the colour is too pale, how to change it?

    Desktop: Checkout “Place Order” Button is SMALL and Greyed Colour. How can I increase the size and change the colour of this button?

    Your help is much appreciated.

    Thank you

    Please, contact administrator
    for this information.
    #106428 Copied Theme version: Blanco 3.4 WooCommerce version: 2.4.12
    7 Answers
    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    January 4, 2016 at 01:48

    Hello,

    Try to add the following css code in custom.css:

    @media only screen and (max-width: 767px) {
#payment #place_order {
    width: 180px;
    height: 45px;
    background-color: #db29d3;
}
.checkout_cart tr:last-child td .button {
    height: 45px;
    background-color: #db29d3;
}}

#payment #place_order {
    width: 180px;
    height: 45px;
    background-color: #db29d3;
}

    To create custom.css you need rename default.custom.css to custom.css in wp-content/themes/blanco directory via FTP and enable it in Blanco – Theme Settings, tick “Enable Custom CSS file”.

    Best regards,
    Jack Richardson.

    #106457 Copied
    Avatar: Olga777
    Olga777
    Participant
    January 4, 2016 at 19:08

    Thank you, Jack. That looks much better. One more question: how to enable active button HOVER colour as well, for these buttons? Much appreciated.

    And one more small thing (if possible): Coupon Field (in CART only, Checkout already has text in it) for desktop and mobile devices: is it possible to have a grey-out text in it (e.g. “Enter Coupon Code Here”), as we get lots of customers confused to where to enter the coupons… Much appreciated.

    Thank you very much, once again!

    #106627 Copied
    Avatar: Eva
    Eva Kemp
    Support staff
    January 5, 2016 at 16:09

    Hello,

    To set hover color please use this code:

    @media only screen and (max-width: 767px) {
#payment #place_order:hover {
    background-color: #db29d3;
}
.checkout_cart tr:last-child td .button:hover {
   background-color: #db29d3;
}}

#payment #place_order:hover {
   background-color: #db29d3;
}

    Write color values you need.

    To add the text in coupon field you need edit the file wp-content/themes/blanco/woocommerce/cart/cart.php and edit the code <input name="coupon_code" class="input-text" id="coupon_code" value="" /> in line 117, change value="" to value="Enter Coupon Code Here".

    Regards,
    Eva Kemp.

    #106745 Copied
    Avatar: Olga777
    Olga777
    Participant
    January 5, 2016 at 17:47

    Hi Eva,

    Thank you very much for helping me out!

    One little problem with Coupon Text Value. I’m looking for exact same text default behaviour (as it does in Checkout page), meaning the text “Coupon Code” in the Coupon field is “Not an actual value”, but just “faded out” text – to guide users where coupon code need to be typed in. So, as soon as you put cursor there (Coupon field), you can type in the code – you would NOT need to DELETE the text “Coupon Code” first, then to type in the actual coupon value.

    Your help is much appreciated!

    #106772 Copied
    Avatar: Eva
    Eva Kemp
    Support staff
    January 5, 2016 at 18:04

    Hello,

    Sorry, my mistake.
    You need edit this code <input name="coupon_code" class="input-text" id="coupon_code" value="" /> and add this value: placeholder="Coupon code", so it will be <input name="coupon_code" class="input-text" id="coupon_code" value="" placeholder="Enter Coupon Code Here" />

    Regards,
    Eva Kemp.

    #106777 Copied
    Avatar: Olga777
    Olga777
    Participant
    January 5, 2016 at 20:31

    Thank you, Eva. This is perfect!

    #106800 Copied
    Avatar: Eva
    Eva Kemp
    Support staff
    January 5, 2016 at 22:29

    Hello,

    You are welcome.

    Regards,
    Eva Kemp.

    #106813 Copied

  • Tagged: , , , , ,

  • Viewing 8 results - 1 through 8 (of 8 total)

The issue related to '‘Customize Colour / Size Buttons for Mobile Devices in Cart & Checkout Pages’' has been successfully resolved, and the topic is now closed for further responses

8theme customization service

Helpful Topics

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Mobile Store – WordPress WooCommerce Theme
lazy-placeholder
Language Courses – WordPress WooCommerce Theme
lazy-placeholder
Ecoenergy – WordPress WooCommerce Theme
lazy-placeholder
Travel – WooCommerce Theme
lazy-placeholder
Drinks Store – WordPress WooCommerce Theme
lazy-placeholder
Corporate – WordPress WooCommerce Theme
lazy-placeholder
Home Decor Store – WordPress WooCommerce Theme
lazy-placeholder
Underwear – WooCommerce Theme
lazy-placeholder
HandMade Store – WooCommerce Theme
lazy-placeholder
Web Agency – WordPress WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.