Introducere

Dacă ai un magazin online WooCommerce care vinde torturi personalizate, ai nevoie de un sistem care să permită clienților să aleagă greutatea, textul personalizat, numărul de porții și data livrării. WooCommerce nu oferă această funcționalitate nativ, dar cu un cod personalizat poți adăuga aceste opțiuni rapid și eficient.

În acest ghid detaliat, vei învăța pas cu pas cum să implementezi această funcționalitate. Vei avea un formular personalizat în pagina produsului, iar datele introduse de client vor fi afișate corect în coșul de cumpărături, la finalizarea comenzii, în emailul de confirmare și în detaliile comenzii din panoul de administrare WooCommerce.

Această metodă îți va permite să îmbunătățești experiența utilizatorilor și să crești conversiile prin oferirea unor opțiuni de personalizare flexibile pentru fiecare tort comandat.

Vezi tutorialul pe YouTube

Implementarea codului personalizat în WooCommerce

Acest cod trebuie adăugat în funcțiile temei tale (functions.php) sau printr-un plugin de tip Code Snippets.

<?php

// Adăugăm un câmp personalizat în pagina de editare a produsului pentru a marca produsele ca "Tort"
add_action('woocommerce_product_options_general_product_data', function() {
    woocommerce_wp_checkbox([
        'id' => '_is_tort',
        'label' => 'Este un tort?',
        'description' => 'Bifează dacă acest produs este un tort',
    ]);
});

// Salvăm opțiunea
add_action('woocommerce_admin_process_product_object', function($product) {
    $product->update_meta_data('_is_tort', isset($_POST['_is_tort']) ? 'yes' : 'no');
});

// Modificăm afișarea prețului pentru a include "/ kg" la produsele de tip tort
add_filter('woocommerce_get_price_html', function($price, $product) {
    if ($product->get_meta('_is_tort') === 'yes') {
        $price .= ' / kg';
    }
    return $price;
}, 10, 2);

// Adăugăm câmpurile personalizate pe pagina produsului dacă produsul este marcat ca "Tort"
add_action('woocommerce_before_add_to_cart_button', function() {
    global $product;
    if ($product->get_meta('_is_tort') !== 'yes') return;
    ?>
    <style>
        .woocommerce-cart-form .product-quantity input.qty { display: none !important; }
    </style>
    <div class="tort-custom-fields">
        <p>
            <label for="tort_kg">Cantitate (kg):</label>
            <input type="number" id="tort_kg" name="tort_kg" value="1" min="1" step="0.5" required>
        </p>
        <p>
            <label for="tort_text">Text pe tort:</label>
            <input type="text" id="tort_text" name="tort_text">
        </p>
        <p>
            <label for="tort_persoane">Număr de persoane:</label>
            <input type="number" id="tort_persoane" name="tort_persoane" value="1" min="1" required>
        </p>
        <p>
            <label for="tort_data">Data livrării:</label>
            <input type="date" id="tort_data" name="tort_data" required>
        </p>
        <p id="tort_price_display">Preț total: <?php echo wc_price($product->get_price()); ?></p>
    </div>
    <script>
        document.getElementById('tort_kg').addEventListener('input', function() {
            let kg = parseFloat(this.value);
            let pricePerKg = <?php echo $product->get_price(); ?>;
            let totalPrice = kg * pricePerKg;
            document.getElementById('tort_price_display').innerText = 'Preț total: ' + totalPrice.toFixed(2) + ' lei';
        });
    </script>
    <?php
});

// Salvăm informațiile în coș și ajustăm prețul produsului
add_filter('woocommerce_add_cart_item_data', function($cart_item_data, $product_id, $variation_id) {
    if (!empty($_POST['tort_kg'])) {
        $cart_item_data['tort_kg'] = sanitize_text_field($_POST['tort_kg']);
        $cart_item_data['tort_text'] = sanitize_text_field($_POST['tort_text']);
        $cart_item_data['tort_persoane'] = sanitize_text_field($_POST['tort_persoane']);
        $cart_item_data['tort_data'] = sanitize_text_field($_POST['tort_data']);
        $cart_item_data['unique_key'] = md5(microtime().rand()); // Evită gruparea în coș
    }
    return $cart_item_data;
}, 10, 3);

// Afișăm informațiile în coș și comandă cu o stilizare mai bună
add_filter('woocommerce_get_item_data', function($item_data, $cart_item) {
    $styled_item = '';
    if (!empty($cart_item['tort_kg'])) {
        $styled_item .= '<p><strong>Cantitate (kg):</strong> ' . esc_html($cart_item['tort_kg']) . '</p>';
    }
    if (!empty($cart_item['tort_text'])) {
        $styled_item .= '<p><strong>Text pe tort:</strong> ' . esc_html($cart_item['tort_text']) . '</p>';
    }
    if (!empty($cart_item['tort_persoane'])) {
        $styled_item .= '<p><strong>Număr de persoane:</strong> ' . esc_html($cart_item['tort_persoane']) . '</p>';
    }
    if (!empty($cart_item['tort_data'])) {
        $styled_item .= '<p><strong>Data livrării:</strong> ' . esc_html($cart_item['tort_data']) . '</p>';
    }
    if (!empty($styled_item)) {
        $item_data[] = [
            'name' => 'Procesare',
            'value' => $styled_item,
            'display' => $styled_item
        ];
    }
    return $item_data;
}, 10, 2);

// Salvăm metadatele în detaliile comenzii
add_action('woocommerce_checkout_create_order_line_item', function($item, $cart_item_key, $values, $order) {
    if (!empty($values['tort_kg'])) {
        $item->add_meta_data('Kg', $values['tort_kg'], true);
        $item->add_meta_data('Text pe tort', $values['tort_text'], true);
        $item->add_meta_data('Număr de persoane', $values['tort_persoane'], true);
        $item->add_meta_data('Data livrării', $values['tort_data'], true);
    }
}, 10, 4);

// Ajustăm prețul produsului în coș în funcție de kg selectate
add_action('woocommerce_before_calculate_totals', function($cart) {
    if (is_admin() && !defined('DOING_AJAX')) return;
    foreach ($cart->get_cart() as $cart_item_key => $cart_item) {
        if (!empty($cart_item['tort_kg']) && isset($cart_item['data'])) {
            $kg = floatval($cart_item['tort_kg']);
            $pricePerKg = floatval($cart_item['data']->get_price());
            $totalPrice = $kg * $pricePerKg;
            $cart_item['data']->set_price($totalPrice);
        }
    }
}, 10);

function custom_tort_styles() {
    echo '<style>
        /* Stilizare formular tort */
        .tort-custom-fields {
            background: #f8f9fa;
            border: 2px solid #e0e0e0;
            padding: 15px;
            border-radius: 8px;
            margin-top: 15px;
            max-width: 400px;
        }

        .tort-custom-fields p {
            display: flex;
            flex-direction: column;
            margin-bottom: 10px;
        }

        .tort-custom-fields label {
            font-weight: 600;
            margin-bottom: 5px;
            color: #333;
        }

        /* Stilizare input-uri */
        .tort-custom-fields input[type="text"],
        .tort-custom-fields input[type="number"],
        .tort-custom-fields input[type="date"] {
            border: 1px solid #ccc;
            padding: 8px;
            border-radius: 5px;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .tort-custom-fields input:focus {
            border-color: #0073aa;
            box-shadow: 0 0 5px rgba(0, 115, 170, 0.3);
        }

        /* Stilizare preț total */
        #tort_price_display {
            font-size: 18px;
            font-weight: bold;
            color: #d9534f;
            padding: 10px;
            border: 2px dashed #d9534f;
            text-align: center;
            border-radius: 5px;
            margin-top: 10px;
        }
    </style>';
}
add_action('wp_head', 'custom_tort_styles');

1.Pagina produsului

2. Coșul de cumpărături

După adăugarea în coș, informațiile despre tort sunt afișate astfel încât clientul să le poată verifica.

3. Finalizarea comenzii

În pagina de checkout, toate detaliile tortului sunt afișate pentru confirmare.

4. Emailul clientului

După plasarea comenzii, clientul primește un email cu detaliile tortului selectat.

5. Detaliile comenzii în WooCommerce Admin

Administratorul magazinului va putea vedea toate informațiile în secțiunea de administrare a comenzilor din WooCommerce.

Concluzie

Această metodă permite personalizarea avansată a produselor de tip tort în WooCommerce, oferind o experiență mai bună pentru clienți. Prin acest sistem, magazinul tău online va fi mai atractiv și mai bine optimizat pentru vânzarea produselor personalizate.

Dacă ai întrebări sau vrei să îmbunătățim acest cod, lasă un comentariu! 🚀