Wooocommerce ürün sayfası şablonu nasıl ayarlanır
Ürün sayfası şablonunuzu düzenlemenin yollarını mı arıyorsunuz? Biz sana yardım ederiz. Bu kılavuzda, WooCommerce Ürün Sayfası şablonunu ayarlamanın çeşitli yollarını öğreneceksiniz. WooCommerce çok sayıda ayar seçeneği içerir. En ilginç seçeneklerden biri, varsayılan e -ticaret mağaza şablonunuzu düzenleme olasılığıdır. Ve bunu birden fazla yönteme daha da etkileyici olarak ayarlayabilmeniz. Ürün sayfa şablonunuzu ayarlamaktan bekleyebileceğiniz bazı avantajlara bakalım. Ürün Sayfaları Düzenleme Faydaları Şablonlar Düzenleme Ürün Sayfaları Şablonları Web sitesi sahiplerinin ve müşterilerinin deneyimini geliştirir. Wooocommerce Varsayılan ürün sayfası şablonu çoğu site için iyidir. Bu, alıcının ihtiyaç duyduğu ürününüz hakkında gerekli tüm bilgileri sağlar. Ancak, benzersiz bir ürün sayfasına sahip olmak, rakiplerinizden öne çıkmanız için size değerli avantaj sağlayacaktır.
Varsayılan şablonda yeterli ürün bilgisi olmasına rağmen, iyi bir ilk izlenim yapmak, satışları artırmanıza yardımcı olacaktır. Bunun için yine de bazı ayrıntıları eklemek veya silmek isteyebilirsiniz. Ayrıca, sattığınız ürün veya hizmet türüne, müşteri talebi veya devam eden eğilimlere bağlı olarak bazı ürün sayfası öğelerini de değiştirmeniz gerekebilir. Örneğin, daha fazla ziyaretçi çekmek için indirimler, teklifler ve yıllık satışlar hakkında düzenli olarak bilgileri görüntüleyebilir ve güncelleyebilirsiniz. Buna ek olarak, web sitenizi benzersiz kılmak ve alıcıya izlenim bırakmak için uygulayabileceğiniz renk, düzen ve tipografi değişiklikleri vardır.
Bunlar, Ürün Sayfası şablonuna uygulayabileceğiniz en yaygın değişikliklerden bazılarıdır, ancak yapabileceğiniz çok daha fazlası vardır. WooCommerce’deki ürün sayfaları şablonlarını düzenlemek için çeşitli yöntemlere bakalım. WooCommerce Ürün Sayfa Şablonunu Nasıl Ayarlanır WooCommerce Ürün Sayfası Şablonunu Düzenlemenin Çeşitli Yolları Var: Programlanmış
Bir sayfa yapımcısı ile
Eklentileri Kullanma
Başlamadan önce, hatırlamanızı istediğimiz bazı şeyler var.
WooCommerce’ı doğru ayarladığınızdan emin olun ve sorunlardan kaçınmak için herhangi bir adım kaçırmayın
Web siteniz hakkında hassas bilgiler içeren bazı tema dosyalarını değiştireceğimiz için, WordPress sitenizi rezerve etmenizi ve devam etmeden önce bir çocuk teması veya çocuk teması eklentilerinden biri oluşturmanızı öneririz.
Bu gösteri için Divi temasını kullanacağız. Tema dosyaları, temanıza bağlı olarak web sitenizde farklı olabilir, ancak sorunsuz tüm adımları izleyebilmeniz gerekir
> Web sitenizde uyumlu WooCommerce temalarından birini kullandığınızdan emin olun
Şimdi daha fazla uzatmadan, ürün sayfası şablonunu düzenlemek için yönteme geçelim.
1) WooCommerce Ürün Sayfası Şablonunu ayarlayın Programlandı Bu yöntem, ürün sayfası şablonunuzda basit bir ayar yapmak istiyorsanız şiddetle tavsiye edilir. Kod ile kolayca düzenleyebilirsiniz, ancak bu yaklaşımı kullanırsanız temel programlama bilgisiniz varsa daha iyidir. Çoğunlukla WooCommerce Hooks kullanacağız, bu yüzden alışkın değilseniz, Woocommerce Kait’in nasıl kullanılacağına dair rehberimizi görebilirsiniz. Bu oldukça yararlıdır çünkü kanca aynı zamanda her türlü WooCommerce şablonunu ayarlamanıza izin verir. Ürün sayfası şablonunu düzenlemek için yapabileceğiniz bazı şeyler örneklerini görelim. 1.1) Ürün sayfasından öğeleri silme Ürün sayfasından öğeleri silmek istiyorsanız, istediğiniz öğeleri silmek veya gizlemek için bir kanca kullanan aşağıdaki görüntülerden birini kullanabilirsiniz. Tek yapmanız gereken doğru olanı seçmek ve web sitenize tema dosyasına eklemektir. WooCommerce eklentisi şablonu dosyasındaki Content-Single-Product.php dosyasının yorumlarında bulunan tüm kancaları bulabilirsiniz. Veya bu sayfaya başvurabilirsiniz.
Bunlar, ürün sayfanızdan öğeleri silmek için kullanabileceğiniz bazı snippet örnekleridir: // Başlığı silin
Remove_action (‘wooocommerce_single_product_summary’, ‘wooocommerce_template_single_title’, 5);
// yıldızları kaldır
Remove_action (‘wooocommerce_single_product_summary’, ‘wooocommerce_template_single_ting’, 10);
// meta ürünleri sil
Remove_action (‘wooocommerce_single_product_summary’, ‘wooocommerce_template_single_meta’, 40);
// Açıklama Sil
Remove_action (‘wooocommerce_single_product_summary’, ‘wooocommerce_template_single_excerpt’, 20); // resimleri sil
Remove_action (‘wooocommerce_beefore_single_product_summary’, ‘wooocommerce_show_product_images’, 20);
// İlgili ürünleri sil
Remove_action (‘wooocommerce_aftle_single_product_summary’, ‘wooocommerce_output_related_products’, 20);
// Ek bilgi sekmesini sil
Remove_action (‘wooocommerce_aftle_single_product_summary’, ‘wooocommerce_output_product_data_tabs’, 10); İstediğiniz öğeleri silmek için kancayı bulduktan sonra, WordPress kontrol panelinizdeki görünüm> tema düzenleyicisini açın ve functions.php dosyasını açın. Ardından, istediğiniz kod parçasını dosyanın altındaki Remove_action işleviyle ekleyin.
Örneğin, ürün sayfası başlığını silmek için aşağıdaki snippet’leri koyacağız:
Ardından dosyayı güncelleyin ve sitenizi ön uçtan kontrol edin. Başlığın ürün sayfasından silindiğini göreceksiniz. 1.2) Yeni bir öğe ekle Woocommerce sayfa şablonunuzu ayarlamak ve ona yeni öğeler eklemek için bir kanca da kullanabilirsiniz. Elementleri girmek için, gerekli kancalarla add_action işlevini kullanmanız gerekir. Örneğin, ürün sayfasına biraz metin eklemek için, aşağıdaki görüntüleri function.php adresine çocuğunuzun tema dosyasına koyabilirsiniz.
Add_action (‘wooocommerce_beefore_single_product_summary’, function () {
printf (‘
Tebrikler, yeni bir bağlantı eklediniz!
‘);
}); Bu, ürün sayfasına yeni içerik ekleyecektir. Ürün sayfanıza istediğiniz öğeleri eklemek için metni ve boyutu değiştirmek için yukarıdaki kodu ayarlayın. Elementleri silme ve eklemeye benzer şekilde, çocuk temasından function.php dosyasına bir kod parçası eklemeniz gerekir.
Elemanları yeniden düzenlemek için, kancayı önce ürün sayfası şablonundan çıkarmanız, ardından başka bir konuma başka bir kanca eklemeniz gerekir. Bu, önceki adımda kullandığımız kod görüntülerinin bir kombinasyonudur. Aşağıda verilen örnekte, komut dosyası konum sırasını değiştirerek ürün açıklamasını başlığın hemen altına taşıyacaktır. // Açıklama Sırasını Değiştir
Remove_action (‘wooocommerce_single_product_summary’, ‘wooocommerce_template_single_excerpt’, 20);
Add_action (‘wooocommerce_single_product_summary’, ‘wooocommerce_template_single_excerpt’, 6); Aynı şekilde, ürün sayfanızın şablon öğesini yeniden düzenlemek için gereken kancalardan birini kullanabilirsiniz. Doğru konum siparişini girdiğinizden emin olun. Bununla ilgili daha fazla örnek istiyorsanız, programlanan Woocommerce ürün sayfalarını nasıl düzenleyeceğiniz konusundaki kılavuzumuza bakın. 2) WOOOCOMMERCE Ürün Sayfaları Şablonları, Sayfa Yapımcıları ile Şablonları Düzenle Sayfa Yapımcıları, web sitelerini yapma ve ayarlama işlemini kolaylaştıran harika araçlardır. Bu, ürün sayfası şablonunda da görülür. Programlama becerileriniz yoksa, WooCommerce ürün sayfası şablonunu birkaç tıklamada bir sayfa üreticisi ile ayarlayabilirsiniz. Buna ek olarak, sayfa yapımcıları ayrıca ürün sayfası şablonlarını oluşturduğunuz değişikliklerle depolamanıza olanak tanır. Ve çoğu sayfa üreticisi size şablonları düzenlemek için bir sürükleme ve gevşek düzenleyici verdiğinden, çok zaman kazanabilirsiniz. WordPress’te birçok sayfa üreticisi var. Bu öğretici için Divi Builder’ı kullanacağız çünkü bu en iyi sayfalardan biri ve temamız Divi ile çok iyi çalışıyor.
Kullanmaya başlamak için Divi aldığınızdan emin olun ve ardından web sitenize Divi Builder’ı yükleyin. Bundan sonra, şablonu düzenlemeye başlamaya hazırsınız. 2.1) Açık Visual Editor Ürün sayfası şablonunu düzenlemek için ilk adım, ürün sayfalarınızdan birini açmak ve yönetici çubuğundaki “Görsel Oluşturucu Etkinleştir” seçeneğini tıklamaktır. Ürün sayfası şablonunu ayarlayabileceğiniz Divi Visual Editor’a yönlendirileceksiniz. Bu seçeneği görmüyorsanız, WordPress kontrol panelini aynı tarayıcı penceresine girdiğinizden emin olun.
2.2) Şablonu görsel bir düzenleyiciyle ayarlayın, görsel bir düzenleyici yardımıyla, ürün sayfanızın hemen hemen tüm öğelerini ayarlayabilirsiniz. Tek yapmanız gereken, düzenlemek istediğiniz öğelerden birini tıklamaktır. Örneğin, ürün açıklamasının arka plan rengini ayarlamak istersiniz. Ürün açıklamasına basın ve Ayarlar simgesini tıklayarak açıklama ayarlarını açın.
Ardından, arka planı açın ve ürün açıklamanız için ayarlamak istediğiniz rengi seçin. Önizlemede arka plan renginin hemen değiştiğini göreceksiniz. Renkten memnun olduğunuzda, değişiklikleri kaydetmeyi unutmayın.
Renkleri değiştirmenin yanı sıra, ürün sayfası şablonuna daha fazla modül eklemek istediğinizi varsayalım. Modülü eklemek istediğiniz alandaki ” +” sembolünü tıklamanız, hat türünü seçin ve istenen modülü seçin. Özel bir şey eklemek istiyorsanız, arama alanına yazarak belirli modülleri arayabilirsiniz. Ardından, tek yapmanız gereken seçeneği modül ayarlarında yapılandırmak ve değişiklikleri kaydetmektir. Örneğin, Noel satışını başlatmak için bir zaman indirgeme zamanı coute modülü eklemek istiyorsunuz. Sembolü + tuşuna basın ve anahtar kelime zaman sayımını arayın.
Ardından, modül ayarlarında metin, saat ve tarih gibi geri sayım için gereken bilgileri ekleyin. Yaparken önizlemede gerçek zamanlı değişiklikler göreceksiniz.Memnun kaldığınızda, ekranınızın altındaki 3 yatay noktada genişleyerek ürün sayfası şablonunu kaydedin.Hızlı İpucu Ürün sayfası şablonunu Divi Builder ile ayarlamak için çevrimiçi mağazanızda sattığınız ürün türüne bağlı olarak farklı bir ürün sayfası şablonuna da sahip olabilirsiniz.Tek yapmanız gereken WordPress kontrol panelinizde Divi> Divi Builder’a gitmek ve yeni şablon ekle’yi tıklayın. Ürün bölümüne giderseniz, belirli bir ürün sayfası için bir şablon oluşturabileceğinizi göreceksiniz.Bu belirli kategorilere, etiketlere veya ürünlere bağlı olabilir.İstediğiniz seçeneği seçin ve şablonlar oluşturun. Ardından, az önce yaptığınız ürün sayfası şablonuna özel bir gövde eklemeniz gerekir. Başından yeni bir tane yapabilir veya kütüphaneden şablonlardan birini kullanabilirsiniz. Seçtiğiniz şeyin yanı sıra, Woocommerce Ürün Sayfası şablonunu ayarlamak için bir kez daha görsel düzenleyici kullanmalısınız. Divi Builder’ın nasıl kullanılacağı hakkında daha fazla bilgi edinmek istiyorsanız, Divi’deki WooCommerce Ürün sayfasının nasıl ayarlanacağına dair ayrıntılı kılavuzumuza bakın. Veya ürün sayfası şablonunu düzenlemek için başka bir sayfa üreticisini kullanabilirsiniz. Bir Elementor kullanıyorsanız, daha fazla bilgi için Elementor’daki WooCommerce Ürün sayfasını ayarlamak için öğreticimizi görebilirsiniz. 3) WooCommerce Ürün Sayfa Şablonunu bir eklenti kullanarak ayarlayın. Elementors gibi bazı sayfa yapımcıları eklenti olarak da mevcuttur, ancak çok özel işlevler için kullanabileceğiniz başka özel araçlar da vardır. Eklentilerden biri WooCommerce için doğrudan ödeme. Bu araç, WooCommerce’deki ödeme işlemini basitleştirmenize yardımcı olmak için tasarlanmıştır. Bu eklenti ile, ürünü sepete ekledikten sonra müşterileri ürün sayfasından doğrudan ödeme sayfasına yönlendirebilirsiniz. Bu şekilde satın alma işlemini kısaltır ve dönüşüm seviyenizi artırırsınız. Genel olarak, bu, mağazanızdaki ürün sayfası şablonu düğmesini düzenlemek için çok iyi bir araçtır.
Doğrudan ödeme ile ürün sayfası şablonunu düzenleme adımlarına bakalım.3.1) İlk eklentiyi yükleyip etkinleştirin, eklentiyi yüklemeli ve etkinleştirmeniz gerekir.Buradan ücretsiz sürümünü indirebilir veya daha fazla işlev içeren ve 19 USD’den (bir ödeme) başlayan premium paketlerden birini alabilirsiniz.Veya, WordPress kontrol panelinize eklentiler> yeni eklentiye gidebilir, eklentiler arayabilir ve yükleyebilirsiniz. Eklentiyi yükledikten ve etkinleştirdikten sonra ayarlamanız gerekir.3.2) Doğrudan ödeme seçeneğini yapılandırın WooCommerce> Doğrudan Ödeme ve Genel sekmesini açın.
Ardından, aşağıdaki seçeneği ayarlayın: Yönlendirme arabasına eklendi: evet Yönlendirme arabasına eklendi: Checkout Son olarak, değişiklikleri kaydedin ve çevrimiçi mağazanızdaki ürün sayfalarını önizleyin. Şimdi herhangi bir üründeki Satın Al düğmesine tıkladığınızda hemen ödeme sayfasına yönlendirilirsiniz. Bir satın alma düğmesi nasıl ekleneceğiniz hakkında daha fazla bilgi için tıkladıktan sonra, Woocommerce’a hızlı bir satın alma düğmesi nasıl ekleneceğinizle ilgili kılavuzumuza bakın. Kısacası, ürün sayfasını düzenlemeye benzer ürün sayfası şablonunu ayarlayın. Ürün sayfalarınızdan yararlanmak için daha fazla bilgi ve fikir için WooCommerce ürün sayfasını ayarlamak için öğreticimizi görebilirsiniz. Bonus: WOOOCOMMERCE Ürün Sayfası Şablonunu Düzenle Şimdiye kadar, bir sayfa üreticisi ile programlanmış WooCommerce ürün sayfasını nasıl ayarlayacağını ve özel bir eklenti kullanacağını gördük. Ama yapabileceğiniz başka şeyler de var. Şablonunuzu küçük bir CSS ile de düzenleyebilirsiniz. Bu, ürün sayfalarınızda küçük tasarım değişiklikleri yapmak için en hızlı yöntemdir. CSS komut dosyaları, ekran ve tasarım seçeneklerini değiştirmek için çok kullanışlıdır, böylece görünümü açarak> Ek CSS’yi açarak sitenize kolayca ekleyebilirsiniz. Oraya girdikten sonra, ürün sayfası şablonunu ayarlamak için CSS komut dosyasını ekleyebilirsiniz. CSS kullanarak ürün sayfalarınızı geliştirmek için yapabileceğiniz bazı şeyler örnekleri. Yazı Tipi Boyutunu Değiştir Aşağıdaki CSS kodu başlığı, ürün sayfasındaki başlık yazı tipinin başlığını 16 olarak değiştirecektir. } Sadece snippet’teki yazı tipi boyutu çizgisini ayarlayarak diğer yazı tipi boyutlarını seçebilirsiniz. Başlığınızın rengini değiştirin, başlık başlığını CSS ile değiştirerek ürün sayfası şablonunu da ayarlayabilir. CSS ile web sitenize eklemek istediğiniz renkten hex kodunu arayın ve aşağıdaki kodu kullanın. Örneğin, bu snippet’te, başlığın rengini Maroon olarak değiştiren #800000 renk kodunu kullandık. .WooCommerce Div.product .product_title {renk: #800000; }Tüm değişiklikleri yaptıktan sonra yayınlayın. CSS görüntülerine daha fazla örnek için bu gönderiye bakın. Bu, mağaza sayfasını nasıl ayarlayacağınızı gösterir, ancak ürün sayfası şablonunu düzenlemek için aynı fragmanı uygulayabilirsiniz. Divi’ye uygulanması için daha spesifik örnekler için bu makaleyi görebilirsiniz. Sonuç Genel olarak, ürün sayfalarınızı düzenlemek, rakiplerinizden benzersiz ve önemli bir ürün sayfası oluşturmanıza yardımcı olabilir. Sattığınız ürün türüne ve müşterilerinizden geri bildirimlere bağlı olarak, öğeleri ekleyebilir, silebilir veya sıfırlayabilir ve ürün sayfalarınızı mümkün olduğunca en iyi şekilde kullandığınızdan emin olabilirsiniz. Bu kılavuzda, web sitenizdeki Woocommerce Ürün Sayfası şablonunu ayarlamanın çeşitli yollarını gördük Programlanmış Bir sayfa yapımcısı ile
Eklentileri Kullanma
Tüm bu yöntemler etkilidir, bu nedenle ihtiyaçlarınız için en uygun olanı seçin.Kodlama becerileriniz varsa, programlanan yaklaşım çok etkilidir ve neleri değiştirebileceğiniz konusunda size çok fazla esneklik sağlar.Değilse, şablonunuzun çeşitli bölümlerini kolayca ayarlamak için bir sayfa üreticisi kullanabilirsiniz.Son olarak, ürün sayfalarınıza belirli değişiklikleri uygulamanızı sağlayan doğrudan onaylar gibi eklentileri kullanabilirsiniz.Şablonunuzu düzenlediniz mi?Hangi yöntemi kullanıyorsunuz?Bize aşağıdaki yorumlarda anlatın.Bu öğreticinin ilginç olduğunu düşünüyorsanız, burada da sevebileceğiniz başka makaleler: WooCommerce ile ilgili ürünleri nasıl ayarlayabilirsiniz.
WooCommerce Ürün sayfasını ayarlamak için en iyi eklenti
Wooocommerce’deki ürünlere nasıl resim eklenir
