18
October
2021
How to update your WooCommerce checkout page button colors and input style using a little CSS code. Sterling runs through how to correctly add the CSS to your website and how to tweak the CSS to work with your branding. Let us know if you have any questions!
Custom CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | <style> .woocommerce #content input.button, .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-page #content input.button, .woocommerce-page #respond input#submit, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button { background: #f78c6c !important; border-radius: 6px; color:white !important; text-shadow: transparent !important; border-color:#ca0606 !important; } .woocommerce #content input.button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce-page #content input.button.alt:hover, .woocommerce-page #respond input#submit.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce-page button.button.alt:hover, .woocommerce-page input.button.alt:hover { background:black !important; background-color:black !important; color:white !important; text-shadow: transparent !important; box-shadow: none; border-color:#ca0606 !important; } .woocommerce #content input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce-page #content input.button:hover, .woocommerce-page #respond input#submit:hover, .woocommerce-page a.button:hover, .woocommerce-page button.button:hover, .woocommerce-page input.button:hover { background:black !important; background-color:black !important; color:white !important; text-shadow: transparent !important; box-shadow: none; border-color:#ca0606 !important; } .woocommerce #content input.button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce-page #content input.button.alt:hover, .woocommerce-page #respond input#submit.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce-page button.button.alt:hover, .woocommerce-page input.button.alt:hover { background: black !important; box-shadow: none; text-shadow: transparent !important; color:white !important; border-color:#ca0606 !important; } #billing_first_name, #billing_last_name, #billing_company, #billing_address_1, #billing_address_2, #billing_postcode, #billing_city, #billing_email, #order_comments, #billing_phone {border: solid #f78c6c 2px; border-radius: 6px;} </style> |
Comments
Tank you