Hide a button depending on variant selected

Store Design
1

Hey all, I have a quick scripting question…

To make for a smooth UX, we’re trying to hide and show a certain button depending on which variant is selected.

  1. If Default is chosen, the Preview Legend button should be hidden.
  2. If Personalized is chosen, the Preview Legend button should be visible.

We’re using the Impact v4.0.2 theme. Do you think this is doable? Thanks for any advice!

BentonsBacon_0-1678896286293.png
BentonsBacon_0-1678896286293.png739×729 55.8 KB

2

Hi [email removed]BentonsBacon,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file → Save

.product-info:has(.variant-picker__option-values a:first-child.is-selected) buy-buttons button[is="custom-button"]{
display:none
}

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

1 Like
3

That actually didn’t work, but we’ve decided to go a different route with the UI, so it’s all good. Thanks so much for taking a stab at it anyway :slightly_smiling_face:

4

you are welcome. I’m glad when I can help you :heart_eyes:

1 Like