How to Apply CSS Styling (Strikethrough) to Out-of-Stock Product Variation Swatches

How To
1

Hi Bricks team & community,

I’m using Bricks’ built-in Variation Swatches feature and would like to style
out-of-stock variation options with a strikethrough text decoration.

Current situation:

  • I’ve added CSS targeting `[aria-disabled=“true”]` and `.disabled` classes
  • However, the variation swatches don’t seem to add these attributes/classes
    when a product option is out of stock
  • I’ve tried multiple CSS selectors but nothing is applied to the out-of-stock items

Questions:

  1. Does Bricks’ Variation Swatches automatically add a class or aria-disabled
    attribute to out-of-stock options?
  2. If not, what’s the recommended approach to style out-of-stock variations
    with CSS/JavaScript?
  3. Are there any hooks or filters I can use to add a custom class to
    out-of-stock swatches?

Any guidance would be appreciated!

Thank you.

2

Same issue.

Can’t find a way to disable out of stock variations.