This topic has 8 replies, 3 voices, and was last updated 8 years, 11 months ago ago by Eva Kemp
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
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.
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!
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.
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!
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.
Thank you, Eva. This is perfect!
Hello,
You are welcome.
Regards,
Eva Kemp.
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