Acest articol te va ghida pas cu pas în implementarea unui mesaj de livrare personalizat pe pagina produsului în WooCommerce. Mesajul include o iconiță de camion, o estimare dinamică a timpului de livrare și o animație atrăgătoare.

Cod Complet

Vezi tutorialul pe YouTube

Copiază și inserează următorul cod în fișierul functions.php al temei tale WordPress active sau utilizează un plugin dedicat pentru inserarea de coduri personalizate, cum ar fi Code Snippets:

// Adăugăm mesajul de livrare personalizat pe pagina produsului
add_action('woocommerce_single_product_summary', 'custom_delivery_message_with_truck_icon', 30);

function custom_delivery_message_with_truck_icon() {
    global $product;
    $product = wc_get_product(get_the_ID());

    if (!$product) {
        return;
    }

    $stock_quantity = $product->get_stock_quantity();

    if ($stock_quantity > 0) {
        // Setăm fusul orar și limbajul
        date_default_timezone_set('Europe/Bucharest');
        setlocale(LC_TIME, 'ro_RO.utf8', 'ro_RO', 'ro');

        // Obținem ziua și ora curentă
        $current_day = date('N'); // 1 = Luni, ..., 7 = Duminică
        $current_hour = date('G'); // Ora curentă (0-23)

        // Inițializare timp livrare
        $delivery_time = 24;

        // Reguli pentru zilele și orele de livrare
        if ($current_day >= 1 && $current_day <= 5) { // Luni - Vineri
            if ($current_hour >= 13) {
                $delivery_time = ($current_day == 5) ? 96 : 48; // Vineri după ora 13 = livrare marți
            }
        } elseif ($current_day == 6) { // Sâmbătă
            $delivery_time = ($current_hour < 13) ? 72 : 96; // Livrare marți
        } elseif ($current_day == 7) { // Duminică
            $delivery_time = 48; // Livrare marți
        }

        // Sărbători legale
        $holidays = [
            '2024-01-01', '2024-01-02', '2024-05-01', '2024-05-05', '2024-05-06',
            '2024-06-01', '2024-06-16', '2024-08-15', '2024-11-30', '2024-12-25',
            '2024-12-26', '2025-01-01', '2025-01-02', '2025-04-18', '2025-04-21',
            '2025-05-01', '2025-06-01', '2025-06-08', '2025-08-15', '2025-11-30',
            '2025-12-25', '2025-12-26'
        ];

        // Verificăm dacă data curentă este o sărbătoare legală
        $today = date('Y-m-d');
        if (in_array($today, $holidays)) {
            $delivery_time += 24; // Adăugăm o zi
        }

        // Calculăm data estimată de livrare
        $estimated_delivery_timestamp = strtotime("+$delivery_time hours");
        $estimated_delivery_date = strftime('%d %B', $estimated_delivery_timestamp);
        $estimated_delivery_day = strftime('%A', $estimated_delivery_timestamp);

        // Afișăm mesajul cu iconița camionului și animația
        echo '<p class="delivery-message animated-message">
                <i class="fa fa-truck fa-flip-horizontal"></i>
                <span><strong>Estimare livrare:</strong> ' . ucfirst($estimated_delivery_day) . ', ' . $estimated_delivery_date . '.</span>
              </p>';
    }
}

// Adăugăm CSS pentru stilizare și animație
add_action('wp_head', 'add_delivery_message_styles');
function add_delivery_message_styles() {
    echo '<style>
        .delivery-message {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background-color: #f9f9f9;
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-family: Arial, sans-serif;
            font-size: 16px;
            color: #333;
            margin-top: 15px;
            font-weight: bold;
            overflow: hidden;
            position: relative;
        }
        .delivery-message .fa-truck {
            font-size: 22px;
            color: #4CAF50;
        }
        .animated-message {
            animation: slideInFromRight 2s ease-out, slideOutToLeft 10s ease-in 10s infinite;
        }
        @keyframes slideInFromRight {
            0% {
                transform: translateX(100%);
                opacity: 0;
            }
            50% {
                transform: translateX(0);
                opacity: 1;
            }
        }
        @keyframes slideOutToLeft {
            50% {
                transform: translateX(0);
                opacity: 1;
            }
            100% {
                transform: translateX(-100%);
                opacity: 0;
            }
        }
    </style>';
}

// Încarcă Font Awesome pentru iconița camionului
add_action('wp_enqueue_scripts', 'enqueue_font_awesome');
function enqueue_font_awesome() {
    wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
}

Explicații ale Codului

1. Adăugarea Mesajului de Livrare:
   • custom_delivery_message_with_truck_icon este funcția care generează mesajul personalizat de livrare.
   • Verifică stocul disponibil și aplică reguli de livrare pentru zile lucrătoare, weekenduri și sărbători legale.
2. Calculul Datei Estimate:
   • Utilizează date și strftime pentru a obține ziua și data în format localizat (română).
   • Adaugă ore suplimentare în funcție de ziua curentă și sărbătorile legale.
3. Stilizare:
   • CSS-ul adaugă un aspect vizual plăcut și o animație dinamică pentru mesajul de livrare.
4. Iconița Camionului:
   • Se folosește Font Awesome pentru afișarea iconiței de camion.
   • Iconița este inclusă în mesaj și stilizată pentru un aspect profesional.

Cum să Folosești Codul

1. Adaugă codul complet în fișierul functions.php sau folosește un plugin ca Code Snippets.
2. Verifică dacă tema ta suportă wp_head și wp_enqueue_scripts pentru încărcarea CSS-ului și a bibliotecii Font Awesome.
3. Asigură-te că ai configurat corect fusul orar pentru România în WordPress (Setări > General > Fus orar).

Rezultatul Final

Un mesaj de livrare elegant, dinamic și animat va fi afișat pe pagina fiecărui produs disponibil în stoc, oferind utilizatorilor informații clare despre data estimată de livrare.