How to show "variants" of a product when adding to cart?

Question

I have a list of products that the user is able to add to cart fastly so from main page the user could click just add to cart button on each product and the product will be added to the cart.

BUT each product could have some variants with which it can be added to the cart. Till now i've added the variants inside the modal with the product info which is opened when the user press on the product from the list, then at the bottom there is the list of variants which the user can select and then from that page add it to the cart.

So i thought to show the variants each time the user press the fast "Add to cart" button and remove the "Add to cart" and variants from the "info" modal but at this point that "Add to cart" will not be fast and as the most of the users will just not care about the variants it will affect their experience.

In the following gif you could see the main page with the list (and the blue button that is the fast "Add to Cart") and when the product is pressed and it's modal info is toggled with the variants and another "Add to cart" button.

And as you can see it's not intuitive that the user can press each product and under all info there will be the variants...

So which would be the best way to give the user choice of adding or not the variants?

Answer 1

Personally I don't see a problem in navigation or interactivity, but in the design.

Mainly the lack of contrast between the elements to be selected and the rest of the content makes them seem part of the same kind of information.

I would clearly differentiate the info areas from those of interactivity, enhancing the second.