WooCommerce'e Sanal Deneme Nasıl Eklenir

WooCommerce WordPress kancalarında çalışır, sabit bir şablonda değil. Bu, "sanal deneme ekle" sorusunun gerçekten hangi kancaya bağlandığı ve bu tetikleyicinin satın alma düğmesine ne kadar yakın olduğu meselesidir. Yerleşimi yanlış alırsanız, özellik kullanılmaz; doğru alırsanız, satın alma kararının bir parçası haline gelir.

WooCommerce, bağımsız moda mağazalarının anlamlı bir bölümüne güç sağlar ve çoğu, stok düzeni yerine özelleştirilmiş woocommerce_single_product_summary kancaları çalıştıran bir alt tema kullanıyor. Sanal deneme entegrasyonlarındaki gerçek zorluk bu değişkenliktir — teknolojinin kendisi değildir. Bu rehber, iki kurulum yolunu, tetikleyicinin satın alma düğmesine göre nereye ait olması gerektiğini, kontrol edilmesi gereken belirli kancaları ve tema dokunuş noktalarını ve entegrasyonun canlıya çıkmadan önce gerçekten çalıştığını nasıl doğrulayacağınızı kapsar.

Eklenti Kurulumu Karşı Gömülü Script: Mağazanıza Hangi Yol Uygun

WooCommerce ürün sayfasına bir deneme düğmesi eklemek için iki gerçekçi yol vardır. Bir paketlenmiş eklenti, WooCommerce'in eylem sistemine otomatik olarak bağlanır — kendisini woocommerce_single_product_summary veya benzer bir kancaya bir öncelik numarası ile kaydeder ve şablon dosyalarına dokunmadan ortaya çıkar. Bu daha hızlı bir rotadır ve değiştirilmemiş veya hafif değiştirilmiş temalar (Storefront, Astra, varsayılan ürün şablonları olan Flatsome) üzerindeki mağazalar için doğru varsayılancadır.

Alternatif, functions.php veya bir snippet eklentisine bırakılan bir manuel gömülü scripttir ve seçtiğiniz belirli bir kanca ve önceliğe bağlıdır. Bu, temansınız ağır şekilde özelleştirilmiş bir content-single-product.php dosyasına sahip olduğunda, bir sayfa oluşturucusu (Elementor, Divi) çalıştırırken WooCommerce'in varsayılan şablon hiyerarşisini geçersiz kılarken veya pazarlama tetikleyiciyi stok ürün şablonunun özeti sütunu yerine özel oluşturulmuş bir ürün galerisinin içine istediğinde daha iyi bir rotadır. WooCommerce satıcılarını destekleyen deneyimimizde, sayfa oluşturucu ürün sayfasına sahip mağazalar, eklentinin varsayılan kancanın hedefi bu şablonlarda işlemeyebileceği için çoğu zaman gömülü script rotasına ihtiyaç duyar.

Temel kural: wp_head incelemesi tarayıcınızın geliştirici araçlarında temanın standart WooCommerce şablon etiketlerini kullandığını gösteriyorsa, eklenti ile başlayın. Ürün sayfasının işaretlemesi özel veya ağır şekilde filtrelenmiş görünüyorsa, doğrudan gömülü script'e gidin ve kancanın hedefini manuel olarak ayarlayın.

Deneme Tetikleyicisi Ürün Sayfasında Nereye Ait

Yerleşim, bir sanal deneme widget'inin tıklanıp tıklanmadığını belirleyen en büyük faktördür. Tetikleyicinin satın alma düğmesinin üstünde veya hemen yanında otururken, alıcının doğal tarama yolunun içinde olması — bir sekmenin içinde gömülü değil, sayfa aşağısında değil ve boyut seçici açılır menüler ile dikkat için rekabet etmeyerek.

WooCommerce'in varsayılan kancanın yığını, ilgili gayrimenkul şuna benzer:

En güçlü pozisyon, özel bir eylem kayıtlı 26 önceliğiyle — satın alma formunun işlendikten hemen sonra (öncelik 30) fakat boyut/miktar alanları görsel önceliği kaybetmeden önce, ya da woocommerce_after_add_to_cart_button kullanarak "Sepete Ekle"nin kendisinin yanında kardeş düğmesi olarak bağlıdır. Tetikleyiciyi alıcı zaten bir varyasyonu seçtikten sonra yerleştirmek, seçilen rengi ve boyutu deneme seansına geçirebildiği anlamına gelir, bu da widget içindeki ikinci seçim adımını ortadan kaldırır.

Tetikleyiciyi yalnızca ürün görüntüsü galerisine koymaktan kaçının — bazı mağazalar bir galeri küçük resmi kaplamasına küçük bir "Denemeyi Dene" simgesi yerleştirerek, bu düzgün görünse de satın alma eyleminin yanında etiketli düğmeden çok daha az tıklanır. Görsel cilalama, burada karar anına yakınlıktan daha az önemlidir.

Tema ve Sayfa Oluşturucu Özellikleri İçine Bağlanma

Her tema ürün özetini farklı şekilde kullanır, bu nedenle her yerde çalışacağını varsaymadan kanca hedefinizi test edin. Storefront ve çoğu alt teması, woocommerce_single_product_summary kanca sırasını değiştirmeden saygı gösterir, bu nedenle bir öncelik-26 kaydı tahmin edilebilir davranır.

Flatsome, Astra ve diğer oluşturucu dostu temalar bazen satın alma formunu kendi shortcod'ları veya React tarafından tahrik edilen bileşenleri içine sarar, bu da woocommerce_after_add_to_cart_button'ın gerçekten nerede ateşlendiğini kaydırabilir — bazen ateş alır ancak mobil görünümde görünen alan dışında işlenir. Elementor'un WooCommerce Builder'ında veya Divi'nin WooCommerce modüllerinde olacaksanız, ürün sayfası genellikle klasik şablon dosyası yerine widget'lerden birleştirilir ve kanca tabanlı enjeksiyon hiç görünmeyebilir; bu durumda, kanca sistemi ile savaşmak yerine, oluşturucunun kendi "özel HTML" veya "shortcod" widget'ini kullanarak gömülü script'i istediğiniz yere tam olarak yerleştirin.

Hangi durumda olduğunuzu onaylamak için hızlı bir yol: ürün sayfasını açın, kaynağı görüntüleyin ve add_to_cart_button veya formun name="add-to-cart" niteliğini arayın. Tanınabilir WooCommerce form işaretlemesi içinde bulursanız, kancalar belgelendiklerine göre çalışacak. İşaretleme, gizlenmiş sınıf adlarına sahip bir oluşturucu shortcod'u tarafından oluşturulmuş görünüyorsa, oluşturucu kullanıcı arabiriminin manuel yerleşimi planlayın.

Yayınlamadan Önce Entegrasyonu Test Etmek

"Kurulmuş gibi görünen" bir sanal deneme düğmesi, uçtan uca çalışan biriyle aynı şey değildir. Canlıya çıkmadan önce hem masaüstünde hem mobilde şu dört şeyi kontrol edin:

1. Tetikleyici, mağazanın kullandığı her ürün şablonu varyantında render ediliyor mu — basit ürünler, değişkenli ürünler ve eklentilerin eklediği özel ürün tipleri.
2. Sanal denemeyi açmadan önce bir varyasyon (beden, renk) seçmek, bu seçimi ilk varyanta varsayılan olarak dönmeden doğru şekilde oturuma aktarıyor mu.
3. Widget, WooCommerce'in cache kurulumu içinde yükleniyor mu — WP Rocket veya LiteSpeed Cache gibi eklentiler önbellekte alınmış sayfalarda inline script etiketlerini kaldırabilir, bu yüzden sadece yönetici olarak değil, önbelleği temizledikten sonra oturum açmamış bir kullanıcı olarak test edin.
4. Mobil görünüm alanı davranışı: pek çok WooCommerce mobil temasının ekranın altına eklediği yapışkan sepete ekle çubuklarının tetikleyiciyi kesmediğini doğrulayın.

Dördüncü madde diğer her şeyden daha fazla yayın hatası yakalar, çünkü yapışkan mobil sepete ekle çubukları, sanal deneme entegrasyonu ilk test edildikten sonra pek çok mağazanın sonradan eklediği yaygın bir tema özelliğidir.

YourSizer Nereye Oturuyor

YourSizer'in widget'i tam da bu tür hook tabanlı bir ortama oturacak şekilde tasarlandı: hafif bir embed olarak dağıtılır ve woocommerce_after_add_to_cart_button'a (veya eşdeğer 26 öncelikli bir alana) kaydedilebilir, böylece tetikleyici ayrı bir sekme yerine satın alma işlemi yanında durur. Hook'ların render edilen markup'a ulaşamadığı mağazalarda — sayfa oluşturucu ürün sayfaları, ağır özelleştirilmiş şablonlar — aynı embed, ürün şablonunu yeniden inşa etmeye gerek kalmadan özel bir HTML bloğu aracılığıyla da yerleştirilebilir.

Widget ayrıca, mevcut olduğunda alıcının zaten seçtiği beden ve renk niteliklerini WooCommerce varyasyon formundan okur, böylece sanal deneme oturumu alıcıyı tekrar seçim yapmaya zorlamadan önceden doldurulmuş şekilde açılır. Bunların hiçbiri sizin belirli temanız için tetikleyicinin nerede olması gerektiği konusundaki iyi değerlendirmenin yerini tutmaz — sadece bu rehberdeki yerleşim seçeneklerinin hepsinin desteklenen yollar olduğu, geçici çözümler olmadığı anlamına gelir.

Sıkça Sorulan Sorular

Sanal deneme, WooCommerce ürün sayfamın yüklenme süresini yavaşlatır mı?

İyi kurulmuş bir sanal deneme embed'i asenkron yüklenir ve daha ağır varlıklarını (3D render, model dosyaları) alıcı tetikleyiciye tıkladığında erteler, bu yüzden ilk sayfa yüklemesi önemli ölçüde etkilenmemelidir. İzlenmesi gereken daha büyük risk, önbellekleme eklentilerinin script etiketini kaldırması veya geciktirmesidir; bu yüzden temiz, oturum açılmamış bir önbellek üzerinde test yukarıdaki yayın öncesi kontrol listesinin opsiyonel değil zorunlu bir parçasıdır.

Sanal deneme tetikleyicisini sadece belirli ürün kategorilerinde gösterebilir miyim?

Evet — hem eklenti hem embed-script yolları, WooCommerce'in standart kategori ve ürün tipi kontrollerini (has_term(), is_product_category()) kullanan koşullu mantığı destekler, böylece tetikleyiciyi giyim ürünleriyle sınırlayıp aksesuar veya hediye kartları gibi sanal denemenin uygulanmadığı ürünlerde gizleyebilirsiniz. Bu, karma bir katalog satan ve düğmenin giyilmeyen SKU'larda görünmesini istemeyen mağazalar için yaygın bir uygulamadır.

Bir alıcının tarayıcısı widget'in render gereksinimlerini desteklemezse ne olur?

Tetikleyici düğmesi bozuk görünmek yerine zarif şekilde gerilemelidir — doğru yapılandırılmış bir entegrasyon, sanal deneme arayüzünü render etmeden önce cihaz ve tarayıcı uyumluluğunu kontrol eder ve bunun yerine tetikleyiciyi gizlemeye veya standart bir beden tablosu bağlantısı göstermeye geri döner. Bunu özellikle eski Android cihazlarda test sırasında doğrulamaya değer, çünkü WebGL desteği orada güncel iOS donanımlarına göre daha değişkendir.

Sanal deneme, WooCommerce'deki bir beden önerisi widget'inden farklı mı?

Evet, ve bu ayrım hangi hook ve yerleşimi kullanacağınız açısından önemlidir — bir beden önerisi aracı genellikle birkaç ölçüm ister ve önerilen bir beden döndürür, sanal deneme ise ürünün bir vücut modeli veya fotoğraf üzerinde görsel bir önizlemesini render eder. Bazı mağazalar ikisini sepete ekle yanında yan yana çalıştırır; hangisinin ne zaman daha mantıklı olduğunun daha derin bir karşılaştırması için sanal deneme ve beden önerisi karşılaştırmasına bakın.

Sonuç

WooCommerce'e sanal deneme eklemek, widget'in kendisinden çok disiplinli yerleşimle ilgilidir — temanızın gerçek markup'ına göre eklenti veya embed yolunu seçmek, sepete ekle kararı yanında duran bir hook önceliğini hedeflemek ve canlıya çıkmadan önce önbellekleme ve mobil koşullarında test etmek. Storefront tarzı temalar bunu basit hale getirir; sayfa oluşturucu kataloglar biraz daha manuel hedefleme gerektirir ama aynı derecede uygulanabilirdir. Hook yerleşimini bir kez doğru yapın, aynı desen (varyanta duyarlı tetikleyici, asenkron yükleme, zarif geri dönüş) katalog ve temanız geliştikçe geçerliliğini korur — aynı yerleşim mantığının farklı bir platformda nasıl işlediğini görmek için Shopify'a beden önerisi widget'i nasıl eklenir yazısına bakın. Moda e-ticareti genel olarak Google'in sanal denemeyi Arama'ya katmasının alıcı beklentileri için ne anlama geldiğini hala sindirmekte, ve sitedeki temelleri şimdi doğru yapmak bir WooCommerce mağazasını bundan sonra gelecek her şeye iyi konumlandırır.