Cum se adaugă imaginea produsului Pagina de plată WooCommerce

Dacă sunteți familiarizat cu WooCommerce, atunci știți că este o opțiune excelentă pentru a începe un magazin online. Funcția coș de cumpărături iese în evidență în comparație cu alte platforme de magazine online. Cu toate acestea, îi lipsesc unele funcționalități destul de de bază care ies din cutie în aproape orice alt software de comerț electronic, de exemplu o imagine a produsului pe pagina de finalizare a achiziției.

Dacă vizualizați pagina de finalizare a comenzii, veți vedea că tabelul de examinare a comenzii arată titlul produsului, inventarul și prețul, dar nu afișează imaginea pentru fiecare produs. Dacă sunteți proprietarul unui magazin WooCommerce, trebuie să știți că pagina de plată implicită nu este atât de optimizată.

Optimizați experiența clientului WooCommerce Checkout

Prin urmare, acest lucru implică faptul că pagina de finalizare a plății WooCommerce are nevoie de multă personalizare pentru a o face mai prietenoasă cu conversiile și pentru a vă crește conversiile.

Dacă vă personalizați experiența de utilizare a clienților dvs. la finalizarea comenzii WooCommerce, vă recomandăm să consultați și acest articol despre cum să creați redirecționarea WooCommerce după finalizare și, eventual, să utilizați acest plugin - pluginul WooCommerce redirecționare după finalizarea plății pentru a îmbunătăți experiența de plată a clientului.

Pagina de plată WooCommerce implicită

Acesta este aspectul implicit al paginii Checkout:

Aici intru eu; Vă voi oferi o soluție expertă, care vă va ajuta să creșteți conversia paginii de checkout.

Acest scurt tutorial vă va arăta cum să adăugați imaginea produsului pe pagina de finalizare a comenzii fără a înlocui șabloanele . Unele soluții vă ajută să suprascrieți șablonul, dar acest lucru poate crea conflicte cu o temă. Se poate face cu ușurință folosind un filtru.

Pași pentru a adăuga imagini de produs pe pagina de finalizare a achiziției din magazinul dvs. WooCommerce.

Iată pașii pe care trebuie să-i urmezi:

1. Conectați-vă la site-ul dvs. WordPress și accesați tabloul de bord ca utilizator administrator.
2. Din meniul Tablou de bord, faceți clic pe Meniu Aspect > Meniu Editor de teme . Când pagina Editor de teme este deschisă, căutați fișierul cu funcțiile temei unde vom adăuga funcția care va afișa imaginea produsului la pagina de finalizare a achiziției.
3. Adăugați următorul cod în fișierul php :

 /**
 * @snippet WooCommerce Afișează imaginea produsului @ Pagina de plată
*/

add_filter( 'woocommerce_cart_item_name', 'ts_product_image_on_checkout', 10, 3 );

funcția ts_product_image_on_checkout( $nume, $cart_item, $cart_item_key ) {  

    /* Reveniți dacă nu pagina de plată */
    dacă ( ! is_checkout() ) {
        returnează $nume;
    }

    /* Obține obiectul produsului */
    $_product = apply_filters( 'woocommerce_cart_item_product', $cart_item['date'], $cart_item, $cart_item_key );

    /* Obține miniatura produsului */
    $miniatură = $_produs->get_image();

    /* Adăugați un wrapper la imagine și adăugați niște css */
    $image = '<div class="ts-product-image" style="width: 52px; height: 45px; display: inline-block; padding-right: 7px; vertical-align: middle;">'
                . $miniatură .
            '</div>';

    /* Adăugați imaginea înaintea numelui și returnați-o */
    returnează $imagine . $nume;

}

4. Pentru a vedea rezultatul acestui cod, trebuie să reîmprospătați pagina de plată și ar trebui să vedeți acest lucru:

Acum ar trebui să puteți vedea toate imaginile produselor așa cum se arată mai sus.

În plus, puteți opta pentru adăugarea imaginilor pe pagina de comandă-plată după ce utilizatorii au plasat comanda. Aceasta este valoarea implicită a paginii de plată a comenzii :

Acest lucru se poate face pentru a optimiza pagina și utilizatorii pot vedea o imagine a ceea ce au achiziționat, pe lângă scurta descriere. Este foarte simplu să faci asta și pur și simplu trebuie să urmezi acești pași.

Pași pentru a adăuga imagini de produs pe pagina de plată a comenzii a magazinului dvs. WooCommerce.

1. Conectați-vă la site-ul dvs. WordPress și accesați tabloul de bord ca utilizator administrator.
2. Din meniul Tablou de bord, faceți clic pe Meniu Aspect > Meniu Editor de teme . Când pagina Editor de teme este deschisă, căutați fișierul cu funcțiile temei unde vom adăuga funcția care va afișa imaginea produsului la pagina de plată a comenzii.
3. Adăugați următorul cod în fișierul php :

 /**
* @snippet WooCommerce Afișează imaginea produsului @ Pagina Comandă-Plătește
*/

add_filter( 'woocommerce_order_item_name', 'ts_product_image_on_order_pay', 10, 3 );

funcția ts_product_image_on_order_pay( $nume, $articol, $extra ) {

/* Reveniți dacă nu pagina de plată */

dacă ( ! is_checkout() ) {

returnează $nume;

}

$product_id = $articol->get_product_id();

/* Obține obiectul produsului */

$_product = wc_get_product( $product_id );

/* Obține miniatura produsului */

$miniatură = $_produs->get_image();

/* Adăugați un wrapper la imagine și adăugați niște css */

$image = '<div class="ts-product-image" style="width: 52px; height: 45px; display: inline-block; padding-right: 7px; vertical-align: middle;">'

. $miniatură .

'</div>';

/* Adăugați imaginea înaintea numelui și returnați-o */

returnează $imagine . $nume;

}

4. Pentru a vedea rezultatul acestui cod, trebuie să reîmprospătați pagina Order Pay și ar trebui să vedeți acest lucru:

Concluzie

În această postare, am evidențiat două zone în care puteți adăuga imaginea produsului, care este pagina Comandă Plată și pagina Checkout. Nu recomand suprascrierea temei, deoarece aceasta poate crea conflicte cu o temă. Este recomandabil să utilizați un filtru pentru a face acest lucru, așa cum se arată în pașii simpli de mai sus.

Articole similare

1. Cele mai bune 23 de plugin-uri WooCommerce pentru personalizarea paginii de plată
2. Cum să setați produsele recomandate în WooCommerce
3. Cum să adăugați pictograme de plată personalizate WooCommerce Pagina de plată
4. Cum să afișați produsele WooCommerce după categorie
5. Cum să schimbi pictograma PayPal pe pagina de plată WooCommerce
6. Cum să eliminați a fost adăugat în coșul dvs. Mesaj WooCommerce
7. Redirecționare WooCommerce după finalizare: Cum să redirecționați automat către o pagină personalizată după finalizare
8. Cum să eliminați Sortarea implicită a produselor WooCommerce
9. Cum să redimensionați imaginile produselor WooCommerce
10. Cum să adăugați numere GTIN pe produse în WooCommerce
11. Cum să ascundeți toate produsele din pagina de magazin în WooCommerce
12. Cum să sortați categoriile WooCommerce pentru o experiență mai bună a utilizatorului
13. Cum să vinzi produse digitale cu WooCommerce
14. Cum să ascundeți câmpul Cod cupon WooCommerce
15. Cum să ascundeți pictograma PayPal pe pagina de plată WooCommerce
16. Cum să eliminați detaliile de facturare din WooCommerce Checkout
17. Cum să omiteți coșul de cumpărături și să redirecționați către pagina de plată WooCommerce
18. Cum să schimbați textul butonului de finalizare a comenzii în WooCommerce [Plasați comandă]
19. Cum să verificați dacă pluginul este activ în WordPress [ 3 MODI ]
20. Cum să adăugați pictograma Eliminare pe pagina de finalizare a plății WooCommerce