Shopify – Issues with Jquery Function for displaying weight

how are you all today?

I need your help with coding on my product page (product.liquid). Need to display the weight + weight converted unit inside the variant radio buttons.

Jquery variant function on product.liquid:

jQuery(function($) {
    {% if product.available and product.variants.size >= 1 %}
    var product = {{product | json}};
    var layout = $('.product-page-area');
    if (product.variants.length >= 1) { //multiple variants
      for (var i = 0; i < product.variants.length; i++) {
        var variant = product.variants[i];
        var option = '<option value="' + variant.id + '">' + variant.title + '</option>';
        layout.find('form.product-form > select').append(option);
      }
      new Shopify.OptionSelectors("product-selectors", {
        product: product,
        onVariantSelected: selectCallback,
        enableHistoryState: true
      });

      //start of quickview variant;
      var filePath = asset_url.substring(0, asset_url.lastIndexOf('/'));
      var assetUrl = asset_url.substring(0, asset_url.lastIndexOf('/'));
      var options = "";
      for (var i = 0; i < product.options.length; i++) {
        options += '<div class="swatch clearfix" data-option-index="' + i + '">';
        options += '<div class="header">' + product.options[i] + ':</div>';
        options += '<div class="variant-items">';
        var is_color = false;
        var is_square = 'square';
        if (/Color|Colour/i.test(product.options[i])) {
          is_color = true;
        }
        if (swatch_color_type == '2') {
          is_color = false;
          is_square = '';
        }
        var optionValues = new Array();
        for (var j = 0; j < product.variants.length; j++) {
          var variant = product.variants[j];
          var value = variant.options[i];
          if(variant.featured_image && product_swatch_setting == '2') {
            var img = variant.featured_image.src.lastIndexOf(".");
            var vimg = variant.featured_image.src.slice(0, img) + "_50x50_crop_center" + variant.featured_image.src.slice(img);
          }
          var valueHandle = convertToSlug(value);
          var forText = 'swatch-' + i + '-' + valueHandle;
          if (optionValues.indexOf(value) < 0) {
            //not yet inserted
            options += '<div data-value="' + value + '" class="swatch-element '+is_square+' '+product_swatch_size+' '+(is_color ? "color" : "")+' ' + (is_color ? "color" : "") + valueHandle + (variant.available ? ' available ' : ' soldout ') + '">';
            
            if (is_color) {
              options += '<div class="tooltip">' + value + '</div>';
            }
            options += '<input id="' + forText + '" type="radio" name="option-' + i + '" value="' + value + '" ' + (j == 0 ? ' checked ' : '') + (variant.available ? '' : ' disabled') + ' />';

            if (is_color) {
              if(vimg && product_swatch_setting == '2') {
                options += '<label for="' + forText + '" class="swatch-image" style="overflow:hidden;"><img src="' + vimg + '" class="variant-image" style="max-width:100%;" /><img class="crossed-out" src="' + assetUrl + 'soldout.png" /></label>';
              }else{
                options += '<label for="' + forText + '" style="background-color: ' + valueHandle + '; background-image: url(' + filePath + valueHandle + '.png)"><img class="crossed-out" src="' + assetUrl + 'soldout.png" /></label>';
              }
            } else {
              options += '<label class="' + value + '" for="' + forText + '">' + '<span class="variant-button-top"></span>' + variant.weight + '<span class="variant-button-bottom"></span>' + '<img class="crossed-out" src="' + assetUrl + 'soldout.png" /></label>';
            }
            options += '</div>';
            if (variant.available) {
              $('.product-page-area .swatch[data-option-index="' + i + '"] .' + valueHandle).removeClass('soldout').addClass('available').find(':radio').removeAttr('disabled');
            }
            optionValues.push(value);
          }
        }
        options += '</div>';
        options += '</div>';
      }
      if(swatch_color_type == '1' || swatch_color_type == '2') {
        layout.find('form.product-form .product-options > select').after(options);
        layout.find('.swatch :radio').change(function() {
          var optionIndex = $(this).closest('.swatch').attr('data-option-index');
          var optionValue = $(this).val();
          $(this)
          .closest('form')
          .find('.single-option-selector')
          .eq(optionIndex)
          .val(optionValue)
          .trigger('change');
        });
      }
  
      if (product.available) {
        Shopify.optionsMap = {};
        Shopify.linkOptionSelectors(product);
      }
      //end of quickview variant
    } else { //single variant
      layout.find('form.product-form .product-options > select').remove();
      var variant_field = '<input type="hidden" name="id" value="' + product.variants[0].id + '">';
      layout.find('form.product-form').append(variant_field);
    }
    {% endif %}
  });

On this line:

+ '<span class="variant-button-top"></span>' + variant.weight + '<span class="variant-button-bottom"></span>' +

I want to use: variant.weight | weight_with_unit: variant.weight_unit

But it does not work. Even if i use: + variant.weight + variant.weight_unit +
It returns undefined.

I want to return the variant weight and the variant converted unit.

Can you give me a hand? Thank you in advance!