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

Michael_Belfatt
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>

 

tim
Shopify Expert
2926 143 1021

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
AvidBrio
Shopify Expert
156 8 14

@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

 

If you find our comment helpful, hit the like button and accept it as a solution.
Want us to implement custom changes in your store? Contact us
Email me directly - jim@avidbrio.com
0 Likes
barry_james
New Member
4 0 0

This was almost soooo perfect - it works in all aspects except its not pulling the weight to the page. HELP PLEASE

 

0 Likes