În mod implicit, WooCommerce nu afișează imaginile produselor în pagina de checkout. Totuși, pentru a oferi o experiență mai plăcută și mai informativă clienților, poți adăuga imagini ale produselor în această pagină folosind un cod personalizat. În acest articol, îți arătăm cum să implementezi această funcționalitate simplă și utilă.

Codul complet:

// Afișarea imaginilor produselor în pagina de checkout WooCommerce
add_filter( 'woocommerce_cart_item_name', 'display_product_image_checkout', 10, 2 );
function display_product_image_checkout( $name, $cart_item ) {
    // Verificăm dacă este pagina de checkout
    if ( ! is_checkout() ) return $name;

    // Generăm imaginea thumbnail pentru produs
    $thumbnail = '<span class="product-name__thumbnail" style="float: left; padding-right: 15px">' .
                 get_the_post_thumbnail( $cart_item['product_id'], array( 32, 50 ) ) . '</span>';

    // Adăugăm imaginea lângă numele produsului
    return $thumbnail . '<span class="product-name__text">' . $name . '</span>';
}

Ce face acest cod?

1. Adaugă un filtru pe numele produselor din coșul afișat în pagina de checkout:
   • Folosește funcția add_filter pentru a modifica ieșirea hook-ului woocommerce_cart_item_name.
2. Verifică dacă pagina curentă este pagina de checkout:
   • Condiția if ( ! is_checkout() ) asigură că imaginile sunt afișate doar în pagina de checkout, nu în alte secțiuni (de exemplu, pagina coșului).
3. Generează un thumbnail pentru produsul curent:
   • Folosește funcția get_the_post_thumbnail pentru a prelua imaginea principală a produsului cu dimensiunile specificate (32x50).
4. Afișează imaginea produsului lângă numele acestuia:
   • Imaginea este adăugată printr-un element HTML span care conține clasa product-name__thumbnail și un stil inline pentru margine și poziționare.
   • Numele produsului este afișat lângă imagine într-un alt span cu clasa product-name__text.

Cum să implementezi codul?

1. Accesează zona de administrare WordPress:
   • Mergi la secțiunea „Aspect” > „Editor Temă” sau folosește un plugin precum Code Snippets pentru a adăuga cod personalizat.
2. Adaugă codul în fișierul functions.php al temei active:
   • Navighează la secțiunea temei active și deschide fișierul functions.php.
   • Copiază codul de mai sus și lipește-l la sfârșitul fișierului.
3. Salvează modificările și testează:
   • Accesează pagina de checkout și verifică dacă imaginile produselor sunt afișate corespunzător.

Personalizări suplimentare

• Dimensiuni ale imaginilor:
  • Poți schimba dimensiunile thumbnail-ului modificând array-ul array( 32, 50 ) în funcție de preferințe (de exemplu, array( 64, 64 ) pentru imagini mai mari).
• Stilizare CSS:

Poți adăuga reguli CSS suplimentare pentru a personaliza aspectul imaginilor. Exemplu:

.product-name__thumbnail {
    margin-right: 15px;
    border-radius: 4px;
    overflow: hidden;
}
.product-name__text {
    font-weight: bold;
}

De ce să afișezi imaginile produselor în checkout?

• Claritate pentru clienți: Clienții pot vedea vizual ce produse au în coș, reducând riscul de confuzii sau erori.
• Estetică îmbunătățită: Imaginile fac pagina de checkout mai atractivă și mai profesionistă.
• Experiență de utilizare mai bună: Afișarea imaginilor crește încrederea clienților, ceea ce poate duce la o rată mai mare de conversie.

Concluzie

Prin implementarea acestui cod simplu, îți poți îmbunătăți semnificativ experiența utilizatorilor pe site-ul tău WooCommerce. Nu numai că acest lucru adaugă o notă vizuală profesională, dar îi ajută și pe clienți să verifice rapid produsele comandate. Dacă ai nevoie de asistență suplimentară sau dorești să personalizezi această funcționalitate, nu ezita să ne contactezi!