Ecommerce Shopify WordPress Discussion

I need to update the variant weight and id to get the right shipping estimate on a Shopify product page

I have created a shipping estimator for the product page of Shopify, the estimator works for the product/variant ID that the page originally loads with, but not when you select a different variant after the page loads, the same is the case of the variants weight. I want the shipping estimator to get the shipping cost for the individual variants as they are selected. This is basically the code I am using in a custom field on a Shopify 2.0 template, I just cant seem to get it to grab the currently selected variant. <div> <div id='widgetBespokeProductShippingEstimator' class="quick-actions clearfix"> {% comment %} Post code and shipping starts here {% endcomment %} <label for="txtBespokePostcode" style="font-size:1.3rem;">Estimate Shipping</label> <div class="estimate-shipping" style="max-width:44rem;display:flex;"> <input type="text" id="txtBespokePostcode" class="txtBespokePostcode" maxlength="4" placeholder="Enter postcode" style="border-radius:20px 0px 0px 20px;border:solid 2px;text-align:center;min-width:9.5rem;" /> <button type="button" id="btnBespokeSubmit" class="button button--full-width btnBespokeSubmit" style="border-radius:0px 20px 20px 0px;--border-offset:0;--border-opacity:0;">Get Estimate</button> </div> {% comment %} post code and shipping ends here {% endcomment %} {% for tag in product.tags %} {% if tag == 'free' %} <input type="hidden" class="product-tag tag-{{ tag }}" id="product-tag" value="{{ tag }}">{% endif %} {% endfor %} <input type='hidden' id='txtBespokeProductID' value='{{product.selected_or_first_available_variant.id}}' /> <input type='hidden' id='txtBespokeVariantWeight' value='{{product.selected_or_first_available_variant.weight}}' /> <span id="lblBespokeRate" style="display:block;font-size:1.3rem;max-width:44rem;margin-top:5px;border-radius:20px;box-shadow:0px 0px 10px 0px rgba(34,34,34,0.2);"></span> </div> </div> <!-- BESPOKE SHIPPING - product page shipping estimator --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.btnBespokeSubmit').on('click',function() { var postcode = $(this).siblings('.txtBespokePostcode').val(); var state = $(this).siblings('.txtBespokeState').val(); var id = $('#txtBespokeProductID').val(); var wt = $('#txtBespokeVariantWeight').val(); var qty = 1; var product_tag = $('#widgetBespokeProductShippingEstimator').first().find('#product-tag').val(); $('#quantity').each(function() { qty = $(this).val(); }); console.log({{product.selected_or_first_available_variant.id}}); console.log({{product.selected_or_first_available_variant.weight}}); console.log(qty); var requestObj = {"origin":{"country":null,"postal_code":null,"province":null,"city":"","name":null,"address1":"","address2":"","address3":null,"phone":"","fax":null,"address_type":null,"company_name":""}, "destination":{"country":"AU","postal_code":postcode,"province":state,"city":"","name":"","address1":"","address2":"","address3":null,"phone":"","fax":null,"address_type":null,"company_name":""},"items":[ {"name":"","sku":"","quantity":qty,"grams":wt,"price":0,"vendor":"","requires_shipping":true,"taxable":true,"fulfillment_service":"manual","properties":null,"product_id":0,"variant_id":id} ],"currency":"AUD"};
TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.