Craft theme selected variant button not visible

[momowt]

How do i make the selected variant button visible? Selecting the variant will make the button invisible, it is confusing to the buyers. 

[WalkYourStyle]

Can you share your store's URL?

[momowt]

offthecourt.store

[WalkYourStyle]

1. Go to 'Online Store' -> Themes -> Edit Code

2. In the assets folder, locate the file 'section-main-product.css'

3. At the end of the file add this code

/* Product Variant Selected Disappearing Problem */
.product-form__input input[type=radio]:checked+label{
   background-color: black;
}
.product-form__input input[type=radio]+label {
    border: 1px solid black;
}

[niraj_patel]

Hello @momowt 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  .product-form__input--pill input[type=radio]:checked+label {
      background-color: rgb(var(--color-foreground)) !important;
      color: rgb(var(--color-background)) !important;
   }
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Add this if this code not work then please share your store URL.

[momowt]

Hi, thanks for your suggestion but unfortunately it is not working. The url to my store is offthecourt.store

[niraj_patel · Accepted solution]

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  .product-form__input input[type=radio]:checked+label {
      background-color: #000 !important;
      color: #fff !important;
   }
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[momowt]

Thank you sir! it works!

[BSS-TekLabs]

- Here is the solution for you @momowt 
- Please follow these steps:

- Then find the theme.liquid file.
- Then add the following code at the before tag </head> and press 'Save' to save it.

 

<style>
.product-form__input input[type=radio]:checked+label {
    background: black !important;
}
</style>

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.