Dacă utilizezi WooCommerce și ai o metodă de livrare de tip „Ridicare personală din magazin”, poți îmbunătăți experiența utilizatorilor adăugând un link către locația exactă pe hartă. Următorul cod PHP și JavaScript afișează acest link lângă textul metodei de livrare. Înainte de a implementa codul, trebuie să configurezi metoda de livrare „Ridicare personală” în WooCommerce.

Pasul 1: Configurează metoda de livrare „Ridicare personală”

1. Accesează WooCommerce:

Navighează la WooCommerce > Setări > Livrare.

1. Adaugă o zonă de livrare:

Dacă nu ai deja o zonă de livrare configurată, apasă pe Adaugă zonă de livrare.

Completează numele zonei (de exemplu, „Local”) și selectează regiunea aferentă (de exemplu, județul sau orașul).

1. Adaugă metoda de livrare „Ridicare personală”:

După ce creezi zona de livrare, apasă pe Adaugă metodă de livrare.

Selectează Ridicare personală și salvează.

1. Personalizează metoda de livrare:

În zona de livrare, apasă pe Editare lângă metoda „Ridicare personală”.

Poți redenumi metoda sau adăuga o taxă, dacă este cazul.

Pasul 2: Codul pentru adăugarea unui link către hartă

Adaugă următorul cod în fișierul functions.php al temei tale active sau într-un snippet folosind pluginul Code Snippets:

add_action( 'woocommerce_review_order_before_shipping', 'afiseaza_link_harta_dupa_text' );
add_action( 'woocommerce_cart_totals_before_shipping', 'afiseaza_link_harta_dupa_text' );

function afiseaza_link_harta_dupa_text() {
    // Link-ul către harta
    $link_harta = 'https://maps.app.goo.gl/aHTcQFvZvix3JoFV6';

    // Afișează adresa de ridicare ca un link către hartă în paranteze după textul "Ridicare personală din magazin"
    echo '<script>
            jQuery(document).ready(function($) {
                var linkHarta = "' . $link_harta . '";
                var linkHartaStilizat = "<a href=\'" + linkHarta + "\' target=\'_blank\'>Vezi Hartă</a>";
                var adresaStilizata = "<span style=\'font-size: smaller; color: red;\'> (" + linkHartaStilizat + ")</span>";
                $("label[for=\'shipping_method_0_local_pickup\']").after(adresaStilizata);
            });
          </script>';
}

Explicația codului

1. Hook-uri WooCommerce:

woocommerce_review_order_before_shipping: Inserează link-ul în secțiunea de revizuire a comenzii (pagina de checkout).

woocommerce_cart_totals_before_shipping: Inserează link-ul în secțiunea de coș, înainte de metodele de livrare.

1. Link către hartă:

Poți schimba link-ul hărții din linia:

$link_harta = 'https://maps.app.goo.gl/aHTcQFvZvix3JoFV6';

Înlocuiește-l cu link-ul locației tale exacte de pe Google Maps.

1. Selectorul metodei de livrare:

Selectorul label[for='shipping_method_0_local_pickup'] trebuie să corespundă exact metodei de livrare configurate. În acest exemplu, selectorul este pentru „Ridicare personală” (local pickup). Dacă folosești altă metodă, trebuie să inspectezi elementul HTML pentru a găsi ID-ul corect.

Cum implementezi codul

1. Accesează tema ta:

Folosește un editor de fișiere (FTP/SFTP sau editorul din WordPress).

Navighează la wp-content/themes/[tema-ta]/functions.php.

1. Adaugă codul:

Lipește codul de mai sus la finalul fișierului functions.php și salvează.

1. Testează funcționalitatea:

Accesează pagina de coș și pagina de checkout.

Verifică dacă link-ul „Vezi Hartă” este afișat lângă textul „Ridicare personală din magazin.”

Personalizări suplimentare

1. Schimbarea stilului link-ului:

Poți ajusta culorile, dimensiunea fontului sau alte proprietăți direct în codul JavaScript:

<span style='font-size: smaller; color: blue;'>

1. Text personalizat:

Dacă dorești un alt text în loc de „Vezi Hartă,” schimbă această parte a codului:

var linkHartaStilizat = "<a href=\'" + linkHarta + "\' target=\'_blank\'>Text Personalizat</a>";

1. Compatibilitate cu alte metode de livrare:

Dacă ai mai multe metode de livrare, identifică selectorul HTML unic pentru fiecare și ajustează codul JavaScript.

Concluzie

Cu acest cod simplu, îmbunătățești experiența utilizatorilor oferindu-le un link către locația exactă a magazinului pentru opțiunea „Ridicare personală.” Este o soluție rapidă și eficientă care adaugă transparență și ușurință în navigare pentru clienți.