Personalizate pentru Prețuri pe Kg și Sac în WooCommerce

YouTube Logo Urmărește canalul nostru de YouTube

Această soluție este perfectă pentru magazinul online care comercializează produse vândute la kilogram sau în saci de 50 kg, cum ar fi produse agricole sau materiale de construcții. Vom adăuga câmpuri personalizate pentru prețul pe kilogram și pe sac în backend-ul WooCommerce, iar pe pagina de produs vom afișa aceste opțiuni pentru selecția cantității.

Codul Complet

Mai jos este codul complet pentru implementarea funcționalității:

// Adăugăm câmpurile pentru preț pe kilogram și preț pe sac în backend (pagina de administrare a produsului)
add_action('woocommerce_product_options_general_product_data', 'add_price_per_kg_and_sac_fields');
function add_price_per_kg_and_sac_fields() {
    echo '<div class="options_group">';
    woocommerce_wp_text_input([
        'id'          => '_price_per_kg',
        'label'       => __('Preț pe kg', 'woocommerce'),
        'placeholder' => 'Ex. 10.00',
        'type'        => 'number',
        'custom_attributes' => [
            'step' => '0.01',
            'min'  => '0'
        ]
    ]);
    woocommerce_wp_text_input([
        'id'          => '_price_per_sac',
        'label'       => __('Preț pe sac (50kg)', 'woocommerce'),
        'placeholder' => 'Ex. 500.00',
        'type'        => 'number',
        'custom_attributes' => [
            'step' => '0.01',
            'min'  => '0'
        ]
    ]);
    echo '</div>';
}

// Salvăm valorile câmpurilor pentru preț pe kilogram și preț pe sac
add_action('woocommerce_process_product_meta', 'save_price_per_kg_and_sac_fields');
function save_price_per_kg_and_sac_fields($post_id) {
    update_post_meta($post_id, '_price_per_kg', sanitize_text_field($_POST['_price_per_kg']));
    update_post_meta($post_id, '_price_per_sac', sanitize_text_field($_POST['_price_per_sac']));
}

// Afișăm „/ kg” după prețul inițial
add_filter('woocommerce_get_price_html', 'display_price_per_kg_next_to_price', 10, 2);
function display_price_per_kg_next_to_price($price, $product) {
    $price_per_kg = get_post_meta($product->get_id(), '_price_per_kg', true);

    if (!empty($price_per_kg)) {
        $price .= ' <span style="font-size: 14px; color: #555;">/ kg</span>';
    }

    return $price;
}

// Adăugăm opțiunile „1kg” și „sac” pe pagina produsului
add_action('woocommerce_before_add_to_cart_button', 'add_kg_and_sac_options');
function add_kg_and_sac_options() {
    global $product;

    $price_per_kg = get_post_meta($product->get_id(), '_price_per_kg', true);
    $price_per_sac = get_post_meta($product->get_id(), '_price_per_sac', true);

    if (!empty($price_per_kg) || !empty($price_per_sac)) {
        echo '<div class="kg-and-sac-options">';
        echo '<label class="quantity-label"><strong>Alege cantitatea:</strong></label>';
        echo '<div class="radio-buttons-container">';
        if (!empty($price_per_kg)) {
            echo '<input type="radio" id="option_kg" name="kg_or_sac" value="kg" checked>
                  <label for="option_kg" class="radio-label">1kg (' . wc_price($price_per_kg) . ')</label>';
        }
        if (!empty($price_per_sac)) {
            echo '<input type="radio" id="option_sac" name="kg_or_sac" value="sac">
                  <label for="option_sac" class="radio-label">Sac (50kg) (' . wc_price($price_per_sac) . ')</label>';
        }
        echo '</div>';
        echo '</div>';
    }
}

// Salvăm selecția utilizatorului în coș
add_filter('woocommerce_add_cart_item_data', 'add_kg_or_sac_to_cart', 10, 2);
function add_kg_or_sac_to_cart($cart_item_data, $product_id) {
    if (isset($_POST['kg_or_sac'])) {
        $cart_item_data['kg_or_sac'] = sanitize_text_field($_POST['kg_or_sac']);
        $cart_item_data['unique_key'] = md5(microtime().rand()); // Previne combinațiile duplicate în coș
    }
    return $cart_item_data;
}

// Modificăm prețul în coș în funcție de selecție
add_action('woocommerce_before_calculate_totals', 'update_cart_total_based_on_selection');
function update_cart_total_based_on_selection($cart) {
    if (is_admin() && !defined('DOING_AJAX')) return;

    foreach ($cart->get_cart() as $cart_item_key => $cart_item) {
        $product_id = $cart_item['product_id'];
        $selection = isset($cart_item['kg_or_sac']) ? $cart_item['kg_or_sac'] : '';

        if ($selection === 'kg') {
            $price_per_kg = get_post_meta($product_id, '_price_per_kg', true);
            if (!empty($price_per_kg)) {
                $cart_item['data']->set_price($price_per_kg);
            }
        } elseif ($selection === 'sac') {
            $price_per_sac = get_post_meta($product_id, '_price_per_sac', true);
            if (!empty($price_per_sac)) {
                $cart_item['data']->set_price($price_per_sac);
            }
        }
    }
}

// Afișăm selecția utilizatorului în coș și la finalizare comandă
add_filter('woocommerce_get_item_data', 'display_selection_in_cart_and_checkout', 10, 2);
function display_selection_in_cart_and_checkout($item_data, $cart_item) {
    if (isset($cart_item['kg_or_sac'])) {
        $item_data[] = [
            'name' => __('Cantitate', 'woocommerce'),
            'value' => $cart_item['kg_or_sac'] === 'kg' ? '1kg' : 'Sac (50kg)'
        ];
    }
    return $item_data;
}

// CSS pentru aliniere și stilizare
add_action('wp_head', 'add_custom_styles_for_radio_buttons');
function add_custom_styles_for_radio_buttons() {
    echo '<style>
        .kg-and-sac-options {
            margin-bottom: 15px;
            font-family: Arial, sans-serif;
        }
        .quantity-label {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 8px;
            display: block;
        }
        .radio-buttons-container {
            display: flex;
            gap: 15px;
            align-items: center;
        }
        .radio-buttons-container input[type="radio"] {
            display: none;
        }
        .radio-label {
            display: inline-block;
            padding: 5px 10px;
            font-size: 13px;
            border: 1px solid #ccc;
            border-radius: 4px;
            cursor: pointer;
            background-color: #f9f9f9;
            color: #333;
            transition: background-color 0.3s, color 0.3s;
        }
        .radio-label:hover {
            background-color: #e8e8e8;
        }
        .radio-buttons-container input[type="radio"]:checked + .radio-label {
            background-color:#a1ed64;
            color: white;
            border-color: #005f8d;
        }
    </style>';
}

Explicații

  1. Adăugarea câmpurilor personalizate: Codul adaugă două câmpuri în backend-ul produsului pentru preț pe kilogram și preț pe sac. Valorile sunt salvate ca meta date.
  2. Afișarea prețului pe kg: Adaugă textul „/ kg” lângă preț.
  3. Opțiuni pentru selecție: Pe pagina de produs, clientul poate selecta între 1kg și sac (50kg).
  4. Actualizarea prețului în coș: Prețul este ajustat în funcție de selecția utilizatorului.
  5. Afișarea selecției în coș: Informația despre selecție este afișată în coș și pe pagina de finalizare comandă.

Rezultat

Backend

Câmpuri pentru preț pe kilogram și sac:

 

Pagina de produs

Opțiuni pentru selecția cantității:

Concluzie

Acest tutorial este ideal pentru optimizarea experienței utilizatorului și gestionarea produselor vândute în cantități fixe. Copiază codul și implementează-l pe site-ul tău WooCommerce pentru a beneficia de această funcționalitate!

× YouTube Logo

🔔 Abonează-te la canalul nostru!

Primește cele mai noi tutoriale WordPress direct pe YouTube!

×