How to display the selected variants weight on product page (Debut Theme)

New Member
1 0 1

I was wondering if anyone could help me with a code problem I'm having. I'm setting up a store and I want the product page to update the SKU, Price, and Weight when you select a different variant. So far I have SKU and Price figured out but the weight is not working. 

<div class="product-info-extra"> 
<strong>Model Number:</strong> <span class="variant-sku">{{ currentvariant.sku }} </span> <br/> <strong>Item Weight</strong> <span class="variant-weight">{{ currentvariant.weight | weightwithunit }}</span> <br/><br/> 
</div>

 

Shopify Expert
2743 84 883

Hi Michael

The filter you use is called weight_with_unit,  not weightwithunit.

 

However, to change the weight displayed according to variant selection we need to use javascript. Since Shopify does not provide weight formatting javascript function, we will have to do it ourselves.

So, first you need to amend your liquid:

<strong>Model Number:</strong>
  <span class="variant-sku"> {{ currentvariant.sku }} </span> <br/> 
<strong>Item Weight</strong> 
  <span class="variant-weight">{{ currentvariant.weight | round: 2 | divided_by: 1000}}</span>kg <br/><br/> 

Then, open your theme.js Asset, find function _updateSKU  and right above the // update the sku comment (line ~2530) paste the following code:

$('span.variant-weight').text( (variant.weight / 1000).toFixed(2) );
Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
Shopify Expert
96 4 8

@tim I am using the theme debut theme latest version but I can get the weight on the product page.   can you check this solution was not working on the updated theme may be. 

I can see the update Sku function but on theme.js code can't see code for the update weight can you help me.
thank you in advance 
 
update SKU working  for me 
 

AvidBrio_0-1606388157119.png

 

0 Likes