Javascript Woocommerce花费X更多用于免费送货条显示

我制作了一个函数，用于显示客户需要花多少钱才能获得免费送货

function cart_notice() {
    
  $free_shipping_settings = get_option( 'woocommerce_free_shipping_settings' );
  $maximum = $free_shipping_settings['min_amount'];
  $current = WC()->cart->subtotal;
    if ( $current < $maximum ) {
      echo '<div class="woocommerce-message">Za besplatnu dostavu kupite dodatne proizvode u vrijednosti  ' . ($maximum - $current) . ' kn</div>';
  }
}
 
add_action( 'woocommerce_before_cart', 'cart_notice' );

功能车通知（）{
$free_shipping_settings=get_选项（'woocommerce_free_shipping_settings'）；
$maximum=$free_shipping_设置['min_amount']；
$current=WC（）->购物车->小计；
如果（$当前<$最大值）{
echo“Za besplatnu dostavu kupite dodatne proizvode u vrijednosti.”（最大值-$当前值）。“kn”；
}
}
添加行动（“购物车前的woocommerce”、“购物车通知”）；

现在，我想在文本下面显示一个进度条，但我不擅长Javascript，不知道如何根据我的函数完成它

我需要帮助为这个功能制作Javascript部分

谢谢