Checkout form background color

  • Resolved thierryv

    (@thierryv)


    4 years, 9 months ago

    Hello WordPress geniuses!

    I’m building a webshop for a friend of mine and using the wonderfull WooCommerce platform to do so. Webshop is almost done but I’m having trouble changing the color of the checkout form.

    I’ve found an extensive CSS code that changes the colors partly, code is this: 

    .woocommerce table.shop_table,
 
.woocommerce form.checkout_coupon,
 
.woocommerce form.login,
 
.woocommerce form.register,
 
#add_payment_method #payment,
 
.woocommerce-cart #payment,
 
.woocommerce-checkout #payment,
 
#customer_details,
 
h3#order_review_heading,
 
form.woocommerce-EditAccountForm.edit-account {
 
            border: 0 !important; /* you can add a border if you prefer */
 
            background: #D8C8AF; /* this is the main background color for all forms */
 
}
 
/*** FORM AND OTHER PADDING ***/
 
#customer_details,
 
form.woocommerce-EditAccountForm.edit-account,
 
h3#order_review_heading {
 
            padding: 30px 20px;
 
}
 
/*** ADJUST FORM ROUNDED EDGES ***/
 
#customer_details {
 
            border-top-left-radius: 5px;
 
            border-top-right-radius: 5px;
 
}
 
.woocommerce-checkout-review-order table.shop_table {
 
            border-top-left-radius: 0;
 
            border-top-right-radius: 0;
 
}
 
/*** FIELDS ON CHECKOUT, CART, ACCOUNT PAGES ***/
 
.woocommerce-account input,
 
.woocommerce-checkout input,
 
#order_comments.input-text {
 
            background-color: #f5f5f5 !important;
 
            color: black !important; /* not the placeholder, the text color when typed */
 
            border: 0; /* optional */
 
}
 
/*** COUPON FIELD ONLY ***/
 
.woocommerce-page #coupon_code.input-text { /* if you want your coupon different from other fields */
 
            background-color: black !important;
 
            color: blue !important;
 
            font-size: 16px !important; /* if you don't want the default giant font on the coupon field */
 
}
 
/*** PLACEHOLDER TEXT ON ALL WOO PAGES ***/
 
.woocommerce-page ::-webkit-input-placeholder {
 
    color: black !important;
 
}
 
.woocommerce-page :-ms-input-placeholder {
 
    color: black !important;
 
}
 
.woocommerce-page ::-moz-placeholder {
 
    color: black !important;
 
}
 
.woocommerce-page :-moz-placeholder { /* this isn't the same as above don't delete */
 
    color: black !important;
 
}
 
/*** THIS COMPENSATES FOR SHIP TO DIFF ADDRESS FIELD NOT ALIGNING ***/
 
h3#ship-to-different-address {
 
            margin-top: -3px;
 
}
 
/*** ALL WOO BUTTONS ***/
 
.woocommerce button.button.alt,
 
.woocommerce-page button.button.alt,
 
.woocommerce a.button,
 
.woocommerce-page a.button,
 
.woocommerce button.button,
 
.woocommerce-page button.button {
 
            text-transform: capitalize !important;
 
            background: #ffa500 !important;
 
            color: #222 !important;
 
}
 
.woocommerce button.button.alt:hover,
 
.woocommerce-page button.button.alt:hover,
 
.woocommerce a.button.alt:hover,
 
.woocommerce-page a.button.alt:hover,
 
.woocommerce a.button:hover,
 
.woocommerce-page a.button:hover,
 
.woocommerce button.button:hover,
 
.woocommerce-page button.button:hover {
 
            background: #00adad !important;
 
            color: #fff !important;
 
}
 
/*** PAYMENT BOX ON CHECKOUT ***/
 
#add_payment_method #payment div.payment_box,
 
.woocommerce-cart #payment div.payment_box,
 
.woocommerce-checkout #payment div.payment_box {
 
            background-color: #D8C8AF;
 
            color: #fff;
 
}
 
#add_payment_method #payment div.payment_box::before,
 
.woocommerce-cart #payment div.payment_box::before,
 
.woocommerce-checkout #payment div.payment_box::before {
 
            border-bottom-color: #D8C8AF;
 
}
 
#add_payment_method #payment ul.payment_methods,
 
.woocommerce-cart #payment ul.payment_methods,
 
.woocommerce-checkout #payment ul.payment_methods {
 
            border-bottom: 0;
 
}
 
/*** BORDERS AND TABLES ***/
 
.woocommerce form .form-row input.input-text,
 
.woocommerce form .form-row textarea {
 
            border: 0;
 
}
 
.woocommerce table.shop_table td,
 
#add_payment_method .cart-collaterals .cart_totals tr td,
 
#add_payment_method .cart-collaterals .cart_totals tr th,
 
.woocommerce-cart .cart-collaterals .cart_totals tr td,
 
.woocommerce-cart .cart-collaterals .cart_totals tr th,
 
.woocommerce-checkout .cart-collaterals .cart_totals tr td,
 
.woocommerce-checkout .cart-collaterals .cart_totals tr th,
 
.woocommerce table.shop_table tbody th,
 
.woocommerce table.shop_table tfoot td,
 
.woocommerce table.shop_table tfoot th,
 
.woocommerce-checkout #main-content .cart-subtotal td {
 
            border-top: 2px solid #fff;
 
}
 
.woocommerce table.shop_table_responsive tr:nth-child(2n) td,
 
.woocommerce-page table.shop_table_responsive tr:nth-child(2n) td {
 
            background: transparent;
 
}
 
.woocommerce-checkout #content-area table th,
 
.woocommerce-checkout #content-area table td {
 
            padding-left: 20px;
 
}
 
.woocommerce form .form-row input.input-text,
 
.woocommerce form .form-row textarea {
 
            font-size: 18px;
 
}
 
/*** EXISTING ACCOUNT / ERROR BOXES BACKGROUND COLOR ***/
 
.woocommerce-message,
 
.woocommerce-error,
 
.woocommerce-info {
 
            background: #D8C8AF !important;
 
}
 
/*** ORDER NOTES ON CHECKOUT ***/
 
.woocommerce-checkout .woocommerce form .form-row textarea {
 
            height: 150px; /* height of optional notes box */
 
}
 
/*** STATE DROPDOWN SELECT COLOR ***/
 
.select2-container--default .select2-results__option--highlighted[aria-selected],
 
.select2-container--default .select2-results__option--highlighted[data-selected] {
 
            background: #ffa500;
 
}
 
/*** QUANTITY BOX ***/
 
.woocommerce #content .quantity input.qty,
 
.woocommerce .quantity input.qty,
 
.woocommerce-cart table.cart td.actions .coupon .input-text,
 
.woocommerce-page #content .quantity input.qty,
 
.woocommerce-page .quantity input.qty {
 
            color: #fff !important;
 
            background: #222 !important;
 
            height: 46px; /* you may need to change this based on your font size */
 
}

    This changes the colors of the part of the form where the order is summarized. The part where the customer is filling in his/her details does not change.

    I hope somebody can help ‘fix’ this CSS to change the entire form.

    Thanks very much in advance!

    • This topic was modified 4 years, 9 months ago by thierryv.
    • This topic was modified 4 years, 9 months ago by thierryv.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support Gabriel – a11n

    (@gabrielfuentes)

    4 years, 9 months ago

    Hi @thierryv 👋

    I have click on the link to check your site, but I can see that it is under maintenance mode.

    So without being able to see the HTML output of the site, it’s difficult to offer any CSS to help increase the product title font size. This is because the CSS classes and IDs will vary for every theme.

    To achieve this type of color change, I’d recommend using Google Chrome Developer Tools. You can right-click anywhere on your webpage to select ‘Inspect Element’, the HTML and CSS properties show up right in your browser.

    You can then write some custom CSS to change the section colors using the CSS classes related to that section you can see when using the Chrome Developer tool

    Cheers.

    Thread Starter thierryv

    (@thierryv)

    4 years, 9 months ago

    Hi @gabrielfuentes

    Thanks for your response and my appologies!

    I totally forgot to take it out of maintenance mode.
    You’re comment however was very helpfull, it’s been a while since i’ve done some actual CSS myself but I got it done. Thanks to your comment, pointing me in the right direction.

    Thanks again and have a great day!

    Thread Starter thierryv

    (@thierryv)

    4 years, 9 months ago

    Oh btw, I always hate it when the solution is not posted in a thread 🙂

    So for all the people who stumbleupon this thread with the same problem. This is how the code ended up and how it worked for me: 

    body span.select2-selection.select2-selection--single {
    background: #d8c8af;
    border-color: #ffffff;
    color: #ffffff;
}

body span.select2-selection.select2-selection--single .select2-selection__rendered {
    color: inherit;
}

body .select2-dropdown,
body .selectBox-dropdown-menu {
    background: #d8c8af;
}

body .select2-dropdown .select2-results__option.select2-results__option--highlighted,
body .select2-dropdown .select2-results__option.select2-results__option[data-selected=true],
body .selectBox-dropdown-menu .select2-results__option.select2-results__option--highlighted,
body .selectBox-dropdown-menu .select2-results__option.select2-results__option[data-selected=true] {
    background-color: #d8c8af !important;
}

body ul.products li.product .product-content, 
body ul.products li.wc-block-grid__product .product-content, 
body .wc-block-grid ul.wc-block-grid__products li.product .product-content, 
body .wc-block-grid ul.wc-block-grid__products li.wc-block-grid__product .product-content {
    background: #d8c8af;
}

body ul.products li.product img, 
body ul.products li.wc-block-grid__product img, 
body .wc-block-grid ul.wc-block-grid__products li.product img, 
body .wc-block-grid ul.wc-block-grid__products li.wc-block-grid__product img {
    mix-blend-mode: darken;
}
body.single-product div.product .woocommerce-product-gallery figure a img {
    mix-blend-mode: darken;
}

body {
font-family: 'Indie Flower', cursive;align-content
}

.post-type-archive-product .page-title {
  font-size: 28px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 20px !important;
}

.woocommerce ul.products li.product .price .amount {
    font-size: 20px;
}

.woocommerce table.shop_table,
 
.woocommerce form.checkout_coupon,
 
.woocommerce form.login,
 
.woocommerce form.register,

#add_payment_method #payment,
 
.woocommerce-cart #payment,
 
.woocommerce-checkout #payment,

.woocommerce form.checkout #customer_details, #payment

 
h3#order_review_heading,
 
form.woocommerce-EditAccountForm.edit-account {
 
            border: 0 !important; /* you can add a border if you prefer */
 
            background: #D8C8AF; /* this is the main background color for all forms */
 
}
 
/*** FORM AND OTHER PADDING ***/
 
#customer_details,
 
form.woocommerce-EditAccountForm.edit-account,
 
h3#order_review_heading {
 
            padding: 30px 20px;
 
}
 
/*** ADJUST FORM ROUNDED EDGES ***/
 
#customer_details {	
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
}
 
.woocommerce-checkout-review-order table.shop_table {
 
            border-top-left-radius: 0;
 
            border-top-right-radius: 0;
 
}
 
/*** FIELDS ON CHECKOUT, CART, ACCOUNT PAGES ***/
 
.woocommerce-account input,
 
.woocommerce-checkout input,
 
#order_comments.input-text {
 
            background-color: #ffff !important;
 
            color: black !important; /* not the placeholder, the text color when typed */
 
            border: 1px solid black; /* optional */
 
}
 
/*** COUPON FIELD ONLY ***/
 
.woocommerce-page #coupon_code.input-text { /* if you want your coupon different from other fields */
 
            background-color: white !important;
 
            color: black !important;
 
            font-size: 16px !important; /* if you don't want the default giant font on the coupon field */
 
}
 
/*** PLACEHOLDER TEXT ON ALL WOO PAGES ***/
 
.woocommerce-page ::-webkit-input-placeholder {
 
    color: black !important;
 
}
 
.woocommerce-page :-ms-input-placeholder {
 
    color: black !important;
 
}
 
.woocommerce-page ::-moz-placeholder {
 
    color: black !important;
 
}
 
.woocommerce-page :-moz-placeholder { /* this isn't the same as above don't delete */
 
    color: black !important;
 
}
 
/*** THIS COMPENSATES FOR SHIP TO DIFF ADDRESS FIELD NOT ALIGNING ***/
 
h3#ship-to-different-address {
 
            margin-top: -3px;
 
}
 
/*** ALL WOO BUTTONS ***/
 
.woocommerce button.button.alt,
 
.woocommerce-page button.button.alt,
 
.woocommerce a.button,
 
.woocommerce-page a.button,
 
.woocommerce button.button,
 
.woocommerce-page button.button {
 
            text-transform: capitalize !important;
 
            background: #D8C8AF !important;
 
            color: #333 !important;
	
						border: 1px solid black;
 
}
 
.woocommerce button.button.alt:hover,
 
.woocommerce-page button.button.alt:hover,
 
.woocommerce a.button.alt:hover,
 
.woocommerce-page a.button.alt:hover,
 
.woocommerce a.button:hover,
 
.woocommerce-page a.button:hover,
 
.woocommerce button.button:hover,
 
.woocommerce-page button.button:hover {
 
            background:  !important;
 
            color: #fff !important;
 
}
 
/*** PAYMENT BOX ON CHECKOUT ***/
 
#add_payment_method #payment div.payment_box,

.woocommerce-cart #payment div.payment_box,
 
.woocommerce-checkout #payment div.payment_box {
 
            background-color: #D8C8AF;
 
            color: #fff;
 
}
 
#add_payment_method #payment div.payment_box::before,
 
.woocommerce-cart #payment div.payment_box::before,
 
.woocommerce-checkout #payment div.payment_box::before {
 
            border-bottom-color: black;
 
}
 
#add_payment_method #payment ul.payment_methods,
 
.woocommerce-cart #payment ul.payment_methods,
 
.woocommerce-checkout #payment ul.payment_methods {
 
            border-bottom 0;
						color: white; 
						background: #D8C8AF
}
 
/*** BORDERS AND TABLES ***/
 
.woocommerce form .form-row input.input-text,
 
.woocommerce form .form-row textarea {
 
            border: 1px solid black;
 
}
 
.woocommerce table.shop_table td,
 
#add_payment_method .cart-collaterals .cart_totals tr td,
 
#add_payment_method .cart-collaterals .cart_totals tr th,
 
.woocommerce-cart .cart-collaterals .cart_totals tr td,
 
.woocommerce-cart .cart-collaterals .cart_totals tr th,
 
.woocommerce-checkout .cart-collaterals .cart_totals tr td,
 
.woocommerce-checkout .cart-collaterals .cart_totals tr th,
 
.woocommerce table.shop_table tbody th,
 
.woocommerce table.shop_table tfoot td,
 
.woocommerce table.shop_table tfoot th,
 
.woocommerce-checkout #main-content .cart-subtotal td {
 
            border-top: 2px solid #fff;
 
}
 
.woocommerce table.shop_table_responsive tr:nth-child(2n) td,
 
.woocommerce-page table.shop_table_responsive tr:nth-child(2n) td {
 
            background: transparent;
 
}
 
.woocommerce-checkout #content-area table th,
 
.woocommerce-checkout #content-area table td {
 
            padding-left: 20px;
 
}
 
.woocommerce form .form-row input.input-text,
 
.woocommerce form .form-row textarea {
 
            font-size: 18px;
 
}
 
/*** EXISTING ACCOUNT / ERROR BOXES BACKGROUND COLOR ***/
 
.woocommerce-message,
 
.woocommerce-error,
 
.woocommerce-info {
 
            background: #D8C8AF !important;
 
}
 
/*** ORDER NOTES ON CHECKOUT ***/
 
.woocommerce-checkout .woocommerce form .form-row textarea {
 
            height: 150px; /* height of optional notes box */
 
}
 
/*** STATE DROPDOWN SELECT COLOR ***/
 
.select2-container--default .select2-results__option--highlighted[aria-selected],
 
.select2-container--default .select2-results__option--highlighted[data-selected] {
 
            background: #ffa500;
 
}
 
/*** QUANTITY BOX ***/
 
.woocommerce #content .quantity input.qty,
 
.woocommerce .quantity input.qty,
 
.woocommerce-cart table.cart td.actions .coupon .input-text,
 
.woocommerce-page #content .quantity input.qty,
 
.woocommerce-page .quantity input.qty {
 
            color: #222 !important;
 
            background: #fff !important;
 
            height: 46px; /* you may need to change this based on your font size */
 
}

    Good luck!

    Plugin Support abwaita a11n

    (@abwaita)

    4 years, 9 months ago

    Glad to see you were able to handle this one!

    Quite commendable of you to post your solution here.

    I’ll go ahead and mark this thread as resolved now. If you have any further questions, I recommend creating a new thread.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Checkout form background color’ is closed to new replies.