How to fix variant issues on single product page?

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' -%} {{ 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

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’
-%}

<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 -%}