CODEWITHSUNDEEP
csswordpressfunctionwoocommerce
DrMTR
DrMTR

Reputation: 509

Handle text Colour in WooCommerce variations?

Have one problem that don t know how to resolve. Have product (XS variation) that is "non in stock" but have selected "Allow but notify customer" So want to make that variation in yellow color, like is shown in image bellow.

enter image description here

Have this function for that:

add_filter( 'woocommerce_variation_is_active', 
'grey_out_variations_when_is_backorder', 10, 2 );
function grey_out_variations_when_is_backorder( $grey_out, $variation ) {

if ( ! $variation->is_in_stock() && $variation-
 >backorders_require_notification() )
$grey_out = false; // Here text variation need to be yellow.

return $grey_out;
}

but dont resolved nothing, because grayout can get only 2 values, true or false. So i used this CSS:

.sbOptions li span.sbDisabled {
 color:red!important;
 }
.sbOptions li a {
color:green!important;
}

so can control gray in and gray out variations only. No possiblity for third option that i want to make. Want variations that is: “out of stock” + “allow, backorder but notify” = yellow background & can be selected. Currently that variations is in green colour, because i dont found a way how to handle colour for that variations. Thanks

Upvotes: 0

Views: 481

Answers (1)

Nepplot
Nepplot

Reputation: 118

I don't have your code, but you can test this? Use sub class, or check your class if they are affected or not in element inspector

.content {
background:gray;
padding:5px;
margin:5px 0;
}

.content div {
  margin:5px 0;
}

.content div.blue {
  color:blue;
}

.content div.red {
  color:red;
}

.content.test div {
  color:yellow !important;
}
<div class="content">
  <div class="red">Test</div>
  <div class="blue">Test</div>
  <div>Test</div>
</div>

<div class="content test">
  <div class="red">Test</div>
  <div class="blue">Test</div>
  <div>Test</div>
</div>

Upvotes: 1

Related Questions