Solving variants issue using variantListener

In your Shopify store admin, please go to your online store Themes screen, and go to Edit code of the theme you want.

1. Go to the correct file:

Go to Themes > Sections and search for the product-template.liquid file.
Alternatively, go to Templates > product.liquid.

2. Add the following call at the location requested by the customer:

    {% render 'wishlisthero-collection-product' with product: product, variantListener:"product-page" %} 
  

3. Update the wishlisthero-collection-product.liquid file:

Update the wishlisthero-collection-product.liquid file to the following code:

    {% comment %}
   
 Wishlist Hero Snippets - V 1.0.0
   
 {% endcomment %}
   
 {% unless buttonMode %}
   
 {% assign buttonMode = 'icon_only' %}
   
 {% endunless %}
   
 {% unless buttonView %}
   
 {% assign buttonView = 'Collection' %}
   
 {% endunless %}
   
 {% unless buttonClass %}
   
 {% assign buttonClass = 'wishlisthero-floating' %}
   
 {% endunless %}
   
 {% unless variantListener %}
   
 {% assign variantListener = '' %}
   
 {% endunless %}
   
 {% assign image = product.featured_image %}
   
 {% assign name = product.title %}
   
 {% capture url %}https://{{shop.domain}}{{product.url}}{% endcapture %}
   
 {% for var in product.variants %}
   
 {% if product.selected_or_first_available_variant.id == var.id %}
   
 {% if var.image and var.image.src %}
   
 {% assign image = var.image.src %}
   
 {% endif %}
   
 {% if var.url %}
   
 {% assign url = var.url %}
   
 {% endif %}
   
 {% if var.name %}
   
 {% assign name = var.name %}
   
 {% endif %}
   
 {% endif %}
   
 {% endfor %}
   
     data-wlh-link="{{url}}"
    
 data-wlh-variantListener="{{variantListener}}"
    
 data-wlh-variantid="{{product.selected_or_first_available_variant.id}}"
    
 data-wlh-price="{{product.selected_or_first_available_variant.price | remove: '.' | remove: ',' | divided_by: 100.0 }}"
    
 data-wlh-name="{{name | strip_html }}"
    
 data-wlh-image="{{image | img_url: '1024x'}}"
    
 class="wishlist-hero-custom-button {{buttonClass}}"
    
 data-wlh-view="{{buttonView}}"
    
 data-wlh-mode="{{buttonMode}}">