WooCommerce varyasyon görselleri neden değişmiyor?

Her varyasyona bir görsel atadınız. Müşteri Mavi’yi seçiyor, fotoğraf inatla kırmızı kalıyor. Ya da bir kez değişiyor, sonra bir daha değişmiyor. Ya da masaüstünde değişiyor, mobilde değişmiyor.

WooCommerce varyasyon görselleri, bozulana kadar kusursuz çalışan özelliklerden biridir ve sebebi neredeyse hiçbir zaman herkesin ilk denediği şey değildir. Mekanizmanın gerçekte nasıl çalıştığı, onu bozan beş şey ve bu sorunun bir daha karşınıza çıkmaması için görselleri nasıl kurmanız gerektiği aşağıda.

Varyasyon görselleri gerçekte nasıl çalışır#

Varyasyonlu bir üründe birbirinden ayrı üç görsel devrededir ve sorunların çoğunun kökeninde bunların karıştırılması yatar:

• Ürün görseli (öne çıkarılan görsel) — üst ürüne aittir. Henüz hiçbir seçim yapılmadan önce görünen görseldir ve aynı zamanda yedektir.
• Ürün galerisi — üst üründeki ek görseller; ana görselin altında küçük resimler olarak gösterilir.
• Varyasyon görseli — tek bir görsel; tek tek her varyasyonun içinde ayarlanır.

Müşteri eksiksiz bir kombinasyon seçtiğinde WooCommerce, ana görseli JavaScript ile o varyasyonun görseliyle değiştirir. Bunun gerçekleşmesi için iki koşulun sağlanması gerekir: seçim tek bir belirli varyasyona karşılık gelmeli ve o varyasyonun kendine ait bir görseli olmalıdır.

İkisinden biri sağlanmazsa karşınıza üst ürünün öne çıkarılan görseli çıkar. Bu da tam olarak “görsel değişmedi” gibi görünür.

Onu bozan beş şey#

1. Her varyasyonun bir görseli yok#

En yaygın ve en sıkıcı sebep. Kırmızı / Küçük’ün görseli varken Kırmızı / Orta’nın yoksa, Orta seçildiğinde üst ürünün görseline geri dönülür. Müşterinin gözünde bu bozukluktur; WooCommerce açısından ise doğru davranıştır.

Kontrol: her varyasyonu açın ve atanmış bir görsel olup olmadığına bakın. Dokuz varyasyonlu bir üründe bu hızlı iştir. Altmış varyasyonlu bir üründe ise tam olarak kimsenin yapmadığı türden bir denetimdir; sebep listesinin başında olmasının nedeni de budur.

2. Tema galeriyi değiştirmiş#

Görsel değişimi, WooCommerce’in kendi tekil ürün galerisi işaretlemesine ve JavaScript’ine dayanır. Temalar yakınlaştırma, lightbox, kaydırıcı veya dikey küçük resim eklemek için bu şablonu sık sık geçersiz kılar. Bu geçersiz kılmaların bir kısmı varyasyon değişimini yeniden uygulamaz.

Kontrol: geçici olarak Storefront’a ya da varsayılan bir temaya geçip tekrar deneyin. Görseller orada doğru değişiyorsa sorun temanızdadır ve çözüm ürün verinizde değil, tema geliştiricisindedir. Bu tek test, bu tür destek taleplerini başka her yöntemden daha fazla çözüme kavuşturur ve iki dakika sürer.

3. Sayfanın daha üstünde bir JavaScript hatası#

Değişim istemci tarafında gerçekleşir. WooCommerce’in varyasyon işleyicisi çalışmadan önce başka bir betik hata fırlatırsa hiçbir şey olmaz ve görünür bir hata da çıkmaz. Sayfa, seçim alanlarına sessizce yanıt vermeyi bırakır.

Kontrol: ürün sayfasında tarayıcı konsolunu açın ve kırmızıya bakın. Bozuk tek bir kaydırıcı eklentisi, tüm varyasyon formunu kendisiyle birlikte götürür.

4. Önbellek eski bir sayfa sunuyor#

Sayfa önbellekleri, CDN’ler ve JavaScript’i birleştiren veya erteleyen optimizasyon eklentileri; varyasyon verisinin ya da işleyicinin sandığınız gibi olmadığı bir sayfa sürümü sunabilir. Agresif JS ertelemesi özellikle sık rastlanan bir suçludur, çünkü dosyaların yüklenme sırasını değiştirir.

Kontrol: her şeyi temizleyin ve gizli pencerede test edin. Orada çalışıp normal tarayıcınızda çalışmıyorsa, önbelleğe alınmış bir sayfaya bakıyordunuz.

5. Seçim belirsiz#

Müşteri Renk’i seçmiş ama Beden’i seçmemişse WooCommerce hangi varyasyonu kastettiğini henüz bilemez; dolayısıyla bir görsel de seçemez. Fotoğrafı yalnızca tek bir eksenin etkilediği ürünlerde bu bir hata gibi hissettirir, ama müşteri gerçekten seçimini bitirmemiştir.

“Renk başına tek görsel” mantığıyla kurulmuş ürünlerin çoğu zaman bozuk hissettirmesinin sebebi budur: görünüşü hiç etkilemeyenler dahil her açılır liste yanıtlanmadan görsel değişemez.

Nitelik değeri başına tek görsel yaklaşımı#

Son madde çözümü de işaret ediyor. Bu bir ayar değil, bir iş akışı tercihidir.

Her kombinasyonun fotoğrafına nadiren ihtiyaç duyarsınız. Üç renk ve dört bedenden oluşan bir tişört için on iki fotoğraf gerekmez; ürün çekiminde Küçük ile Büyük birebir aynı görünür. İhtiyacınız olan şey, renk başına tek görseldir ve bu görsel o renkteki her bedene uygulanır.

Bu şekilde kurulduğunda her varyasyonun bir görseli olur (yani 1. sebep ortadan kalkar), on iki yerine üç fotoğraf çekersiniz ve galeri tutarlı kalır. Quick Variable Products içinde “her varyasyona kendi görselini ver” seçeneğini işaretler, fotoğrafı hangi eksenin belirleyeceğini seçer ve matrisi kurarken her değere tek bir görsel atarsınız. Sonradan altmış varyasyon formunu tek tek açmanız gerekmez.

Ortaya çıkan sonuç yine sıradan WooCommerce varyasyon görselleridir. Özel hiçbir şey saklanmaz; her varyasyonun standart görsel alanı doldurulmuş olur. Normal yapıyı bekleyen tema ve galerilerle çalışmayı sürdürmesinin sebebi tam olarak budur.

Peki varyasyon başına birden fazla görsel?#

WooCommerce çekirdeği varyasyon başına tek görseli destekler. Galeri değil, tek görsel.

Varyasyon başına bir galeriye ihtiyacınız varsa, yani mavi ceketin üç açısına ve kırmızının üç açısına, bu iş bir ek görsel eklentisinin işidir. Yanlış yapılandırdığınız bir şey değil, çekirdekteki gerçek bir eksiktir. Ayarı aramakla bir akşamınızı harcamadan önce bilmekte fayda var.

Bozulmayan bir kurulum#

1. Üst ürüne mutlaka öne çıkarılan bir görsel atayın. Seçim yapılmadan önceki durumun yedeği odur; öne çıkarılan görseli olmayan bir ürün, varyasyonlar ne yaparsa yapsın kategori listelerinde, arama sonuçlarında ve sosyal paylaşımlarda bozuk görünür.
2. Fotoğrafı hangi eksenin belirleyeceğine karar verin. Genellikle renk, bazen malzeme. Asla beden değil.
3. Her varyasyona bir görsel verin. Bir renk içindeki bedenlerde aynı fotoğrafın tekrarlanması tembellik değil, doğru olandır.
4. Boyutları ve kırpmayı tutarlı tutun. Farklı en boy oranlarındaki görseller, değişim sırasında sayfanın zıplamasına yol açar; her şey çalışıyor olsa bile bu bir aksaklık gibi algılanır.
5. Tek bir ürünü varsayılan bir temada test edin — aynı yöntemle yüz tane daha kurmadan önce.

Sırasıyla teşhis#

Sorun çıktığında tahmin yürütmek yerine şu sırayı izleyin:

1. Seçtiğiniz varyasyonun kendine ait bir görseli var mı? → Yoksa cevabınız budur.
2. Varsayılan bir temada çalışıyor mu? → Çalışıyorsa sorun temadadır.
3. Tarayıcı konsolunda hata var mı? → Varsa sorun başka bir eklentidedir.
4. Önbelleği temizledikten sonra gizli pencerede çalışıyor mu? → Çalışıyorsa sorun önbellekti.
5. Bütün açılır listeleri seçtiniz mi? → Seçmediyseniz WooCommerce hangi varyasyonu kastettiğinizi bilemez.

Tam da bu sırayla, çünkü her adım kendinden sonrakinden daha ucuzdur. Bildirimlerin çoğu birinci ya da ikinci adımda çözülür ve ikisi de bedavadır.