Topic summary
Goal: Show a custom “Engraving” text field only when the appropriate variant option is selected; hide it when the “No” option is chosen.
Approaches discussed:
- JavaScript: One suggestion was to update global.js to add conditional logic controlling the field’s visibility.
- CSS-only (chosen): A solution using the :has() pseudo-class hides the textarea when the “Engraving = No” radio is checked:
variant-radios:has([name*=Engraving][value=“No”]:checked) ~ textarea[name*=Engraving] { display: none; }
Explanation: When the variant radios contain a checked “No” for Engraving, the sibling textarea with name containing “Engraving” is hidden.
Implementation details:
- Add the CSS to the theme’s custom CSS/style settings (no JavaScript needed). The OP asked where to place it and then confirmed success after minor adjustments.
Outcome: Resolved. The CSS solution achieved the desired behavior. No further actions or open questions noted. An image was shared but not essential to the solution.
Hello @ankursiddha
For this you need to update global.js code and add condition for this.
If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!
Hello @theyCallmepro
Can You Help me with the Code Also. Not That Good at It. Can Do The Basics. I Tried But I Guess I Am not getting the Name Right .
Technically, you can do this with “Custom CSS” only:
variant-radios:has([name*=Engraving][value="No"]:checked) ~ textarea[name*=Engraving] {
display: none;
}
Hey @tim_1 ,
This Sounds Easy & Simple to me. But You Mentioned the Solution as an Expert but I am Basically a NOOB. So Can You Elaborate or Help me with Codes. Where This Code Should Be Applied Exactly. ?
Collab Code : 7078
Hello @tim_1 ,
Thanks. It Worked i was able to manage to do some changes on the similar line guided by you and was able to manage and get the Desired Result. Your Guidance was Good to made me think in that direction. . . Thanks