Wooocommerce ödemelerine ürün resimleri nasıl eklenir
Müşteri alışveriş deneyiminizi geliştirmek için WooCommerce’e ödeme yapmak için ürün resimleri eklemek ister misiniz? Biz sana yardım ederiz. Bu makalede, WooCommerce Checkout’a nasıl ürün görüntüleri ekleyeceğinizi göstereceğiz. Ancak, tartışmadan önce, Wooocommerce Checkut sayfasına neden ürün görüntüleri eklememiz gerektiği konusunda net bir şekilde anlaşılması önemlidir. Faydaları ve satışları nasıl etkilediğini bulmak da önemlidir? Öyleyse önce öğrenelim. Kahramanlara neden ürün görüntüleri eklemeniz gerekiyor? Ödeme sayfanız Woocommerce mağazanızdaki en önemli sayfada. Bu, kullanıcıların satın alımlarını tamamladığı ve siparişlerini onayladığı yerdir. Bu nedenle, daha iyi ve daha kolay kullanıcı deneyimleri için ödeme sayfanız optimize edilmelidir.
Varsayılan ödeme sayfasını görünce, kullanıcı deneyimi için optimize edilmediğini hemen göreceksiniz. Örneğin, kasiyerin sipariş bölümü yalnızca resimsiz ürün başlıklarını görüntüler. Bu, müşterilerin doğru ürünü alıp almadıklarını doğrulamalarını zorlaştırır.
Aslında, ürün çizimleri olmadan, doğru ürün başlığını hatırlamalı veya mağazaya geri dönmeli ve ödeme yaparken doğru ürüne sahip olup olmadıklarını doğrulamak için tekrar kontrol etmelidirler. Açıkçası, bu iyi bir kullanıcı deneyiminin bir işareti değildir. Bu, müşterilerin birkaç adım atmasını sağlar. Amacımız adım sayısını azaltmak ve satın alma işlemini müşteriler için daha basit ve daha hızlı hale getirmektir. Unutmayın, daha iyi bir kullanıcı deneyimi memnun müşteriler ve bu nedenle daha iyi satışlar üretir. Şimdi devam edelim ve WooCommerce Checkout’a nasıl ürün resimleri ekleyebileceğimizi görelim. WooCommerce kasasına ürün resimleri eklemek için WooCommerce kasasına nasıl ürün resimleri ekleyebilirim, özel bir kod görüntüleri kullanacağız. Endişelenmeyin, bu bölümü yapmak için bir kodlama deneyimine ihtiyacınız yoktur. Bu oldukça basit ve kolay. Sadece takip edin, ne kadar basit olduğunu göreceksiniz. Kod Örnekleri Ekleme Kod görüntülerine gitmeden önce, sitenizden tam yedeklemeler yapmanızı ve Fun Cctions.php dosyasını düzenlemek için çocuğun temasını kullanmanızı şiddetle tavsiye ederiz. Referanslar için, çocuk teması oluşturma veya çocuk tema eklentilerinden birini kullanma konusunda kılavuzumuza bakın.
Çocuğunuzun teması ayarlandıktan sonra, WP Yönetici Gösterge Tablosu> Görünüm> Tema Düzenleyicisine gidin. Çocuğunuzun temasını seçin ve functions.php dosyasını açın. Burada, dosyanın sonuna özel bir kod görüntüsü ekleyebilir ve değişikliklerin uygulanması için daha sonra güncelleyebilirsiniz.
Veya, WordPress Core dosyasını değiştirme fikrinden rahatsızsanız, kod snippet eklentisi de kullanılabilir. WordPress depolarından eklentileri yükleyebilirsiniz. Eklenti yüklendikten ve etkinleştirildikten sonra, WordPress kontrol panelinizden eklenti ayarlarını açın ve yeni snippet ekle’yi tıklayın. Bu eklenti ile istediğiniz kadar snippet ekleyebilirsiniz. Kod snippet eklentisiyle, eklenti kendi kod snippet’lerinizi işlediğinden bir çocuk temasına ihtiyacınız yoktur. Ancak, her zaman bir hata durumunda olmanızı öneririz. Şimdi sitenize nasıl kod görüntüleri ekleyeceğimizi biliyoruz, wooocommerce’i kontrol etmek için ürün resimleri eklemek için kod snippet’lerine bakalım. WooCommerce Checkout’a ürün resimleri eklemek için örnekler burada sizin için iki özel snippet var. Birincisi ürün görüntülerini ürün başlığına göre görüntüler. İkincisi çizimleri ve başlıkları ayrı satırlarda gösterir. İkisinin eylemlerine bakalım. Ürün görüntüsünü bir satır tarzındaki kasaya ekleyin, hat bir stilde ödeme sayfasına ürün resimleri eklemek için aşağıdaki kod parçalarını kullanın. add_filter (‘wooocommerce_cart_item_name’, ‘quadlayers_product_image_checkout’, 9999, 3); ‘QuadLayers_Product_Image_Checkout’ işlevi ($ name, $ cart_item, $ cart_item_key) {
if (! Is_checkout ())
{Dönüş $ name;}
$ ürün = $ cart_item [‘data’];
$ thumbnail = $ ürün-> get_image (dizi (’50’, ’50’), dizi (‘sınıf’ => ‘alignleft’));
/*Yukarıda, örneğin dizinin (‘100’, ‘100’) değerini değiştirerek küçük resim boyutunu değiştirebilirsiniz ve ayrıca seviyelendirmeyi Alignright’a değiştirebilirsiniz*/
Geri $ küçük resim. $ Name;}, siz veya müşteriniz ödeme sayfasını gördükten hemen sonra ön uçta güncellenir.
Ayrı satırlara da resim ve ürün başlıkları ekleyin, ayrı satırlarda çizimleri ve ürün başlıklarını görüntülemek için aşağıdaki kod snippet’lerini kullanabilirsiniz. Ürün başlığı uzunsa ve görüntü ve başlıkları bir satırda yüklemek için yeterli alan yoksa bu iyi olabilir. add_filter (‘wooocommerce_cart_item_name’, ‘quadlayers_product_image_checkout’, 9999, 3);
Function quadLayers_product_image_checkout ($ name, $ cart_item, $ cart_item_key) {
if (! Is_checkout ()) {Dönüş $ name;}
$ _Products = Appl_filters (‘wooocommerce_cart_item_product’, $ cart_item [‘data’], $ cart_item, $ cart_item_key);
$ thumbnail = $ _products-> get_image ();
$ image = ‘
‘
. $ küçük resim.
”;
/* Yukarıdaki görüntünün genişliğini, yüksekliğini ve seviyesini istediğiniz gibi değiştirebilirsiniz*/
Geri $ resim. $ adı;
} Ürün görüntüleri ve başlıkları, ödeme sayfasını yeniledikten sonra ayrı bir satırda görüntülenir.
İşte burada! Mutlu! Şimdi WooCommerce Checkout’a ürün görüntüleri eklemeyi başardınız. Ancak, daha fazlası var. Müşteriler Yer Siparişi düğmesine tıkladıktan sonra, sipariş ödeme sayfasına veya ödeme yapmaları gereken sipariş ayrıntılarına götürülürler. Varsayılan olarak mesaj sayfasının nasıl görüntüleneceğine ve onu nasıl geliştirebileceğimize bakalım. WooCommerce Oder Ödeme Sayfasına Ürün Görüntüleri Eklemek için İleti Pay sayfasına gidin, müşterilerinizin ödeme yaptığı yer burasıdır. Sipariş ödeme sayfası, ürün başlıkları, miktarlar, fiyatlar ve toplam sipariş fiyatları dahil olmak üzere tüm sipariş ayrıntılarını görüntüler. Varsayılan olarak bir sayfa ekranı. Varsayılan ödeme sayfası gibi görebileceğiniz gibi, ürün görüntüleri de burada görüntülenmez. Öyleyse düzeltelim. Amacımız mesaj ödeme sayfasına ürün resimleri eklemektir. Mesaj-ödeme sayfasına ürün görüntüleri eklemek için aşağıdaki kod görüntülerini kullanabilirsiniz. Daha önce açıklandığı gibi seçim yönteminizi kullanarak sitenize ekleyin. add_filter (‘wooocommerce_order_item_name’, ‘quadlayers_product_image_orderpay’, 9999, 3);
Function quadLayers_product_image_orderpay ($ name, $ öğe, $ ekstra) {
if (! Is_checkout ()) {Dönüş $ name;} $ ürün_id = $ öğe-> get_product_id ();
$ _Product = wc_get_product ($ ürün_id);
$ thumbnail = $ _products-> get_image ();
$ image = ‘
‘ ‘
. $ küçük resim.
”;
/* Yukarıdaki görüntünün genişliğini, yüksekliğini ve seviyesini istediğiniz gibi değiştirebilirsiniz*/
Geri $ resim. $ adı;
}
Bravo! Artık WooCommerce Checkout ve Sipariş Pay sayfasına ürün resimleri ekleyebilirsiniz. Müşterileriniz, yükseltilmiş bir kullanıcı deneyiminden kesinlikle memnun kalacaktır. Şimdiye kadar, WooCommerce Checkout ve Sipariş-Pay sayfasına ürün resimlerinin nasıl ekleneceğini gördük. Ödeme sayfasını daha kullanıcı dostu hale getirmek için ayarlamanın diğer yollarına bakalım. Buna dalalım. Bonus: Ödeme sayfasını özelleştirin Ödeme Eklentisi Yöneticisi Woocommerce Checkout sayfanızı ayarlamanın en kolay yolu üçüncü taraf eklentisidir. Gösteri amacıyla, QuadLayers tarafından geliştirilen WooCommerce eklentisi için Checkout Manager’ı kullanacağız. Bu, 90.000’den fazla etkin kurulumla ödeme sayfanızı ayarlamak için en iyi eklentilerden biridir. WooCommerce için ödeme yöneticisi, tüm ödeme alanlarını yönetmenizi sağlayan zengin bir özellik eklentisidir, böylece ihtiyaçlarınıza göre ayarlayabilirsiniz. Bu araç tarafından sunulan tüm değerli işlevleri görmek için ürün sayfalarımızı izleyin. Şimdi eklentinin WooCommerce Checkut sayfasını nasıl ayarlamamıza izin verdiğini görelim. İlk WooCommerce eklentisi için ödeme yöneticisini yüklerken, eklentiyi yüklemeniz ve etkinleştirmeniz gerekir. WordPress Yönetici Gösterge Tablonuzu açın ve Eklenti> Yeni Ekle’ye gidin. QuadLayers’ın WooCommerce eklentisi için bir ödeme yöneticisi arayın ve şimdi yükleme düğmesini tıklayın. Eklenti yüklendikten sonra etkinleştirmeye basın. Bu, sitenizdeki eklentiyi etkinleştirecektir.
Böylece, eklenti artık kuruldu ve kullanıma hazır. Chepout Manager eklentisini kullanarak ödeme sayfamızı ayarlamaya geçelim. Premium bir sürüm istiyorsanız, web sitenize de ekleyebilirsiniz. Ancak eklentileri WooCommerce web sitenize manuel olarak yüklemeniz gerekir. Sitenizdeki etkin eklentiden sonra kasalar ekleyin, düzenleyin ve silin, WordPress yöneticisini açın ve WooCommerce> ödeme panosunda gezinmeniz yeterlidir. Orada ödeme yöneticisi için tüm ayarları bulacaksınız. Ödeme sekmesinin altında, ödeme sayfasının farklı bölümleri için farklı bir menüye sahip olacaksınız. Nakliye, faturalandırma, siparişler ve e -postalar için alanları yönetebilirsiniz. Ayrıca, kendi özel alanınızı da ekleyebilirsiniz. Her menüde, ihtiyaçlarınıza göre yönetebileceğiniz ilgili alanları bulacaksınız. Her alanda belirli alanların davranış şeklini kontrol eden birkaç parametre vardır. Bu parametreyi değiştirerek davranışı değiştirebilir ve böylece ödeme sayfanız üzerinde daha fazla kontrol elde edebilirsiniz. Farklı alan parametrelerine bakalım ve ne yaptıklarını görelim.
Yeniden konumlandırma: Üst ve alt oklarla düzlemi yukarı veya aşağı hareket ettirmek mümkündür. Sadece bir tıklayın, alan her biri bir adım yukarı veya aşağı hareket edecektir. Veya düzlemi istediğiniz konuma yeniden konumlandırmak için üç yatay hattı tıklayabilir ve sürükleyebilirsiniz.
Zorunlu: Gerekli parametrelerin etkinleştirilmesi alanı zorunlu hale getirir. Müşterileriniz, bir zorunluluk olarak işaretlenen alanı geçemez.
Konum: Parametre konumu temel olarak alanı istediğiniz gibi hizalamanıza olanak tanır. Uçağı sola veya sağa düzleştirmeyi veya tam olarak genişletmeyi seçebilirsiniz. Sil: Silinen parametreyi etkinleştirmek, bu özel alana uygun diğer alanları sınırlar.
Devre dışı bırak: Adından da anlaşılacağı gibi, parametre etkinleştirildiğinde, alanı kasiyerde görünmeyecek şekilde devre dışı bırakır. Düzenle ve Sil: Her düğmeyi kullanarak alanları düzenleyebilir veya silebilirsiniz. Sil düğmesinin yalnızca özel alanlar için göründüğüne dikkat edilmelidir. Varsayılan alanı silemez, ancak yalnızca devre dışı bırakamazsınız Yani, her şey alan parametrelerini değiştirerek alanınızı yönetmekle ilgilidir. Ardından, WooCommerce Checkout’a nasıl özel bir yükleme alanı ekleyeceğimizi göreceğiz. WooCommerce Checkout’ta özel bir yükleme ekleyin WordPress Yönetici Gösterge Tablonuzu Açın ve WooCommerce> Checkout’a gidin. Ödeme sekmesinin altında ek alan menüsünü açın. Not: Özel alanlar eklemek sadece ek alanlarla sınırlı değildir. Ödeme sayfasının faturalandırma, gönderim, vb. Gibi diğer bölümlerine özel alanlar ekleyebilirsiniz. İstediğiniz alana yeni bir alan eklemek için ödeme sekmesindeki her menüye gidin. Ek alan menüsünde bulunduktan sonra, yeni bir alan oluşturmak için yeni alan ekleme düğmesini tıklayın. Ayrıca, gerilme menüsünün ek parçalarının konumunu sağ köşede ayarlayabilirsiniz. Faturalandırma formundan veya sipariş notundan önce veya sonra yerleştirebilirsiniz.Bu, yeni bir alan oluşturmak için bir form içeren yeni bir sayfaya götürecektir.Bir dosya yükleme düğmesi eklemek, türü dosya olarak ayarlamak ve düğmeyi etiketlemek ve metin yazmakla ilgilendiğimiz için.Yeni alanınızı kaydetmek için Kaydet’e basın. İşte bu!Bu o kadar basit.Şimdi değişikliği doğrulamak için ödeme sayfasına gidebilirsiniz.Orada dosya işlemdeki yükleme düğmesini göreceksiniz.
Aynı şekilde, ödeme sayfanızı ayarlamanın birkaç yolu vardır. Tam öğreticiler için, Woocommerce Checkut sayfasının nasıl ayarlanacağına dair tam kılavuzumuza bakın. Sonuç Genel olarak, ödemeniz müşterinizi satın alma sürecinde en önemli adımlardan biridir. Şu anda, müşteriler satın alımlarını tamamlamaya karar verdiler. Bu nedenle, burada gerçek satışları bozmak için kötü bir şey istemezsiniz. Bu nedenle daha iyi bir kullanıcı deneyimi için ödeme sayfasını optimize etmeniz gerekir. Böylece müşterilerinizin satın alımlarını tamamlama ve sipariş vermesi daha olasıdır. Varsayılan ödeme sayfası oldukça basittir ve kullanıcı deneyimi için optimize edilmez. Örneğin, resmi değil, yalnızca ürün başlığını görüntüler. Müşterinin bakış açısından, tek başına başlık, kasada doğru öğeyi alıp almadıklarını doğrulamak için yeterli değildir. WooCommerce Checkout’taki ürünleri göstermek burada çok yararlı olabilir, çünkü son kullanıcıyı kasalar sırasında doğru ürüne sahip olduklarını onaylayacaktır. Bu makalede, özel kod snippet’lerini kullanarak WooCommerce kasasına ürün resimlerinin nasıl ekleneceğini gördük. Ödeme sayfasında paralel ve ayrı satırlarda ürün görüntülerini görüntülemek için iki seçenek gördük. Ayrıca, özel bir kod kullanarak WooCommerce sipariş ödeme sayfasına ürün görüntüleri nasıl ekleyebileceğimizi de gördük. Ayrıca, Woocommerce eklentisi için Checkut Manager’ı kullanarak ödeme sayfasını ayarlamanın çeşitli yollarını görüyoruz.
Bu kılavuzun yararlı olduğunu düşünüyorsanız, sizin için ilginç olabilecek başka makaleler: WordPress’te görüntüleri nasıl sıkıştırırsınız (eklentilerle ve eklentiler olmadan)
Görüntülere alt etiketler eklemek için en iyi eklenti (ücretsiz ve ücretli)
Wooocommerce görüntü boyutu sorunu nasıl düzeltilir
Hiç WooCommerce Checkout’a ürün görüntüleri eklemeye çalıştınız mı?Sizin için hangi çözüm başarılı?Sizce fark ne kadar büyük?Bize aşağıdaki yorumlarda anlatın.
