section-rendering-api.liquid

{% comment %} add this code in the main-product.liquid {% endcomment %}
<script>
  const productUrl = `{{ product.url }}`;
  const sectionId = "expected-delivery";
  document.addEventListener("variant:updated", (e) => {
    const url = `${productUrl}?variant=${e.detail.variantId}&section_id=${sectionId}`
    console.log(url)
    
    fetch(url)
    .then((response) => response.text())
    .then((responseText) => {
      const html = new DOMParser().parseFromString(responseText, 'text/html');
      const updateDeliveryText = html.getElementById("shopify-section-expected-delivery").innerHTML;
      document.getElementById("delivery-text").innerHTML = updateDeliveryText;
    })
    .catch((e) => {
      console.error(e);
    })
  })
</script>

create a section expected-delivery.liquid with following content

<p>
  Delivery expected in: {{ product.selected_or_first_available_variant.metafields.custom.delivery_time }}
</p>

in product-info.js search for callback(html); and add following code under that line:

const variantId = html.querySelector("product-form [name='id']").value;
document.dispatchEvent(new CustomEvent("variant:updated", {
  detail: {
    variantId
  }
}))

then you need to render the information in main-product.liquid after the line {%- when 'buy_buttons' -%}

<div id="delivery-text">
  Delivery expected in: {{ product.selected_or_first_available_variant.metafields.custom.delivery_time }}
</div>