How to highlight one of the options in Variations & Quantity selector (simple variations mode)?

In Simple Quantity mode we have a highlight option available just by clicking a checkbox, while in other modes like Simple Variations it is not yet available this way.

However, you can still highlight the desired option using a bit of Custom CSS.

Put this snippet of code to Custom CSS field, when you are editing your Handsome Checkout or Embed Form:

#wc-hcc-vq-options-table tbody tr:nth-of-type(4) {
  background-color: #F6E100 !important;
  font-weight: bold;
  border: 1px solid;
  box-shadow: 0 5px 10px rgb(0 0 0 / 50%);
}
#wc-hcc-vq-options-table tbody tr:nth-of-type(4) .wc-hcc-vq-options-item-wrap:before {
  content: '"Best Price!"';
  color: #f00;
  display: block;
}

#wc-hcc-vq-options-table tbody tr:nth-of-type(4) {

background-color: #F6E100 !important;

font-weight: bold;

border: 1px solid;

box-shadow: 0 5px 10px rgb(0 0 0 / 50%);

}

#wc-hcc-vq-options-table tbody tr:nth-of-type(4) .wc-hcc-vq-options-item-wrap:before {

content: '"Best Price!"';

color: #f00;

display: block;

}

It should look like that:

Also, in this code, you can edit the “Best Price!” text if needed.

And to highlight the other option, you need to edit the number in “nth-of-type(4)” piece to the actual number of your option + 1.

Currently it is option number 3. So we do 3 + 1 = 4.