How to fix variant issues on single product page?

[marketplace026]

https://l06uo7vcz4efs808-1939374189.shopifypreview.com/products/babyphone-mary-by-sticklett-smart-fashion-babymonitor

{%- form 'product', product_card_product, id: product_form_id, class: 'element--full-width', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%} {% for variant in product_card_product.variants %} {{ variant.title }} {% endfor %} {{ add_to_cart_label }} {{- cart.currency.symbol -}} {{- product_card_product.selected_or_first_available_variant.price | money_without_currency -}}

{%- render 'icons', icon: 'error', class: 'form-message__icon space--mr--xsmall' -%}

{%- endform -%}

This show is happening right now
https://postimg.cc/hJysS2qf
but i want to do a show like this
https://postimg.cc/9rYGmLdC

[Himanshu7]

Try this

{% assign product_card_product = product %}
{{ product_card_product.variants }}

{%- form ‘product’,product_card_product,
id: product_form_id,
class: ‘element–full-width’,
novalidate: ‘novalidate’,
data-type: ‘add-to-cart-form’
-%}

{% assign unique_option1_values = product_card_product.variants | map: 'option1' | uniq %} {% for option1_value in unique_option1_values %} {% if option1_value != blank %} {{ option1_value }} {% endif %} {% endfor %} {% assign unique_option2_values = product_card_product.variants | map: 'option2' | uniq %} {% for option2_value in unique_option2_values %} {% if option2_value != blank %} {{ option2_value }} {% endif %} {% endfor %}

<button
type=“submit”
class=“button–tag flex–none”
{% if product_card_product.selected_or_first_available_variant.available == false %}
disabled
{% endif %}

{{ add_to_cart_label }} {{- cart.currency.symbol -}} {{- product_card_product.selected_or_first_available_variant.price | money_without_currency -}}

{%- render 'icons', icon: 'error', class: 'form-message__icon space--mr--xsmall' -%}

{%- endform -%}