How can I hide out-of-stock variants in Symmetry theme?

Store Design

Topic summary

Goal: Hide out-of-stock product variants in the Symmetry theme (instead of showing them greyed out and unselectable).

Proposed solution: Add a CSS rule to the theme to remove unavailable options from the variant selector:

  • Selector: .cc-select__option.is-unavailable
  • Rule: display: none !important;
  • Location suggested: Assets > styles.css (append at the bottom).

Outcome: The original poster confirmed this CSS worked to hide unavailable variants.

Recent update / issue: Another user on Symmetry 7.2.1 reports there is no styles.css file in Assets and asks how to proceed.

Status: Partially resolved. The CSS approach is validated, but for Symmetry 7.2.1 the exact file/location for adding the CSS is unclear in the thread. No alternative file path or method was provided, leaving an open question on where to place the CSS in newer theme versions.

Summarized with AI on December 24. AI used: gpt-5.
1

I would like to be able to hide variants that are not available (out-of-stock). Currently they are grey and not selectable. But I want to make sure these out-of-stock variants are not visible at all.

What do I need to do? I am using theme Symmetry.

2

Hi @ArneSchuilenga ,

Go to Assets > styles.css and paste this at the bottom of the file:

.cc-select__option.is-unavailable {
    display: none !important;
}
3

Yes this worked. Thanks !

1 Like
4

@LitExtension I have a potentially complex question for you on symmetry. I will attempt to create new question and tag you or send you link.

xx Jvw

5

There is no file in this theme (7.2.1 Symmetry) in the Assets page called styles.css
So what to do?