1. WooCommerce este o platformă de e-commerce flexibilă și puternică, dar uneori dorim să îmbunătățim experiența utilizatorilor prin personalizări simple, cum ar fi afișarea imaginilor produselor direct pe pagina de checkout. Acest lucru ajută clienții să identifice mai ușor produsele adăugate în coș înainte de a finaliza comanda.În acest articol, îți voi arăta cum să adaugi imagini ale produselor în pagina de checkout a WooCommerce folosind un cod PHP simplu, pe care îl vom adăuga folosind două metode:
   1. Direct în fișierul functions.php.
   2. Folosind pluginul Code Snippets.

   Alege metoda care ți se potrivește cel mai bine!

   ---

   Metoda 1: Adăugarea Codului Direct în fișierul functions.php

   Dacă preferi să adaugi codul direct în fișierul functions.php al temei tale active, urmează acești pași:

   Pașii pentru a adăuga codul:

   1. Accesează fișierul functions.php al temei tale:
      • Mergi la Aparanță > Editor de teme.
      • Alege tema activă și găsește fișierul functions.php.
   2. Adaugă codul la sfârșitul fișierului functions.php:

<?php

// Display Product Images in Woocommerce Checkout Page
add_filter( 'woocommerce_cart_item_name', 'display_product_image_checkout', 10, 2 );
function display_product_image_checkout( $name, $cart_item ) {
    if ( ! is_checkout() ) return $name;
    $thumbnail = '<span class="product-name__thumbnail" style="float: left; padding-right: 15px">' . get_the_post_thumbnail( $cart_item['product_id'], array( 32, 50 ) ) . '</span>';
    return $thumbnail . '<span class="product-name__text">' . $name . '</span>';
}

3. Salvează fișierul: După ce ai adăugat codul, apasă Save pentru a salva modificările.

Explicația codului:

• add_filter( 'woocommerce_cart_item_name', 'display_product_image_checkout', 10, 2 );
  Acest filtru modifică modul în care se afișează numele produselor în coș, adăugând imaginea fiecărui produs în fața numelui acestuia.
• get_the_post_thumbnail
  Această funcție preia imaginea produsului pe baza ID-ului său și o redă într-un format mic (32×50 px).
• Verificarea paginii de checkout
  Condiția if ( ! is_checkout() ) return $name; se asigură că această modificare este aplicată doar pe pagina de checkout.

Metoda 2: Adăugarea Codului folosind Pluginul Code Snippets

Dacă preferi să adaugi acest cod folosind un plugin dedicat care gestionează fragmentele de cod, folosește Code Snippets. Aceasta este o metodă mai sigură, care nu va afecta fișierele temei tale și îți permite să activezi sau să dezactivezi ușor codul.

Pașii pentru a adăuga codul:

1. Instalează și activează pluginul Code Snippets:
   • Mergi la Plugins > Add New în panoul de administrare WordPress.
   • Căută „Code Snippets” și apasă Install Now, apoi Activate.
2. Adaugă un nou snippet:
   • Mergi la Snippets > Add New.
   • Adaugă următorul cod în câmpul de cod:

<?php

// Display Product Images in Woocommerce Checkout Page
add_filter( 'woocommerce_cart_item_name', 'display_product_image_checkout', 10, 2 );
function display_product_image_checkout( $name, $cart_item ) {
    if ( ! is_checkout() ) return $name;
    $thumbnail = '<span class="product-name__thumbnail" style="float: left; padding-right: 15px">' . get_the_post_thumbnail( $cart_item['product_id'], array( 32, 50 ) ) . '</span>';
    return $thumbnail . '<span class="product-name__text">' . $name . '</span>';
}

3. Configurează snippetul:
   • Adaugă un titlu descriptiv, de exemplu: „Afișează imagini pe checkout”.
   • Selectează Run snippet everywhere pentru ca acest cod să ruleze pe întregul site.
4. Activează snippetul: Apasă Save Changes and Activate pentru a salva și activa snippetul.

Explicația codului:

Același cod explicat mai sus este folosit și în această metodă. Codul va fi activat și va modifica afișarea produselor doar pe pagina de checkout.

Personalizarea Stilului Imaginilor

Poți personaliza stilul imaginilor folosind CSS. De exemplu, dacă vrei să modifici marginea imaginii sau să o aliniezi diferit, adaugă următorul cod CSS în fișierul style.css al temei tale sau în secțiunea de Personalizare > CSS suplimentar:

.product-name__thumbnail img {
    border: 1px solid #ddd; /* Adaugă o margine la imagine */
    padding: 5px;           /* Spațiere în jurul imaginii */
}
.product-name__text {
    line-height: 50px;      /* Ajustează înălțimea liniei pentru a alinia textul cu imaginea */
}

Concluzie

Acum ai două metode de a adăuga imagini ale produselor pe pagina de checkout în WooCommerce. Dacă preferi să modifici fișierele temei, poți adăuga codul direct în functions.php, dar dacă vrei o abordare mai sigură și ușor de gestionat, folosește pluginul Code Snippets. Indiferent de metoda aleasă, vei îmbunătăți experiența utilizatorilor prin adăugarea imaginilor produselor în coș, facilitând recunoașterea rapidă a acestora.