Woocomerce product questions

Hey @chefwildboar, I will be happy to assist ??

To change the color of the variation options selector, you can use the CSS code below:

.single-product .variations_form select#anzahl > option {
    background: #BE1E2D;
}

Feel free to adjust the color as you wish, I hope this helps.

Have a nice day,
Andrija

Hi @gdandrija

I did already several updates to the CSS,
i have added this code too the site via additional CSS and i am not even close to finish it

.single-product table.variations tbody tr:nth-child(odd) {
    background-color: #be1e2d;
}

.single-product .variations_form select#anzahl > option {
    background: #666;
	color: #be1e1dc9;
}

a{color:white !important;}

div.wpforms-container-full .wpforms-form input[type=submit], 
div.wpforms-container-full .wpforms-form button[type=submit] {
    background-color: #be1e2d; /* red background */
	 border: 1px solid #000; /* black border */
	color: #000;
}

body, input, optgroup, select, textarea {
	color: #be1e1d;}

.woocommerce .woocommerce-breadcrumb {
	color: #be1e1d;}

.woocommerce div.product p.price, .woocommerce div.product span.price, .woocommerce ul.products li.product .price ins {
	color: #be1e1d;}

.woocommerce-message::before {
    color: #fff;
}

.woocommerce-message {
    border-top-color: #be1e1d;
}

.woocommerce-error, .woocommerce-info, .woocommerce-message {
	  background-color: #111;
    color: #be1e1d;    
}
.product_meta, .product_meta a {
    color: #be1e1d;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background-color: #333;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    background: #be1e1d;
}

.woocommerce table.shop_attributes th {
	/*
	background-color: #eee;*/
    width: 100px;
    padding: 0;
    border-bottom: none; 
}

table td, table th {
	border: 2px solid #111;
  /*padding: 1em;*/
 word-break: unset;
	  
}

.woocommerce div.product form.cart .variations select {
    max-width: 90%;
    min-width: 70%;
    background-color: #333;
}

.woocommerce div.product form.cart .variations td.label {
    padding-right: 10px;
    padding-left: 20px;
    text-align: center;
	  padding-top: 15px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    margin: 0 2px 0 0;
}

select {
    padding: 5px !important;
}

.wc-block-grid__products li .price, .woocommerce ul.products li .price {
    color: var(--go--color--primary) !important;
    font-size: var(--go--font-size--small);
}

.wc-block-grid__products li .wc-block-grid__product-title, .wc-block-grid__products li .woocommerce-loop-product__title, .woocommerce ul.products li .wc-block-grid__product-title, .woocommerce ul.products li .woocommerce-loop-product__title {
    color: var(--go--color--primary);
}

.wc-block-grid .wc-block-grid__product-onsale {
    background-color: var(--go--color--primary);
}

.wc-block-grid__product-onsale {
    
    border: 1px solid var(--go--color--white);
    color: aquamarine;
    font-weight: 800;
}

.wc-block-grid__products li, .woocommerce ul.products li {
    border: 1px solid var(--go--color--secondary);
}

.woocommerce div.product form.cart .variations td, .woocommerce div.product form.cart .variations th {
    border: 0;
    vertical-align: top;
    line-height: 0;
	padding: 7px;
}

i think it could be easier done but this i have done on the fly as was checking changes on the site. if you could give a look 2 pairs of eyes are better then one pair

thanks in advance

Always cooking
Immer beim kochen
Sempre a cozinhar

Phillip

Hey @chefwildboar,

I can see that you readjusted your page and that you are using the selector I sent and that the color is now changed to grey.

Could you please let me know the other adjustments you want to complete on this page so I could see if I can assist?

Best,
Andrija

Hi @gdandrija

At this moment any thing that is not red, grey, black or white is wrong.
I also wanted to change de shipping calculater icon in the cart tat is white to red just de icon not the link and link text

screenshot

The background for the quantity display in the cart and product i would like also to change it.
The Backgrounds of most input field i woulds like to change from black to a more grayish color.
the text that is attached to the social media buttons “Please follow and like us:
” i would like to have it white or a grayish color, but from what i could find out untill now it is getting its color code directly from body

I am also not liking the Footer menu display,it is not displaying in a justified and symmetric way but that is not a priority right now.

this is just some things i am looking at, i will the have to look how i can create a product category display page.

Here is the CSS code until now

.single-product table.variations tbody tr:nth-child(odd) {
    background-color: #be1e2d;
}

.single-product .variations_form select#anzahl > option {
    background: #666;
	color: #be1e1dc9;
}

a{color:white !important;}

div.wpforms-container-full .wpforms-form input[type=submit], 
div.wpforms-container-full .wpforms-form button[type=submit] {
    background-color: #be1e2d; /* red background */
	 border: 1px solid #000; /* black border */
	color: #000;
}

body, input, optgroup, select, textarea {
	color: #be1e1d;}

.woocommerce .woocommerce-breadcrumb {
	color: #be1e1d;}

.woocommerce div.product p.price, .woocommerce div.product span.price, .woocommerce ul.products li.product .price ins {
	color: #be1e1d;}

.woocommerce-message::before {
    color: #fff;
}

.woocommerce-message {
    border-top-color: #be1e1d;
}

.woocommerce-error, .woocommerce-info, .woocommerce-message {
	  background-color: #111;
    color: #be1e1d;    
}
.product_meta, .product_meta a {
    color: #be1e1d;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background-color: #333;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    background: #be1e1d;
}

.woocommerce table.shop_attributes th {
	/*
	background-color: #eee;*/
    width: 100px;
    padding: 0;
    border-bottom: none; 
}

table td, table th {
	border: 2px solid #111;
  /*padding: 1em;*/
 word-break: unset;
	  
}

.woocommerce div.product form.cart .variations select {
    max-width: 90%;
    min-width: 70%;
    background-color: #333;
}

.woocommerce div.product form.cart .variations td.label {
    padding-right: 10px;
    padding-left: 20px;
    text-align: center;
	  padding-top: 15px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    margin: 0 2px 0 0;
}

select {
    padding: 5px !important;
}

.wc-block-grid__products li .price, .woocommerce ul.products li .price {
    color: var(--go--color--primary) !important;
    font-size: var(--go--font-size--small);
}

.wc-block-grid__products li .wc-block-grid__product-title, .wc-block-grid__products li .woocommerce-loop-product__title, .woocommerce ul.products li .wc-block-grid__product-title, .woocommerce ul.products li .woocommerce-loop-product__title {
    color: var(--go--color--primary);
}

.wc-block-grid .wc-block-grid__product-onsale {
    background-color: var(--go--color--primary);
}

.wc-block-grid__product-onsale {
    
    border: 1px solid var(--go--color--white);
    color: aquamarine;
    font-weight: 800;
}

.wc-block-grid__products li, .woocommerce ul.products li {
    border: 1px solid var(--go--color--secondary);
}

.woocommerce div.product form.cart .variations td, .woocommerce div.product form.cart .variations th {
    border: 0;
    vertical-align: top;
    line-height: 0;
	padding: 7px;
}

.woocommerce-checkout .shop_table {
    background-color: #be1e2e1c;
	  border-radius: 15px;
}
}

#add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment {
    background: var(--go--color--primary);
    border-radius: 15px;
}

.woocommerce-info {
    border-top-color: var(--go--color--white);
}

.woocommerce-info::before {
    color: #ffffffd1;
}

#add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment {
    background: var(--go--color--primary);
    border-radius: 15px;
}

.woocommerce table.shop_table {
 
    border-radius: 15px;
}

.wc-gzd-product-name-right {
    padding-top: 10px;
}

.post__meta {
	color: var(--go--color--primary);
}

Always cooking
Immer beim Kochen
Sempre a cozinhar

Phillip Moringer