Variant Metafield display on product page

Store Design
1

Hi,
I have been trying to add variant metafield using custom liquid using below code:
{{ product.selected_or_first_available_variant.metafields.custom.details.value }}
But everytime I move from one variant to another I will have to refresh my page for the value of each variant metafield to change. Can someone please help me?

2

Hi MRJJEWELLERSB,
If your theme uses JavaScript or jQuery to handle variant selection and updates, ensure that it includes logic to dynamically update the metafield value when switching between variants. You may need to inspect the JavaScript code in your theme files to identify any potential issues.
Here is a sample code, you can change it as per your variables

// Assuming you have a select dropdown for variant selection with id "variant-select"
$('#variant-select').change(function() {
    var selectedVariantId = $(this).val();
    var selectedVariant = product.variants.find(function(variant) {
        return variant.id == selectedVariantId;
    });

    if (selectedVariant) {
        // Assuming the variant metafield key is "details"
        var variantDetails = selectedVariant.metafields.custom.details.value;
        
        // Update the DOM element to display the variant metafield value
        $('#variant-details').text(variantDetails);
    }
});