WooCommerce'ye Beden Widget'i Nasıl Eklenir

WooCommerce, dünyadaki tüm e-ticaret mağazalarının yaklaşık dörtte birini çalıştırıyor; ancak çoğu WooCommerce moda mağazası hâlâ sadece basit bir beden açılır menüsüyle pazarlamaya devam ediyor. Bu boşluk önemli: giyim ve ayakkabı, perakendecilikte en yüksek iade oranlarına sahip kategorilerin başında yer alır ve düz bir açılır menü, alışverişçileri yanlış beden satın almaktan korumak için hiçbir yardım sunmaz. Bu açılır menünün yanına bir beden önerisi widget'i eklemek, küçük bir ön yüz değişikliğiyle iade oranlarında muazzam bir etki yaratır.

WooCommerce'nin esnekliği aynı zamanda onun tuzağıdır. WordPress üzerine kurulu olduğu ve temalar ürün sayfasını görüntüleme şekli açısından çok farklı olduğu için, genel rehberlerdeki "sadece bir script etiketi yapıştır" tavsiyesi sık sık düzeni bozar veya widget'i yanlış sayfa türünde tetikler. Bu yazı gerçek mekanikleri açıklıyor: beden seçicinin DOM'da nerede olduğu, tam bir tema yeniden yazması yapmadan yanına bir widget nasıl bağlanacağı ve canlı trafiğe göndermeden önce entegrasyonun gerçekten çalıştığını nasıl doğrulayacağınız.

WooCommerce Ürün Sayfaları Neden Özel Ele Alınmalı

WooCommerce tüm ürünler için tek bir şablon kullanmaz — bir hiyerarşi kullanır. single-product.php, content-single-product.php'yi çağırır, bu da woocommerce_template_single_add_to_cart'ı çağırır ve varyasyon formu (beden ve renk seçeneklerinin olduğu yer) eklenti çekirdeğinde class-wc-product-variable.php tarafından görüntülenir. Bu, "sayfa yüklenir" ile "beden seçici DOM'da mevcuttur" arasında dört katman anlamına gelir.

Bu önemlidir çünkü sayfa yüklendiğinde .variations_form'a bağlanmaya çalışan bir widget betiği, WooCommerce varyasyon açılır menülerini görüntülemeyi bitirmeden önce sık sık çalışır — özellikle ürün bloklarını tembel yükleyen veya AJAX tabanlı varyasyon değişimi kullanan temalarda (ürün başına 20'den fazla varyasyonu olan mağazalarda yaygın). Betiğiniz çok erken tetiklenirse, aradığı bağlantı noktası öğesi henüz orada olmaz ve widget sessizce bağlanmayı başaramaz. Bu sırayı anlamak, temiz bir kurulum ile üç hafta sonra "widget bazen neden görünmüyor" diye soran bir destek talebi arasındaki farkı oluşturur.

Widget'i Beden Seçicinin Yanına Yerleştirmek

Varsayılan bir WooCommerce temasında (Storefront veya bir Storefront alt teması), beden niteliği açılır menüsü <table class="variations"> içinde, her nitelik bir <tr> olarak görüntülenir. Amacınız, widget tetikleyicisini beden niteliğini içeren satırdan hemen sonra eklemektir — alışverişçilerin "Sepete Ekle"ye tıklamadan önce fark etme ihtimalinin çok daha az olduğu ürün özetinin en üstüne veya en altına değil.

Pratik yaklaşım:

1. Bağlantı noktasını bulun. Canlı sayfayı incelemek ve WooCommerce'in beden açılır menüsüne atadığı tam seçiciyi tanımlamak için tarayıcı geliştirici araçlarını kullanın — genellikle nitelik slug'unuza bağlı olarak select#pa_size veya benzeri.
2. Doğru olaya bağlanın, sadece sayfa yüklemesine değil. WooCommerce, varyasyon formu tam olarak başlatıldıktan sonra bir woocommerce_variations_form jQuery olayı tetikler; bazı temalar seçimde found_variation da tetikler. Widget'inizin bağlama mantığını DOMContentLoaded yerine bu olaylardan birine bağlayın.
3. insertAfter veya bir functions.php kancası ile ekleyin. Kod tabanlı bir kurulum için, woocommerce_before_add_to_cart_button veya beden <tr> satırından hemen sonra yerleştirilen özel bir kanca, temadan bağımsız kararlı bir bağlantı noktası sağlar.
4. Seçicinin yanında görsel olarak duracak şekilde şekillendirin, sayfanın başka bir yerinde yüzmeyin — "Bedenimi bul" düğmesi veya satır içi beden istemi, yalnızca fiziksel olarak beden kararının yanında olduğunda o kararın bir parçası olarak okunur.

Widget'in Doğru Tetiklendiğini Doğrulamak

Betiği kurmak kolay kısımdır; kataloğunuz genelinde doğru davrandığını doğrulamak, çoğu entegrasyonun sessizce başarısız olduğu yerdir. Kurulumu tamamlı saymadan önce yapılması gereken birkaç denetim:

• Basit bir ürün ve değişkenli bir ürün üzerinde ayrı ayrı test edin. Basit ürünler (beden varyasyonu olmayan) hiç beden widget'i göstermemelidir; değişkenli ürünler ise sayfa her yüklendiğinde güvenilir şekilde göstermelidir.
• AJAX ile yüklenen varyasyon değişimini test edin. Birçok temada, rengi değiştirmek kısmi bir sayfa güncellemesini yeniden tetikler. Widget'in bu gerçekleştiğinde kendini kopyalamadığını veya kaybolmadığını doğrulayın.
• Mobil görüntü alanı işlemesini kontrol edin. WooCommerce temaları genellikle 768px altında varyasyon tablosunu farklı bir düzene daraltır — widget bağlantı noktasının bu kesme noktasında hâlâ doğru çözüldüğünü doğrulayın.
• Tarayıcı konsolunu açın ve hiçbir JS hatası atılmadığını doğrulayın hiçbir varyasyonu yapılandırılmamış bir ürün sayfasında widget betiği yüklendiğinde (basit ve değişkenli ürünleri tek bir katalogda karıştıran mağazalar için yaygın bir uç durum).
• "Sepete Ekle" düğmesinin widget'in z-index'i veya olay dinleyicileri tarafından engellenmediğini doğrulayın — bir beden widget'i asla gerçek satın alma işlemine müdahale etmemelidir.

Widget betiğini eklemek için Google Tag Manager veya benzer bir katman kullanıyorsanız, betiğin sepet, ödeme veya beden seçicisinin olmadığı blog sayfalarında bağlanmaya çalışmaması için product yazı türü sayfalarına kapsamlı bir konteyner düzeyinde tetikleyici ekleyin.

YourSizer Nerede Devreye Giriyor

YourSizer, tema yeniden yazması gerektirmeden WooCommerce beden seçicinizin hemen yanına kompakt bir "Bedenimi bul" tetikleyicisi yerleştiren bir betik gömme olarak kurulur. Widget, WooCommerce'in kendisinin kullandığı varyasyon formu olaylarını dinler, böylece alışverişçiler oturum sırasında rengi değiştirdiklerinde veya varyasyonu değiştirdiklerinde senkronize kalır; bir kez bağlanıp eski hale gelmez.

Basit bir Storefront tabanlı tema çalıştıran mağazalar için çoğu satıcı bir saatten kısa sürede canlıya alır; daha ağır şekilde özelleştirilmiş temalar bağlantı noktası seçicisinde kısa bir ayarlama gerektirebilir, entegrasyon rehberimiz bunu adım adım açıklıyor. Sonuç, alışverişçinin zaten kullandığı açılır menünün yanında satır içi gösterilen bir beden önerisidir — verdikleri kararla bağlantısı kesik ayrı bir açılır pencere değil.

Sıkça Sorulan Sorular

Beden widget'i eklemek WooCommerce ürün sayfamı yavaşlatır mı?

İyi kurulmuş bir widget eşzamansız olarak yüklenir ve temel sayfa içeriği görüntülendikten sonra bağlanır, bu nedenle ilk sayfa yüklemesini veya Core Web Vitals puanlarınızı anlamlı şekilde etkilememelidir. Dikkat edilmesi gereken büyük risk, herhangi bir şey görüntülemeden önce yavaş bir üçüncü taraf API'sinde bekleyen bir widget'tir — betiğinizin yükleme stratejisini (async veya defer) kontrol edin ve widget'in başlatılırken boş bir alan yerine hafif bir yer tutucu durumuna sahip olduğunu doğrulayın.

Bir beden widget'i, onlarca beden ve renk kombinasyonuna sahip WooCommerce değişkenli ürünleriyle çalışır mı?

Evet, widget sayfa yüklendiğinde DOM'u bir kez okumak yerine WooCommerce'nin varyasyon olaylarına bağlanıyorsa. Büyük varyasyon sayısına sahip mağazalar, seçenekleri tam sayfa yenilemesi olmadan değiştirmek için genellikle AJAX'a güvenir, bu nedenle widget'in yalnızca sayfa ilk yüklendiğinde değil, alışverişçi bir varyasyonu her değiştirdiğinde bağlantı noktasını yeniden kontrol etmesi ve önerisini yeniden görüntülemesi gerekir.

WooCommerce'ye beden widget'i eklemek için geliştiriciyle mi ihtiyacım var, yoksa eklenti ile mi yapabilirim?

Birçok mağaza, özel geliştirme yapmadan bir eklenti tarzı gömme veya temanın üst bilgi/alt bilgi ayarları aracılığıyla eklenen bir kod parçacığını kullanarak beden widget'i kurar ve yapılandırır. Özel veya ağır şekilde değiştirilmiş temalar, her tema varsayılan WooCommerce işaretlemesi yapısını izlemediği için, beden açılır menüsü için doğru bağlantı noktası seçicisini tanımlamada geliştirici yardımına ihtiyaç duyma ihtimali daha yüksektir.

Sonuç

Bir beden widget'i, WooCommerce'te yalnızca doğru ürün türü için doğru anda doğru yerde görünüyorsa kendini kanıtlar — bu da entegrasyonu kopyala-yapıştır betik sürükleme işlemi değil, mühendislik görevi olarak ele almak anlamına gelir. Yerleşimi ve olay kancalarını bir kez doğru yapın, basit, değişkenli ve mobil görünümler genelinde doğrulayın; widget, yarı çalışıp unutulan bir özellik yerine beden kararının sessiz, kalıcı bir parçası haline gelir. İlgili uygulama notları için, Shopify'ın eşdeğeri için beden önerisi widget'i ekleme rehberine ve genel Shopify entegrasyonu kılavuzuna, ayrıca platformdan bağımsız olarak aynı yerleşim ilkelerini uygulayan moda e-ticaretinde iadeleri azaltma konusuna bakın.