2 trucuri pentru magazine realizate cu Wordpress/ Woocommerce ⋆ CREARE SITE WEB Wordpress

În acest tutorial o să-ți arăt câteva trucuri utile pentru magazine online realizate cu WordPress și WooCommerce. Dacă vrei să personalizezi experiența de cumpărare pentru clienții tăi și să adaugi funcționalități smart în pagina de checkout, rămâi cu mine până la final – urmează un exemplu practic care îți va fi super util!

1: Adaugă un câmp nou în formularul de checkout – un dropdown cu sectoarele din București.

Vom adăuga un câmp personalizat în pagina de checkout, care apare doar atunci când clientul selectează București ca oraș de livrare. Acest câmp permite alegerea sectorului – Sector 1, Sector 2, și așa mai departe – și ne ajută să colectăm informații suplimentare despre adresă, direct în comandă.

– Salvează alegerea clientului în metadatele comenzii.
– Include sectorul selectat în adresa de facturare afișată în admin și emailuri

Este o soluție simplă, dar extrem de practică pentru livrări mai eficiente și organizare mai bună!”

Pentru a face ca acest lucru sa se intample, copiaza codul de mai jos in fisierul function.php al temei tele:

add_filter('woocommerce_checkout_fields', 'kombat_add_sector_dropdown');

function kombat_add_sector_dropdown($fields) {
$fields['billing']['sector_bucuresti'] = array(
'type' => 'select',
'label' => 'Sector (doar pentru București)',
'required' => false,
'class' => array('form-row-wide'),
'priority' => 80,
'options' => array(
'' => 'Selectați sectorul',
'Sector 1' => 'Sector 1',
'Sector 2' => 'Sector 2',
'Sector 3' => 'Sector 3',
'Sector 4' => 'Sector 4',
'Sector 5' => 'Sector 5',
'Sector 6' => 'Sector 6',
),
);
return $fields;
}

add_action('woocommerce_checkout_update_order_meta', 'kombat_save_sector_dropdown');

function kombat_save_sector_dropdown($order_id) {
if (!empty($_POST['sector_bucuresti'])) {
update_post_meta($order_id, 'sector_bucuresti', sanitize_text_field($_POST['sector_bucuresti']));
}
}

add_filter('woocommerce_order_formatted_billing_address', 'kombat_add_sector_to_billing_address', 10, 2);

function kombat_add_sector_to_billing_address($address, $order) {
$sector = get_post_meta($order->get_id(), 'sector_bucuresti', true);
if ($sector) {
$address['sector_bucuresti'] = 'Sector: ' . $sector;
}
return $address;
}

add_action('woocommerce_admin_order_data_after_billing_address', 'kombat_display_sector_in_admin');

function kombat_display_sector_in_admin($order){
$sector = get_post_meta($order->get_id(), 'sector_bucuresti', true);
if ($sector) {
echo '<p><strong>Sector București:</strong> ' . esc_html($sector) . '</p>';
}
}

Si acest codu JS in pagina sau daca tema va permite sa adaugati cod JS suplimentar:

jQuery(function($){
function toggleSectorField() {
var county = $('#billing_state').val();
if (county) {
county = county.toLowerCase();
}

if (county === 'bucurești' || county === 'bucuresti' || county === 'ro-b' || county === 'b') {
$('#sector_bucuresti_field').show();
} else {
$('#sector_bucuresti_field').hide();
$('#sector_bucuresti_field select').val('');
}
}

$(document).on('change', '#billing_state', toggleSectorField);
toggleSectorField();
});

Care va fi rezultatul final:

Câmpul „Sector” apare doar când județul este „București”
Este un dropdown cu cele 6 sectoare
Se salvează în comandă
Apare în emailul de confirmare, în adresa de livrare
Poate fi afișat și în admin

2: Valideaza formatul romanesc al numarului de telefon cand se completeaza campul cu numarul de telefon

Acest mic truc va ajuta pentru cazurile in care un client completeaza numarul de telefon si il greseste. In multe cazuri acest lucru poate duce la pierderea clientului, deoarece nu il puteti suna pentru a stabili mai multe detalii.

Pentru a evita acest lucru puteti adauga codul urmator in fisierul function.php al temei

✅ 1. Codul care face câmpul „Număr de telefon” obligatoriu:


add_filter('woocommerce_checkout_fields', 'kombat_make_phone_required');

function kombat_make_phone_required($fields) {
if (isset($fields['billing']['billing_phone'])) {
$fields['billing']['billing_phone']['required'] = true;
}
return $fields;
}

✅ 2. Codul care validează formatul românesc (ex: 07xxxxxxxx):

add_action('woocommerce_checkout_process', 'kombat_validate_phone_format');

function kombat_validate_phone_format() {
$phone = $_POST['billing_phone'];

// Acceptă 07xxxxxxxx, +407xxxxxxxx sau 00407xxxxxxxx
if (!preg_match('/^(07[0-9]{8}|\+407[0-9]{8}|00407[0-9]{8})$/', $phone)) {
wc_add_notice('Vă rugăm să introduceți un număr de telefon valid din România (ex: 07xxxxxxxx, +407xxxxxxxx sau 00407xxxxxxxx)', 'error');
}
}

Ce face acest cod