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, 10 months ago ago by Eva Kemp

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
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
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
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
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

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

Olga777

Participant

January 5, 2016 at 20:31

Thank you, Eva. This is perfect!

#106800 Copied

Eva Kemp

Support staff

January 5, 2016 at 22:29

Hello,

You are welcome.

Regards,
Eva Kemp.

#106813 Copied
Tagged: cart checkout, colour size, customize buttons, mobile devices, woocommerce, wordpress themes
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

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

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection