How can I grey out size picker text for sold out items?

Store Design
, , ,
1

Hi Guys,

I want to grey out the size picker button text for sold out items. I would appreciate your help.

URL: https://basicbastard.co/products/duck-tee-harbour-blue

Screenshot 2022-12-02 at 2.45.17 PM.png
Screenshot 2022-12-02 at 2.45.17 PM.png1162×610 118 KB

2

Hi @basicbastardco

This is Victor from PageFly - Landing Page Builder App.
You can go to Online store => themes => actions => edit code and add this code on file base.css

span.badge.price__badge-sold-out.color-inverse{
background: red !important;
}

Hope this answer helps.
Best regards,
Victor | PageFly team

3

I think you have mistaken me. I would like to grey out the size picker text only.

Screenshot 2022-12-02 at 3.43.37 PM.png
Screenshot 2022-12-02 at 3.43.37 PM.png890×146 8.96 KB

4

Hi @basicbastardco ,

You can try this code

.js.product-form__input input[type=radio]:checked+label{
border-color: red !important;
}

.product-form__input input[type=radio]+label:hover{
border-color: red !important;
}

Feel free to change “red” into any color you like.

Hope this answer helps.

Best regards,
Victor | PageFly team

5

It changes the whole section not the sold out ones only. I would like only the sold out size button to grey out.

6

Hi @basicbastardco ,

I’m sorry that all of my solutions do not work for you. I think you should contact Theme Support in this case as they are the best approach for this kind of issue.

I’m really sorry for any inconvenience caused to you.

Best regards,

Victor | PageFly