Cum să remediați problemele legate de dimensiunea imaginii WooCommerce

Aveți probleme cu dimensiunile imaginilor din magazinul dvs. online? Ai venit la locul potrivit. În acest ghid, vă vom arăta diferite modalități de a remedia cele mai frecvente probleme legate de dimensiunea imaginii WooCommerce .

WooCommerce este una dintre cele mai bune platforme de comerț electronic, dar din când în când, s-ar putea să întâmpinați unele probleme. Am văzut deja cum să remediam cele mai frecvente probleme la finalizarea comenzii și ce să facem atunci când butonul Adaugă în coș nu funcționează. În acest tutorial, vă vom arăta diferite soluții pentru a remedia problemele legate de dimensiunea imaginii.

Aceste probleme pot apărea din diverse motive, cum ar fi incompatibilitatea temei sau a pluginului, dimensiunile greșite ale imaginii, lipsa câmpurilor de imagine și așa mai departe. Înainte de a vedea cum să rezolvăm diferitele probleme de dimensiune a imaginii, să aruncăm o privire la diferitele tipuri de imagini din WooCommerce.

Tipuri de imagini în WooCommerce

Există multe tipuri de imagini pe care le puteți adăuga pe site-ul dvs. web, dar cele trei tipuri principale utilizate în WooCommerce sunt imaginile de produs, catalog și miniaturi ale produselor.

• Imagini cu un singur produs : imaginile cu un singur produs sunt imagini de dimensiuni mari utilizate pentru a vizualiza un singur produs. Aceasta este imaginea principală a produsului pe care o afișați clienților atunci când deschid pagina specială a produsului WooCommerce. Puteți adăuga mai mult de o imagine de produs pentru a afișa produsul din diferite unghiuri.
• Imagini de catalog: sunt imagini de dimensiuni medii ale produselor utilizate de obicei pe pagina magazinului WooCommerce. Dacă aveți o pagină separată de categorii în magazinul dvs. online, aceste imagini de catalog pot fi văzute și pe categoriile de produse sau produsele în sine.
• Imagini în miniatură ale produsului: acestea sunt imagini în miniatură cu dimensiuni foarte mici. Acestea sunt afișate pentru a identifica produsele pe diverse pagini WooCommerce, cum ar fi paginile de coș, zonele cu widget-uri sau chiar în paginile de comandă.

Probleme frecvente cu dimensiunile imaginilor WooCommerce

Acum înțelegeți mai bine diferitele tipuri de imagini WooCommerce și diferența dintre dimensiunile acestora. Imaginile sunt extrem de importante pentru a vă ajuta să convertiți vizitatorii în clienți, așa că a avea probleme cu imaginile dvs. poate fi o mare durere de cap.

Pentru a putea remedia problemele legate de dimensiunea imaginii WooCommerce, mai întâi trebuie să vă identificați problema . Partea dificilă este că există mai multe probleme cu care vă puteți confrunta cu dimensiunile imaginilor. Unele dintre cele mai comune sunt:

1. Imagini neclare

Aceasta este una dintre cele mai frecvente probleme. Imaginile pe care le încărcați pentru produsele sau miniaturile dvs. par neclare și s-ar putea să nu fie clar vizibile chiar dacă imaginea originală nu a fost comprimată, a fost clar vizibilă și a avut o calitate excelentă.

Nu numai că imaginile neclare arată rău, dar și dau impresia că site-ul tău nu este profesional.

Imagine originală

Imagine neclară

2. Imagine de calitate scăzută

Similar cu imaginile neclare, unele imagini de pe site-ul dvs. pot fi de o calitate mai scăzută după ce le-ați încărcat. Ele pot părea pixelate sau nu au linii la fel de netede ca cele originale.

Acest lucru se poate întâmpla chiar dacă imaginea încărcată are o calitate excelentă. Vom vedea de ce și cum să o reparăm în secțiunea următoare.

3. Dimensiuni greșite ale imaginii

Uneori, este posibil să observați și că imaginile încărcate au dimensiuni diferite față de cele originale. Aceasta este o problemă foarte frecventă dacă nu vă ajustați setările imaginilor în funcție de cerințele temei .

De exemplu, să presupunem că cerința dvs. de temă pentru imaginile de catalog este de cel puțin 250 x 250 pixeli, dar setările pentru imaginea WooCommerce ale magazinului dvs. sunt setate la 200 x 200 pixeli. Deoarece setările nu sunt configurate în funcție de cerințele temei, imaginea dvs. poate fi reajustată automat cu dimensiunea greșită a imaginii.

4. Probleme legate de zoom, lightbox sau slider

WooCommerce vă oferă opțiuni de zoom, lightbox și slider pentru a previzualiza imaginile. Aceasta a fost o nouă caracteristică care a fost adăugată la WooCommerce odată cu lansarea versiunii 3.0 . Dacă tema dvs. nu a fost actualizată conform specificațiilor sale, este posibil să vă confruntați cu unele probleme.

5. Lățimea imaginii și câmpurile pentru miniaturi Lipsesc

De asemenea, este posibil să observați că câmpurile pentru lățime și miniatură ale imaginilor dvs. WooCommerce lipsesc din Personalizator sub Aspect > Personalizare > WooCommerce > Imagini de produs .

Acesta poate fi cazul dacă tema dvs. are dimensiuni foarte stricte de imagine, așa că nu puteți modifica deloc dimensiunile imaginii temei prin intermediul administratorului. În acest caz, veți avea nevoie de cunoștințe programatice pe care le vom discuta în soluțiile de mai jos.

Acum că înțelegem mai bine tipurile de imagini și cele mai frecvente probleme, să vedem diferite soluții pentru a remedia problemele legate de dimensiunea imaginii în WooCommerce.

Cum să remediați problemele legate de dimensiunea imaginii WooCommerce

Deoarece sunteți familiarizat cu unele dintre cele mai comune probleme legate de dimensiunea imaginii WooCommerce, să le reparăm și pe acestea. Dar, problemele legate de dimensiunea imaginii pe care le întâlniți pot fi cauzate de diverse motive. Deci, s-ar putea să nu existe o soluție specială pentru ei.

Prin urmare, vă recomandăm să utilizați unele dintre soluțiile comune prezentate mai jos cu privire la orice probleme legate de dimensiunea imaginii. Suntem siguri că una dintre soluții va putea rezolva problemele legate de dimensiunea imaginii WooCommerce.

1. Lista de verificare inițială de reținut

Înainte de a trece prin soluțiile specifice pentru a remedia problemele legate de dimensiunea imaginii, există câteva lucruri pe care trebuie să le țineți cont. În primul rând, asigurați-vă că ați configurat corect WooCommerce fără a rata niciun pas. Este posibil să întâmpinați probleme cu site-ul dvs. web dacă nu este instalat corect.

În al doilea rând, dorim să vă reamintim să verificați dacă totul de pe site-ul dvs. web este actualizat . Pot exista probleme în magazinul dvs. dacă nu v-ați actualizat tema sau pluginurile la cea mai recentă versiune.

În mod similar, asigurați-vă că actualizați WooCommerce la cea mai recentă versiune disponibilă. Pentru a ști dacă aveți actualizări în așteptare, accesați Pluginuri > Pluginuri instalate pe tabloul de bord WordPress. Dacă există notificări care vă solicită să actualizați WooCommerce, faceți clic pe Actualizare acum .

Mai mult, dacă ați actualizat WordPress cu editorul Gutenberg, asigurați-vă că și WordPress este actualizat la cea mai recentă versiune . Pe de altă parte, dacă utilizați WordPress cu editorul clasic, cel mai bine este să îl actualizați cu cea mai recentă versiune de WordPress 4.9.

După ce ați făcut toate acestea, dacă mai aveți probleme cu dimensiunile imaginii, continuați cu următoarea soluție.

NOTĂ: Vom folosi tema Divi pentru acest tutorial, astfel încât unele dintre pagini ar putea arăta diferit de site-ul dvs. dacă utilizați o altă temă. Cu toate acestea, ar trebui să puteți urmări fiecare soluție fără probleme. Dacă sunteți în căutarea unei noi teme compatibile cu WooCommerce, aruncați o privire la acest articol.

2. Setați dimensiunile personalizate ale imaginii WooCommerce

Adăugarea de dimensiuni personalizate de imagine este una dintre cele mai comune modalități de a remedia problemele legate de dimensiunea imaginii WooCommerce. Deoarece majoritatea problemelor apar din cauza modificării dimensiunilor implicite ale imaginii , aceasta ar trebui să fie prima ta mișcare.

Configurarea unei dimensiuni personalizate a imaginii este destul de ușoară. Pe tabloul de bord administrativ, accesați Aspect > Personalizare și deschideți fila WooCommerce pentru a accesa Personalizatorul.

Apoi, deschideți opțiunea Imagini de produs . Aici puteți redimensiona pagina de produs și imagini în miniatură ale produselor dvs. Pentru a edita imaginea principală a paginii produsului, adăugați dimensiunea imaginii dorite în secțiunea Lățimea imaginii principale .

De asemenea, puteți edita dimensiunile miniaturilor și decuparea aici. Dacă doriți să ajustați dimensiunea imaginii în miniatură, editați opțiunea Lățime miniatură .

În plus, există trei opțiuni pentru a ajusta decuparea miniaturilor: 1:1, personalizat și nedecupat. Pentru a minimiza problemele de imagine atât pentru funcționalitate, cât și pentru aspect, decuparea 1:1 este cea mai bună opțiune. După ce ați făcut toate modificările necesare, faceți clic pe Publicare .

3. Verificați dimensiunile imaginii produsului ale temei dvs

Dacă întâmpinați în continuare unele probleme chiar și după adăugarea dimensiunilor personalizate ale imaginii, atunci poate că dimensiunea imaginii este incorectă. După cum sa menționat mai devreme în problema cu dimensiunea greșită a imaginii, există cerințe specifice pentru teme pentru dimensiunile imaginii în WooCommerce. Dacă aceste dimensiuni nu îndeplinesc cerințele, este posibil să întâmpinați unele probleme.

Pentru a remedia aceste probleme legate de dimensiunea imaginii WooCommerce, cea mai bună opțiune este să verificați mai întâi dimensiunile imaginii de produs ale temei. Deschideți pagina de produs a oricăruia dintre produsele dvs. și utilizați instrumentul de dezvoltare a elementelor de inspectare din browserul dvs. web pentru a vedea dimensiunea imaginii temei.

De exemplu, dacă utilizați Google Chrome , faceți clic dreapta pe imaginea produsului și apăsați Inspectați . Veți putea vedea dimensiunea imaginii în instrumentul de dezvoltare a elementelor de inspectare, așa cum se arată mai jos.

În acest caz, dimensiunea imaginii produsului este 900×600 . Dacă cerințele de imagine ale temei dvs. sunt diferite, este posibil să aveți probleme.

Puteți ajusta dimensiunea imaginii produsului în mod corespunzător din Personalizator utilizând metoda descrisă la punctul 2. În mod similar, puteți inspecta dimensiunea imaginii în miniatură în același mod și o puteți edita în continuare în Personalizator, dacă este necesar.

4. Modificați dimensiunile implicite ale imaginii

Dacă ați încercat toate soluțiile de mai sus, dar încă vă confruntați cu probleme de imagine, este posibil să fie necesar să ajustați dimensiunile implicite ale imaginii WordPress .

Pentru a face acest lucru, accesați Setări > Media pe tabloul de bord WordPress și veți vedea opțiunile de dimensiune pentru imagini în miniatură, medii și mari .

Setați dimensiunile imaginii în funcție de cerințele temei și salvați modificările .

În plus, puteți elimina unele dintre dimensiunile implicite dacă nu le utilizați. Pentru a afla mai multe despre asta, consultați ghidul nostru pentru a elimina dimensiunile implicite ale imaginilor WordPress.

5. Remediați problemele legate de dimensiunea imaginii WooCommerce cu pluginuri

O altă alternativă este să remediați problemele legate de dimensiunea imaginii WooCommerce este să utilizați un plugin dedicat. Există mai multe instrumente pe care le puteți folosi pentru aceasta. În această secțiune, vă vom arăta câteva, astfel încât să puteți preveni alte probleme legate de dimensiunea imaginii pe site-ul dvs. web.

Să aruncăm o privire la unele dintre cele mai bune instrumente pe care ar trebui să le utilizați.

5.1. Imagini perfecte și suport pentru retina

în termeni simpli, Retina Support este o opțiune de afișare a imaginilor de pe site-ul dvs. cu o rezoluție și o calitate foarte înaltă . Un afișaj pregătit pentru retină asigură că orice imagine văzută pe orice dispozitiv cu orice dimensiune a ecranului este clară și fără linii sau margini pixelate vizibile.

Aceasta este o soluție perfectă dacă imaginile încărcate pe site-ul dvs. sunt neclare sau de calitate scăzută. Dacă doriți să creați manual o imagine pregătită pentru retină, trebuie să dublați dimensiunea și dimensiunile imaginii, să le optimizați și apoi să le reîncărcați. Cu toate acestea, puteți utiliza un plugin, astfel încât imaginile dvs. să fie gata automat pentru retină. Pentru aceasta, Perfect Images este unul dintre cele mai bune pluginuri de acolo.

Perfect Images este un plugin simplu pentru a adăuga imagini cu afișare retină pe site-ul dvs. Detectează automat orice imagini cu probleme cu retina și creează o copie a acestora pregătită pentru retină. În plus, puteți crea imagini individuale pregătite pentru retină sau puteți face acest lucru în bloc pentru a economisi timp.

Acum, să vedem cum să folosim acest plugin.

5.1.1. Instalați și activați pluginul

În primul rând, trebuie să îl instalați și să îl activați. În tabloul de bord WordPress, accesați Plugin-uri > Adăugați nou , căutați pluginul și faceți clic pe Instalați acum .

După finalizarea instalării, activați pluginul. Alternativ, îl puteți instala manual. Dacă nu sunteți sigur cum să faceți asta, aruncați o privire la ghidul nostru pentru a instala manual un plugin WordPress.

5.1.2. Configurați opțiunile de imagine pentru afișajul Retina

După activarea pluginului, trebuie să configurați opțiunile retinei pentru WooCommerce sau imaginile site-ului. Accesați Aplicații Meow > Imagini perfecte și veți vedea toate opțiunile pentru imaginile retinei în fila General . Opțiunile implicite sunt ok pentru majoritatea site-urilor web, deoarece creează imagini retină pentru cele mai comune dimensiuni de imagine.

Cu toate acestea, după ce imaginile sunt convertite în pregătite pentru retină, ar putea fi necesar să fie optimizate. Imaginile pregătite pentru retina tind să fie foarte mari și ar putea încetini site-ul dvs. Acest lucru poate fi o problemă majoră pentru clienții dvs., deoarece majoritatea utilizatorilor folosesc dispozitive mobile pentru cumpărături online.

Pentru a vă asigura că imaginile retinei nu scad viteza site-ului dvs., trebuie să vă asigurați că sunt bine optimizate. Puteți face acest lucru din plugin, accesând fila Optimizare și viteză . Rețineți că pentru asta va trebui să vă abonați la planul lor premium care include Easy IO pentru optimizare și costă 10 USD pe lună.

Alternativ, le puteți optimiza și manual folosind un plugin sau un serviciu de optimizare a imaginii, cum ar fi TinyPNG sau Smush .

5.1.3. Convertiți imagini pentru suport Retina

După ce ați configurat toate opțiunile necesare pentru imaginile retinei, puteți începe să le convertiți. Mai întâi, accesați Media > Imagini perfecte și veți fi redirecționat către fila Probleme cu retina . Aici puteți crea imagini pregătite pentru retină pentru a rezolva problemele legate de dimensiunea imaginii WooCommerce.

De asemenea, puteți genera miniaturi și imagini retină selectând imaginile dorite.

5.2. Regenerați miniatura

Regenerarea miniaturilor este, de asemenea, o modalitate excelentă de a rezolva problemele legate de dimensiunile imaginilor, în special cu imaginile în miniatură .

Aceste probleme apar de obicei atunci când ți-ai schimbat recent tema. Noua temă poate avea cerințe diferite pentru dimensiunile imaginii, așa că trebuie să le reajustați.

Dacă aveți un număr mare de miniaturi pe site-ul dvs., puteți utiliza Perfect Images . Tot ce trebuie să faceți este să configurați opțiunile de dimensiune a imaginii la fel cum am făcut în pașii 5.1.1 și 5.1.2. Apoi, accesați Media > Imagini perfecte , deschideți fila Toate și veți vedea toate imaginile de pe site-ul dvs. Similar cu pasul de susținere a retinei, puteți regenera miniaturile pentru anumite imagini sau în vrac.

Pentru a regenera imaginile în bloc, apăsați pe Acțiuni în bloc și selectați Regenerați toate intrările pentru a regenera miniaturile. Rețineți că acest lucru poate dura câteva minute dacă aveți multe imagini pe site-ul dvs.

6. Soluție programatică

Dacă ați ajuns până aici, ați încercat să remediați problemele legate de dimensiunea imaginii cu opțiunile WooCommerce implicite și chiar cu pluginuri. Dacă nimic nu a funcționat și încă te confrunți cu probleme, mai este un lucru pe care îl poți face. Pentru a utiliza această soluție, vă recomandăm să aveți cunoștințe de bază de programare, deoarece vom folosi un pic de cod.

Există câteva fragmente de cod pe care le puteți folosi pentru a remedia problemele legate de imagini, dar rețineți că fragmentul pe care îl vom folosi va schimba dimensiunile imaginii de pe site-ul dvs. Acest lucru poate fi util atunci când lățimile principale ale imaginii și câmpurile pentru miniaturi lipsesc din Personalizatorul temei și doriți să setați dimensiuni personalizate ale imaginii WooCommerce.

Deoarece vom edita câteva fișiere de bază, înainte de a începe, vă recomandăm să faceți backup site-ului dvs. WordPress. În plus, este o practică bună să creați o temă copil sau să utilizați oricare dintre aceste pluginuri WordPress pentru tema copil.

Schimbați dimensiunea imaginii folosind fragmente de cod

Pentru a modifica dimensiunile imaginii atunci când lățimea imaginii și lățimea miniaturilor lipsesc din Personalizator, puteți utiliza următorul fragment de cod. Accesați Aspect > Editor de teme și deschideți fișierul functions.php .

Apoi, trebuie doar să adăugați următorul fragment de cod în partea de jos a editorului.

 add_theme_support( 'woocommerce', apply_filters( 'divi_woocommerce_args', array(
   'single_image_width' => 600,
   'thumbnail_image_width' => 300,
   'product_grid' => matrice(
   'default_columns' => 3,
   'default_rows' => 4,
   'min_columns' => 1,
   'max_columns' => 6,
   'min_rows' => 1
   )
) ) );

Acest fragment va modifica lățimea imaginii produsului la 600 și lățimea miniaturii la 300, care sunt parametrii prestabiliți. Ajustați aceste valori în funcție de cerințele dvs. și nu uitați să actualizați fișierul.

7. Opțiuni de asistență

Dacă ați încercat fiecare soluție menționată aici, dar nu ați putut găsi soluția la problemele legate de dimensiunea imaginii, fie problema cu care vă confruntați este rară, fie există o problemă cu fișierele de bază ale WooCommerce sau cu tema dvs.

În acest moment, cea mai bună opțiune este să contactați asistența pentru clienți. WooCommerce are opțiuni excelente de asistență, astfel încât să îi puteți contacta în legătură cu problemele legate de dimensiunea imaginii. Ca alternativă, dacă credeți că tema dvs. poate fi problema, puteți contacta furnizorul de teme și îi puteți cere ajutor.

Concluzie

Per total, există diferite tipuri de imagini (produs unic, catalog și miniaturi ale produselor) și câteva probleme comune cu dimensiunile imaginii. Cele mai comune sunt imagini neclare sau de calitate scăzută, dimensiuni greșite ale imaginii, opțiuni de zoom, casetă luminoasă și glisare și câmpuri lipsă pentru lățime și miniaturi.

În acest ghid, am văzut diferite soluții pentru a remedia cele mai comune probleme legate de dimensiunea imaginii WooCommerce .

1. Actualizați-vă tema și pluginurile la cea mai recentă versiune, inclusiv WooCommerce
2. Setați dimensiunile personalizate ale imaginii WooCommerce
3. Verificați dimensiunile produsului imaginii temei dvs
4. Modificați dimensiunile implicite ale imaginii
5. Folosiți pluginuri
6. Soluție programatică cu un pic de cod
7. Contactați WooCommerce sau echipa de asistență a temei dvs

Dacă acest articol ți-a fost de ajutor, distribuie-l pe rețelele sociale și ajută-ți prietenii să scape de aceste probleme. Te-ai confruntat cu aceste probleme înainte? Cum le-ai rezolvat? Anunțați-ne în comentariile de mai jos.

Pentru mai multe ghiduri utile, iată articole care s-ar putea să ți se pară interesante:

• Cum să adăugați o imagine la un produs în WooCommerce
• 3 metode pentru a elimina miniaturile din WordPress
• Cum să adăugați dimensiuni personalizate de imagine în WordPress