add_action( ‘woocommerce_after_add_to_cart_form’, 

‘delivery_status_widget’, 40 );

function delivery_status_widget() {

?>

<link rel=”stylesheet” 

href=”https://use.fontawesome.com/releases/v5.14.0/css/all.css”>

<style>

    .delivery-status-widget {

        display: flex;

        flex-direction: row;

        justify-content: space-evenly;

        align-items: center;

        font-size: 13px; 

        margin-bottom: 10px;

        line-height: 15px;

        padding: 14px 10px;

        color: #121212;

        background-color: white;

        border: 1px dotted black;

        color: #121212;

        border-radius: 6px;

    }

    .delivery-status-widget .status {

        display: flex;

        flex-direction: column;

        align-items: center;

        margin: 0 15px;

    }

    .delivery-status-widget .status-icon {

        font-size: 24px;

        margin-bottom: 5px;

        color: #121212!important;

    }

    .delivery-status-widget .status-text {

        font-weight: bold;

        margin-bottom: 5px;

    }

    .delivery-status-widget .status-date {

        font-size: 12px;

        color: gray;

    }

   </style>

 

<div class=”delivery-status-widget”>

    <div class=”status”>

        <i class=”fas fa-shopping-bag status-icon” style=”color: 

   gray;”></i>

        <div class=”status-text”>Orderdato</div>

        <div class=”status-date” id=”order-date”></div>

    </div>

    <div class=”status”>

        <i class=”fas fa-angle-double-right”></i>

    </div>

    <div class=”status”>

        <i class=”fas fa-shipping-fast status-icon” style=”color: 

grey;”></i>

        <div class=”status-text”>Afsendt</div>

        <div class=”status-date” id=”ship-date”></div>

    </div>

    <div class=”status”>

        <i class=”fas fa-angle-double-right”></i>

    </div>

    <div class=”status”>

        <i class=”fas fa-box-open status-icon” style=”color: 

grey;”></i>

        <div class=”status-text”>levering</div>

        <div class=”status-date” id=”delivery-date”></div>

    </div>

</div>

 

<script>

    jQuery(document).ready(function($) {

        var today = new Date();

 

        // Ordered

        var orderedDate = today.toLocaleDateString(“en-US”, { month: ‘short’, day: ‘numeric’ });

        document.getElementById(“order-date”).innerHTML = orderedDate;

 

        // Shipped

        var shipDate = new Date(today);

        shipDate.setDate(today.getDate() + 2);

        shipDate = shipDate.toLocaleDateString(“en-US”, { month: ‘short’, day: ‘numeric’ });

        document.getElementById(“ship-date”).innerHTML = shipDate;

 

        // Delivered

        var deliveryDate = new Date(today);

        deliveryDate.setDate(today.getDate() + 4);

        deliveryDate = deliveryDate.toLocaleDateString(“en-US”, { month: ‘short’, day: ‘numeric’ });

        document.getElementById(“delivery-date”).innerHTML = deliveryDate;

    });

</script>

<?php

}