WooCommerce Ürün Sayfalarınızı Nasıl Düzenler ve Özelleştirirsiniz?

Ürün sayfası satış süreci için çok önemlidir. Müşterinin devam edip ürünü satın almaya veya iade garantisi olmadan ayrılmaya karar verdiği yer burasıdır. Bir çevrimiçi mağaza sahibi olarak hedefiniz, site ziyaretçilerini ürün sayfalarınıza çekmek, ardından Sepete Ekleme ve Satın Alma işlemlerinin son adımlarını atmalarını sağlamaktır.

Bu amaçla, ürün sayfalarınızın satılan ürünü tanıtmak için mümkün olan en iyi işi yapması önemlidir. WooCommerce varsayılan ürün şablonu temiz ve profesyonel olup, sayfanız için aşağıdaki yöntemleri kullanarak oluşturabileceğiniz sağlam bir temel sağlar.

WooCommerce ürün sayfası şablonunuzu nasıl optimize edebilirsiniz?

WooCommerce ürün sayfalarınızı veya şablonunuzu özelleştirmenin birkaç yolu vardır. Bazı yöntemler WooCommerce'e dahil edilmiştir. Diğerleri için bir uzantıya ihtiyacınız olacak. Ayrıca Site Editörünü kullanabilir veya özelleştirmeleri manuel olarak yapabilirsiniz. Her seçeneğe daha yakından bakalım.

Yerleşik özellikleri kullanarak WooCommerce ürün sayfanızı nasıl özelleştirebilirsiniz?

Birçok ürün sayfası optimizasyonu, herhangi bir eklenti veya kodlama olmadan yapılabilir. Yüksek kaliteli fotoğraflar, bilgilendirici açıklamalar ve temel ürün bilgileri, ziyaretçinin ürünü satın alırken rahat hissetmesini kolaylaştırır.

Güven oluşturmak için incelemeleri ve derecelendirmeleri etkinleştirin. Ortalama sipariş boyutunu artırmak ve müşterilerin yeni ürünleri keşfetmesini kolaylaştırmak için ilgili ürünleri, çapraz satışları ve ek satışları ayarlayın. Sosyal kanıt için ürün açıklamalarınıza veya sekmelerinize müşteri referansları ekleyin.

Sayfa içeriğinizi optimize ettikten sonra, WooCommerce uzantılarını kullanarak, ürün sayfası şablonunuzu Site Düzenleyici ile düzenleyerek ve bunları kod ve kancalarla manuel olarak özelleştirerek ürün sayfalarınızı daha da geliştirebilirsiniz.

WooCommerce uzantılarını kullanarak ürün sayfanızı nasıl özelleştirebilirsiniz?

Uzantı, WooCommerce mağazalarına ek işlevsellik sağlamak için özel olarak oluşturulmuş bir WordPress eklentisidir. Aşağıda, ekstra ürün bilgisi sağlamak, alışveriş deneyimini yükseltmek ve sayfanızı varsayılan özelliklerinin ötesine taşımak için kullanabileceğiniz bazı WooCommerce uzantıları bulunmaktadır. Resmi WooCommerce uzantı kitaplığında daha fazla özelleştirme için daha fazla uzantı bulabilirsiniz.

1. WooCommerce için Gelişmiş Ürün Varyasyonu

Değişken ürünler, boyut ve renk gibi seçeneklere sahip öğelerdir - alışveriş yapan kişinin ödeme yapmadan önce yaptığı seçimler. Ön uçta, WooCommerce her özellik için (boyut veya renk gibi) bir açılır menü ve aşağıda mevcut varyasyonların bir listesini (Küçük, Orta veya Büyük gibi) görüntüler.

Daha görsel bir yaklaşım için WooCommerce için Gelişmiş Ürün Varyasyonu, renk örnekleri (renkler, resimler ve metin), galeriler ve tablolarla ürün varyasyonlarını sergilemenizi sağlar. Renk örneklerinize videolar bile ekleyebilirsiniz.

Varyasyon renk örnekleri, yapılandırdığınız ayarlara bağlı olarak Ürün sayfasında veya ana Mağaza sayfasında gösterilir. Mevcut ürün görsellerinden ve öne çıkan görsellerden yararlanarak renk örnekleri oluşturabilirsiniz.

Ürün galerisi düzenini, öne çıkan görselin altındaki varsayılan konumundan sol tarafa taşıyarak da özelleştirebilirsiniz.

WooCommerce için Gelişmiş Ürün Varyasyonu hakkında daha fazla bilgi edinin.

2. WooCommerce Sekme Yöneticisi

WooCommerce ürün sayfası sekmeleri, Sepete ekle düğmesinin altında görünür ve başlık ve fiyat gibi temel öğeleri ekranın üst kısmında tutarken ek bilgileri sergilemenize olanak tanır.

Bu ek bilgiler arasında ürün malzemeleri ve içerikleri, ağırlıklar ve boyutlar, beden tabloları, fiyatlandırma tabloları, teslimat süreleri, nakliye ücretleri, nasıl yapılır videoları - her şey yer alabilir Bu, müşterinin satın alma işlemi yaparken kendinden emin hissetmesine yardımcı olacaktır.

WooCommerce Sekme Yöneticisi ile varsayılan sekmeleri (Uzun Açıklama, Ek Bilgi ve İncelemeler) yeniden adlandırabilir, yeniden sıralayabilir ve kaldırabilir ve kendi genel, kategori çapında ve ürüne özel sekmelerinizi oluşturarak bu bölümü özelleştirebilirsiniz.

Ürün düzeyinde geçersiz kılınabilen varsayılan bir sekme sırası ayarlamak için eklentiyi kullanın. Sürükle ve bırak arayüzü ile tema dosyalarını değiştirmenize veya koda girmenize gerek yoktur.

Zaten başka eklentiler aracılığıyla özel sekmeleriniz varsa, WooCommerce Sekme Yöneticisi bunları algılayarak size bunları gösterme veya gizleme seçeneği sunar. Bu eklentinin en büyük avantajı, sekmelerinizdeki içeriğin site arama sonuçlarınıza dahil edilmesidir.

WooCommerce Sekme Yöneticisi hakkında daha fazla bilgi edinin.

3. Ürün SSS

Sık sorulan sorular veya SSS, ürün bilgilerini organize etmenin ve ziyaretçilerinize sunmanın kullanıcı dostu bir yoludur. Ürün SSS uzantısıyla, her ürün için sınırsız soru ve yanıt içeren özel bir SSS sekmesi ekleyebilirsiniz.

Eklenti, tüm ürün türleriyle çalışır ve bir ürün sayfası oluştururken veya düzenlerken bir SSS bölümü ekler.

Ön uçta, SSS'ler animasyonlu akordeon tarzında görüntülenir.

Ürün SSS'leri hakkında daha fazla bilgi edinin.

4. Kompozit Ürünler

Kompozit Ürünler ile müşterileriniz kitler veya yapılandırılabilir ürünler oluşturabilir.

Her bileşik ürün için, müşterilerin mevcut envanterden önceden belirlenmiş seçimler arasından seçim yapmasına izin vereceksiniz. Belirli seçimlere ekstra ücret atayabilir ve belirli kategorilerin isteğe bağlı olmasına izin verebilirsiniz.

Örneğin bir kolye, zincir (gümüş, altın), taş (yakut, lal, zümrüt) ve isteğe bağlı bir tılsım (birden fazla şekil seçeneği) için seçenekler içerebilir.

Kitin yapı taşlarının her biri için (zincir, taş ve tılsım) müşterinin seçebileceği SKU'ları seçebilir veya tüm ürün kategorisinden herhangi bir seçeneği seçmesine izin verebilirsiniz.

Koşullu mantık, önceki seçimlere göre seçenekleri göstermenizi veya gizlemenizi sağlar (örneğin, kırmızı gömlek belirli bedenlerde mevcut değildir) ve bileşen düzeyinde izleme, gelişmiş envanter yönetimini destekler. Çok sayıda seçeneğiniz varsa, daha kolay alışveriş için sıralama, filtreleme ve sayfalandırma ile görünümler oluşturabilirsiniz.

Kompozit Ürünler hakkında daha fazla bilgi edinin.

5. Ürün Eklentileri

Ürün Eklentileri uzantısı, müşterilerinizin satın aldıkları ürünleri ücretsiz ve ücretli ekstralar aracılığıyla özelleştirmelerine ve yükseltmelerine olanak tanır.

Eklentiler arasında garantiler, daha yüksek kaliteli malzemeler, öncelikli nakliye seçenekleri veya özel monogramlama ve gravür gibi kişiselleştirmeler yer alabilir. İnsanlar ürünlerinizi genellikle hediye olarak alıyorsa, bir paketleme seçeneği veya hediye mesajı alanı ekleyebilirsiniz.

Kâr amacı gütmeyen kuruluşlar, alışveriş yapanların alışverişlerine bir bağış eklemesine ve bir ad ve mesaj ekleyerek birinin onuruna bağışta bulunmasına izin verebilir.

WooCommerce Rezervasyonlarınız varsa, Ürün Eklentileri, ekstra hizmetler (saç kesiminden sonra saç durulama) veya özel oturma ve erişim için VIP yükseltmeleri için seçenekler oluşturmanıza olanak tanır. Abonelik ürünlerinize eklentiler sunabilmeniz için WooCommerce Abonelikleri ile de çalışır.

Eklentileriniz, metin kutuları, açılır menüler, onay kutuları, resim tabanlı seçimler ve ipuçları ve bağışlar gibi öğeler için özel fiyat girişleri olarak görüntülenen özel alanları içerebilir. Bu alanlar, kataloğunuzun tamamına uygulanabilir veya belirli ürünlere atanabilir.

Eklentilerinizi kurduktan sonra, seçtiğiniz sırayla ürün sayfalarında Sepete Ekle düğmesinin üzerinde görünürler.

Ürün Eklentileri hakkında daha fazla bilgi edinin.

Site Düzenleyiciyi kullanarak ürün sayfanızı özelleştirin

Blok temalarla, Site Düzenleyici'de Tek Ürün sayfası şablonunu düzenleyerek ürün sayfanızın görünümünü özelleştirebilirsiniz. WordPress yöneticisinde, Görünüm → Düzenleyici seçeneğine gidin.  

Sayfanın üst orta kısmındaki açılır menüden "Tüm şablonlara göz at" ı seçin. Görünen listeden Tek Ürün şablonunu seçin.

Varsayılan sayfa düzeni, ürün bilgisi, fiyat ve resim öğelerini görüntüleyen üst bilgi, alt bilgi ve WooCommerce Tek Ürün bloğunu içerir.

Ürün sayfası şablonunuzda düzenlemeler yapmadan önce sitenizi yedeklemelisiniz. Belirli değişiklikler - örneğin, Tek Ürün bloğunu yanlışlıkla silmek ve kaydetmek - ziyaretçilerinizin alışveriş yapmasını veya satın almasını imkansız hale getirecektir.

Tek Ürün sayfası üst bilgi ve alt bilgi şablonları nasıl düzenlenir?

Ayarlar altındaki Şablon sekmesi (sağ üstteki dişli çark simgesi), Üst Bilgi ve Alt Bilgiyi yönetmek için bağlantılar içerir. Sayfa şablonunun o bölümünü yönetmek için seçeneklerden birine tıklayın. Düzenlemeye başlamak için doğrudan şablonun bir alanını da tıklayabilirsiniz. Burada yapılan değişikliklerin şablonu kullanan tüm ürünlere uygulanacağını unutmayın.

Başlıkta, ana gezinme menünüzdeki Site Başlığını ve bağlantıları düzenleyebilir ve hatta ürün sayfanızı özel olarak özelleştirmek için yeni bloklar ekleyebilirsiniz. Ürün sayfanızın satış gücünü artırmak için resim, metin ve daha fazlasını eklemek için bu alanı kullanın. Alışveriş yapanların mevcut bir indirim veya belirli bir tutarın üzerindeki siparişlerde ücretsiz kargonun nasıl alınacağı hakkında bilgi sahibi olmasını sağlamak için bir promosyon veya politika notu veya afiş ekleyebilirsiniz.

Ürün sayfası altbilgisi ile benzer bir şey yapabilirsiniz. Örneğin, bir müşteri referansı veya bir Memnuniyet Garantisi politikası hakkında bilgi ekleyin.

Tek Ürün gövdesi nasıl özelleştirilir

Tek Ürün bloğunun üst kısmında kalın bir uyarı görüntülenir: “Bu bloğu kaldırmayın! Bu bloğun kaldırılması, mağazanız üzerinde istenmeyen etkilere neden olacaktır." Bu mesajı ciddiye alın!

Ancak, ürün sayfası tasarımınızı tamamen özelleştirmek için Tek Ürün bloğunun etrafına yeni bloklar ekleyebilirsiniz.

Tek Ürün bloğunun üstüne veya altına öğeler eklemek için + simgesini kullanın, ardından sayfayı özelleştirmek istediğiniz blokları ekleyin.

Mevcut teklifleri ("Ücretsiz gönderim için 100 ABD Doları veya daha fazlasını harcayın"), bir memnuniyet garantisi veya ziyaretçilerin satın alma kararını vermelerine yardımcı olacak herhangi bir şeyi dahil etmek için bir Paragraf bloğu kullanın. İşlemlerinize perde arkası görünümü veren bir Video bloğu ekleyin. Veya tanıtmak istediğiniz belirli önerilen ürünleri ekleyin. Burada sınır gökyüzü!

Ve her blok için, arka plan rengi, tipografi ve boşluk gibi ayarları düzenleyerek tamamen size ait olmasını sağlayabilirsiniz.

Ürün sayfanızı manuel olarak özelleştirin (kod ve kancalar kullanarak)

Eklentilerin maliyeti veya bakımı olmadan gelişmiş seçenekler için, kod ve kancaları kullanarak ürün sayfanızı manuel olarak düzenleyebilir ve özelleştirebilirsiniz.

Dosyalarınızda herhangi bir değişiklik yapmadan önce, WooCommerce'i yedeklemek için zaman ayırmanız önemlidir. Jetpack VaultPress Backup kullanıyorsanız, bu sizin için gerçek zamanlı olarak otomatik olarak yapılır. Dolayısıyla, değişikliklerinizden herhangi biri sitenizin çökmesine neden olursa, WordPress panonuza erişiminiz olmasa bile yalnızca birkaç tıklamayla bir yedeği geri yükleyebilirsiniz.

Ayrıca bu değişiklikleri yapmak için bir alt tema kullanmak isteyeceksiniz. Aksi takdirde, temanızı veya WooCommerce'i ileride güncellediğinizde tüm özelleştirmelerinizi kaybedebilirsiniz. Diğer bir seçenek de, gerektiğinde açıp kapatabileceğiniz snippet'lerde sitenize özel kod eklemenizi sağlayan Code Snippets gibi bir eklenti kullanmaktır.

Kancaları kullanarak WooCommerce ürün sayfalarını özelleştirin

Kancalar, site sahiplerinin çekirdek dosyaları düzenlemeyle ilişkili tehlikeler olmadan kod eklemesine ve sayfaları özelleştirmesine olanak tanır. İki tür kanca vardır: eylemler ve filtreler. Eylemler, belirli noktalara kod eklemenize izin verirken, filtreler bir değişkeni değiştirmenize ve döndürmenize olanak tanır.

Örneğin, yeni bir teslim alma alanı eklemek için eylemleri kullanabilir, ardından mevcut teslim alma alanlarının etiketlerini veya yer tutucularını değiştirmek için filtreleri kullanabilirsiniz. Kullanılabilir WooCommerce kancalarının listesini burada bulabilirsiniz.

Kancaları kullanarak ürün sayfalarınızda yapabileceğiniz değişikliklere birkaç örnek daha:

• Sepete Ekle düğmesi metnini değiştirin. Örneğin, bunun yerine "Şimdi Bağış Yap" diyebilirsiniz.
• WooCommerce kırıntılarını özelleştirin. İçerik haritası ayırıcısını değiştirin, içerik haritalarını tamamen kaldırın, vb.
• Ürün sekmelerini kaldırın, yeniden adlandırın ve yeniden sıralayın. Örneğin, bir Malzemeler sekmesi ekleyin veya sekmelerden birine bir video ekleyin.

WooCommerce ürün sayfalarını CSS kullanarak özelleştirin

CSS, tasarım öğelerini kontrol etmek için kullanılan bir kodlama dilidir (eylemleri kontrol eden JavaScript'in aksine). Ürün sayfalarınızın tasarımını değiştirmek için kullanabilirsiniz. CSS'nin temellerini öğrendikten sonra, renk ve yazı tiplerinden tek tek öğelerin boyutlarına kadar her şeyi özelleştirebilirsiniz.

WordPress kontrol panelinizde Görünüm → Özelleştir → Ek CSS'ye giderek kolayca CSS kodu ekleyebilirsiniz. Örneğin, ürün başlıklarınızın yazı tipi rengini değiştirmek isterseniz, rengin onaltılık kodunu kendi kodunuzla değiştirerek aşağıdaki kodu kullanırsınız:

 .woocommerce div.product .product_title { color: #222222; }

Şimdi Satın Al düğmesinin rengini değiştirmek isterseniz, yine onaltılık kodu istediğiniz renkle değiştirerek bu kodu kullanırsınız:

 .woocommerce div.product .button {   background: #000000; }

Bu makalede WooCommerce'den daha fazla örnek görebilirsiniz.

Ürün sayfası yükleme hızlarınızı nasıl artırabilirsiniz?

Hızlı yüklenen siteler hem ziyaretçiler hem de arama motorları için önemlidir. İnsanlar beklemek istemiyor ve arama motorları insanları düşük performans gösteren sitelere göndermek istemiyor.

Kelimenin tam anlamıyla her saniye önemlidir — yükleme sürelerindeki bir saniyelik gecikme, dönüşüm oranlarını %20 azaltabilir!

Jetpack Boost, WordPress için en iyi web sitesi hızı ve performans optimizasyon çözümüdür. Hızlı ve kolay bir kurulum sürecine sahiptir - geliştirici gerektirmez - ve bire bir testte en iyi beş performans eklentisini geride bırakan sonuçlara sahiptir.

Ücretsiz eklentiyi yükledikten sonra, bir denetim çalıştırabilir ve mevcut site performans puanlarınız hakkında bir rapor alabilirsiniz. Bunlar, Google'ın sitenizin kullanıcı deneyimini ve teknik performansını ölçmek için kullandığı metrikler olan Önemli Web Verileri'nizdeki iyileştirmeleri ölçmek için kullanabileceğiniz kıyaslamalar olarak hizmet edecektir.

Basit bir kontrol paneli, tek tıkla etkinleştirmelerle optimizasyon seçeneklerini yapılandırmayı basitleştirir. Bu size performans modüllerini ayrı ayrı test etme ve Jetpack Boost'u her türlü senaryoya mükemmel şekilde uyacak şekilde yapılandırma esnekliği sağlar.

Ürün sayfalarınızı hızlandırmanın daha fazla yolu için, bir WooCommerce Mağazasını Hızlandırmanın Dokuz Yolu'na bakın.

Ürün sayfalarını özelleştirme hakkında sık sorulan sorular

Hala sorularınız mı var? Aşağıdaki bazı yaygın soruların yanıtlarına göz atın.

Bir WooCommerce ürün sayfasını özelleştirmenin en iyi yolu nedir?

Tek bir en iyi yol yoktur. Sizin için en iyi yol, çeşitli yaklaşımlarla konfor seviyenize bağlıdır.

Site Düzenleyici, herhangi bir kodu düzenlemek zorunda kalmadan kendi kişiselleştirilmiş ürün sayfanızı oluşturmanız için öğeleri sürükleyip bırakmanıza izin vererek tüm gücü ellerinize verir. Bu, hem yeni başlayanlar hem de ileri düzey kullanıcılar için mükemmel bir çözümdür!

Belirli ek işlevler arıyorsanız, WooCommerce uzantıları harika bir seçenektir. WooCommerce tarafından incelenmiş ve onaylanmıştır ve satıcılara özel kod olmadan gelişmiş özelleştirme seçenekleri sunar.

Manuel özelleştirme ve kodlama en büyük esnekliği sunar, ancak aynı zamanda en fazla teknik bilgiyi gerektirir. Bloklar veya uzantılar kullanmakla karşılaştırıldığında, bu yöntemin bir soruna neden olma ve hatta siteyi bozma olasılığı daha yüksektir.

Ürün sayfası şablonunu düzenlemeden önce sitemi yedeklemeli miyim?

Evet. Sayfaların ve gönderilerin aksine, site şablonlarının bir düzeltme geçmişi yoktur. Ürün sayfası şablonunuzda herhangi bir güncelleme yapmadan önce sitenizi yedekleyin, böylece herhangi bir sorun olması durumunda hızlı bir geri yükleme yapabilirsiniz.

Jetpack VaultPress Backup, gerçek zamanlı bir WordPress yedekleme eklentisidir; bu, sitenizin yalnızca günlük bir programa göre veya manuel bir kopya oluşturduğunuzda yedeklenmediği anlamına gelir. Bunun yerine, sitenizde her değişiklik yaptığınızda, bir müşteri sipariş verdiğinde veya bir ziyaretçi yorum bıraktığında otomatik olarak kaydedilir. Herhangi bir zamanda önemli bir şey olur mu? Kurtuldu!

E-ticaret mağazaları, özellikle bu veriler gerçek dünyadaki müşteri siparişlerini temsil ettiğinde verileri kaybetmeyi göze alamaz. Sitenizi yalnızca ara sıra kaydeden veya bir sorun olduğunda geri yüklemek için uzun bir müşteri hizmetleri etkileşimi gerektiren çözümlerle yetinmeyin.

Jetpack VaultPress Backup ile sitenizi tek tıkla geri yükleyebilir ve hızla tekrar çevrimiçi olabilirsiniz. Jetpack mobil uygulaması ile site tamamen çökse bile istediğiniz zaman, istediğiniz yerde geri yükleyebilirsiniz.

Mağaza sahipleri için en iyi bölüm? Tüm müşteri verileriniz ve siparişleriniz korunur ve güncel kalır.

Bir WooCommerce ürün sayfasını özelleştirmek için en iyi uygulamalardan bazıları nelerdir?

WooCommerce ürün sayfanızı düzenlemek ve özelleştirmek için kullandığınız yöntem ne olursa olsun, kendinizi, sitenizi ve müşterilerinizi korumak için bu en iyi uygulamaları izleyin.

Her seferinde önce sitenizi yedekleyin . Site kodunu eklediğinizde veya güncellediğinizde, tek bir hata sorunlara neden olabilir. Tek bir siparişi bile kaybetmeden siteyi en kısa sürede geri yüklemeye hazır olmalısınız. Jetpack VaultPress Backup, WordPress için en iyi gerçek zamanlı, otomatik yedekleme çözümüdür.

Bu sizin için yapılır, böylece değişiklikleri denemeden önce sitenizi kaydetme konusunda endişelenmenize bile gerek kalmaz.

Kod değişikliklerinizi üst tema dosyalarınızın dışında yapın. Bir temayı veya eklenti dosyasını düzenlediğinizde, tema veya eklentinin bir sonraki güncellenişinde bu değişikliklerin üzerine yazılır ve geri alınır.

Tema veya eklenti dosyalarını doğrudan düzenlemeden sitenize kod eklemenin birçok yolu vardır. Bir sayfada öğe eklemek, düzenlemek veya kaldırmak için Kod Parçacıkları eklentisini kullanabilir ve Tema Özelleştirici'deki Ek CSS alanı aracılığıyla sitenize stil verebilirsiniz. Bir alt tema da oluşturabilirsiniz. Önemli olan değişikliklerinizi tema veya eklenti güncellemelerinden etkilenmeyecekleri bir yerde yapmanızdır.

Hıza dikkat edin. Ürün sayfalarınızı nasıl özelleştirirseniz özelleştirin, sitenizin hızının düşmediğinden emin olmak istersiniz. Jetpack Boost ile hem kullanıcı deneyimini hem de Google'ın sitenizin kalitesine ilişkin algısını iyileştiren temel alanları anında iyileştirebilirsiniz. Daha hızlı bir site, müşterilerin kalma olasılığının artacağı ve Google'ın arama sonuçlarında sizi önerme olasılığının artacağı anlamına gelir. Hızlı bir destek uzun bir yol kat edebilir.