Debut Theme Changing Variant Option from Select to Radio Buttons

Technical Q&A
1

Hello everyone,

We have attempted to change the Variant dropdown into radio inputs so that we could implement the design that we wanted for our product page. I have managed to change it into radio inputs, but as I switch between the variant option, the price does not change and add to cart button does not add the right product to the shopping cart. I feel there is a JavaScript issue since I did not change the Liquid code that much.

Our product page: https://chaseyourdrinks.com/products/copy-of-chase-cola

password: spnkz1234!

Here is the original version of my product-template:


            {% include 'product-price-internal', variant: current_variant %}
          

          {% if section.settings.show_quantity_selector %}
            
              {% include 'icon-error' %} {{ 'products.product.quantity_minimum_message' | t }}
            

          {% endif %}

          {% capture "form_classes" -%}
            product-form product-form-{{ section.id }}{% unless section.settings.show_variant_labels %} product-form--hide-variant-labels{% endunless %}{% if section.settings.enable_payment_button and product.has_only_default_variant%} product-form--payment-button-no-variants{% endif %}
          {%- endcapture %}

          {% form 'product', product, data-productid: product.id, class:form_classes, novalidate: 'novalidate' %}
            {% unless product.has_only_default_variant %}
              {% for option in product.options_with_values %}
                
                  
                  
                

              {% endfor %}
            {% endunless %}

            

{% render 'th-subscription', product: product %}
            {% if section.settings.show_quantity_selector %}
              

                
                
              
        
            {% endif %}
        
              {% render 'bsub-widget' %} 
            
              
              {% if section.settings.enable_payment_button %}
                {{ form | payment_button }}
              {% endif %}
            

          {% endform %}

And this one is the one I implemented into my custom template:


                       		{% form 'product', product, data-productid: product.id, class:form_classes, novalidate: 'novalidate' %}
            					{% unless product.has_only_default_variant %}
              					{% for option in product.options_with_values %}
                       				
                                            {% endfor %}
                                          {% endunless %}

                              {% endform %}

Could someone help me to solve this issue? I searched in a lot but it does not seem to be fixable for me so far.

Any reply would be appreciated.

Thanks.

2

Replace Drop down with Radio Buttons for Variants in Debut theme