thierryv

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!

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!

Appreciate it? I think I love you ??

Thanks so much, this is exactly what i meant! .

Thanks also for the quick lesson about the regarding PNG ??

Damn! That is sick, thanks so much!

It works for the dropdown menu’s. The background of the productimages is still white though. Am I doing something wrong?

Thanks so much! ??

Update:

I started messing around with the terms & conditions page.
Removed it from the settings in WooCommerce and then added it again through the frontend customizer. Suddenly the extra setting to edit the text appeard!

My issue is now resolved ?? Thanks very much for your help and pointing me in the right direction!

Hi!

Thanks so much for your response. I’m a bit confused right now because, if I’m not mistaken I have a terms and conditions page:
https://prnt.sc/wg1oxj

I have configured that page in the WooCommerce settings aswell:
https://prnt.sc/wg1q2v

But I don’t have the options from your screenshot:
https://prnt.sc/wg1sqf

Is there something I’m doing wrong? Did I not configure a terms and conditions page correctly? `

The screenshots are in Dutch by the way, hope that is not a problem, think the most information is easy enough to extract.

Hope to hear from you!