Nasıl Yapılır -Sayfa Wooocommerce Ödemesi
Sepetin ihmalini azaltmak ve dönüşüm seviyenizi artırmak ister misiniz? Bu kılavuzda, satışları artırmanıza yardımcı olacak eklenti olan ve olmayan iyi bir Woocommerce için nasıl bir sayfa ödeme yapacağınızı öğreneceksiniz. Kasiyerin çevrimiçi bir mağaza için en önemli sayfalardan biri olduğu bir sır değil. Bununla birlikte, bu aynı zamanda birçok kullanıcının arabasını terk ettiği bir adımdır. En son araştırmaya göre, alıcıların neredeyse% 70’i sepetlerini birkaç noktada bıraktı ve% 21’i kasiyere yaptı. Neden? Niye? Genellikle satın alma işlemi çok uzun veya karmaşık olduğu için.
Her e -ticaret sitesi için işlev gören tek bir çözüm olmamasına rağmen, tek sayfa ödeme sayfası çoğu işletme için daha iyi işlev görür. Bu nedenle, WooCommerce mağazanız için bir sayfa ödeme yapmak, sepetlerin ihmalini azaltmanıza ve satışlarınızı artırmanıza yardımcı olabilir. Bir sayfa ödeme wooCommerce nedir? Bir sayfa ödeme bir sayfadaki tüm kasaları görüntüler. Bu, sepet içeriği, ödeme ayrıntıları, fatura ve gönderim adresleri, nakliye seçenekleri ve resimler, metin veya ek iletişim formları gibi diğer bilgileri içerebilir.
Bu, sepetin ihmalini azaltmaya yardımcı olur
Ödeme işlemini kısaltın
Dönüşüm oranını artırın
Anlaşması kolay çünkü alıcılar bir sayfada doldurulması gereken tüm bilgileri görebilirler ve bir ve birkaç sayfanın kasaları hakkında daha fazla bilgi için bu tam kılavuza bakın.
Nasıl Yapılır -Sayfa Ödeme WooCommerce WooCommerce:
Eklentileri Kullanma
Programlanmış
Bir sayfa yapımcısı ile
WordPress kontrol panelinden
Bu bölümde, uzmanlığınıza ve ihtiyaçlarınıza en uygun olanı seçebilmeniz için her seçeneği göreceğiz. 1) WooCommerce’de bir sayfa ödeme oluşturmak için ilk seçenek eklentisiyle bir sayfa ödeme oluşturma bir eklenti kullanmaktır. Hem ücretsiz hem de premium olan birçok sayfa ödeme eklentisi var. Bu gösteri için WooCommerce Direct Checkout’u kullanacağız. Bu eklenti, ödeme işlemini kısaltmanıza ve dönüşüm seviyenizi artırmanıza yardımcı olacaktır. Yalnızca bir sayfa ödeme yapamaz, aynı zamanda gereksiz kasaları silebilir, Hızlı Satın Al düğmeleri ve daha fazlasını ekleyebilirsiniz.
Direct Checkout Direct Checkout ile bir sayfa ödeme, temel özelliklere sahip ücretsiz bir sürüme ve 19 USD (bir kerelik ödeme) arasında daha fazla işlevle 3 premium pakete sahiptir. İlk olarak, eklentiyi indirin. Bunu bu bağlantıdan veya WordPress kontrol panelinizden yapabilirsiniz. Etkinleştirildikten sonra WooCommerce> Doğrudan Ödeme Açın. Burada, kullanıcıları mağaza sayfasından ve tek ürünü doğrudan ödeme sayfasına yönlendirecek şekilde aşağıdaki gibi ayarlayın. Sepete eklendi Uyarısı: Bu, “Bkz. Sepet” uyarının yerini doğrudan kontrol ile değiştirir
Sepet bağlantısına eklendi: Bu, doğrudan sepet kontrolleri ile “sepet görün” bağlantısının yerini alıyor
Sepet yönlendirme: Sepetlerine bir şey ekledikten sonra kullanıcıyı yönlendirmek için bir yer seçebilirsiniz. Bu durumda, onları kasiyere yönlendireceğiz
TROLI URL’sini Değiştir: Alıcı arabalarına bir şey ekledikten sonra, bunları ödemeye yönlendireceğiz, Troli URL’sini ödeme bağlantısı ile değiştireceğiz
Bu değişikliğin sayfa, tek ürün ve kategoriler için geçerli olacağını lütfen unutmayın. Buna ek olarak, kullanıcıları tramvaya getiren herhangi bir bağlantınız olmadığından emin olun, çünkü onları devre dışı bırakacağız. İşte burada! Müşterileri ürün sayfalarından ve mağazalardan doğrudan kasiyere yönlendirerek ödeme işlemini basitleştirdiniz. Ayrıca, alıcılar siparişlerini ödeme sayfasında düzenleyebilir ve onaylayabilir. WooCommerce Direct Checkout’un ücretsiz bir sürümüyle bir sayfa ödeme oluşturabilirsiniz, ancak kasanızı bir sonraki seviyeye getirmek için daha fazla özellik istiyorsanız, birkaç premium paket görebilirsiniz.
2) Bu bölümde programlanan bir sayfa ödeme oluşturun, eklenti ile yaptığımız tek sayfa ödeme işlevi eklemek için birkaç PHP komut dosyası ve CSS stili kullanacağız.Bu nedenle, ilk bölümü görmenizi ve eklentiyi bir sayfa kontrolü oluşturmak için kurup ayarlamanızı öneririz.Bu gerçekten birkaç dakika sürecek.Bunu yapmayı bitirdikten sonra, programlanmış bir sayfa ödeme sayfanızı nasıl tam olarak ayarlayacağınıza bakalım.Not: Birkaç temel tema dosyasını düzenleyeceğimiz için, başlamadan önce, sitenizin bir yedeklemesini yaptığınızdan ve alt temayı sitenize yüklediğinizden emin olun.Çocuk tema eklentilerinden birini kullanabilir veya bu kılavuzu izleyerek kendiniz yapabilirsiniz. 2.1) Ürün meta verilerini ödeme sayfasına ekleyin, kullanıcı tarafından satın alınan ürün hakkında bazı bilgiler ekleyerek başlayalım. Ödeme sayfasında adları, mini görüntüleri ve ürün açıklamalarını görüntüleyeceğiz. Sepet sayfasını devre dışı bıraktığımız için, ürünü sepete ekledikten sonra alıcı kasiyere yönlendirilecektir. Sepet sayfası gizli olsa da, tüm ürün bilgilerini ondan almak için kullanabiliriz. Bunu yapmak için, aşağıdaki kodu işlevlere yapıştırın. quadLayers_product_meta () işlevi {echo ‘
Satın alacaksınız; $ sepet = tuvalet ()-> sepet-> get_kean (); foreach ($ cart_item_key => $ cart_item olarak) {$ ürün = $ cart_item [‘data’]; echo $ ürün-> get_name (). “
“; echo $ ürün-> get_image (); echo “”. $ ürün-> get_description (). } echo ”
Aşağıdaki formu doldurarak siparişinizi tamamlayın
“; } Bunu test etmek için, herhangi bir ürün üzerindeki Satın Al düğmesine tıklayın ve ödeme sayfasına yönlendirildikten sonra şöyle bir şey göreceksiniz: 2.2) Şablonlar klasöründeki wooCommerce eklentisi:/wooocommerce/şablonlar/checkut. Bu dosyanın üzerine yazmak için orijinal dosyayı WooCommerce eklentisinden kopyalayın ve WooCommerce dizini çocuğunuzun teması için ödeme klasörüne yapıştırın.
Varsayılan WooCommerce kontrolünde, düzen iki sütuna ayarlanır. Faturalandırma, nakliye ve ek formlar ilk sütunda görüntülenir ve diğer sütunlardaki sipariş detayları. Bunu, HTML sınıfını, Col2-setinden col1-set’e aşağıdaki gibi ekleyen öğesinden düzenleyerek değiştirebilirsiniz:
Bu basit baskıdan sonra tüm formlar olacaktır. Bunun gibi bir sütun tam genişliğinde görüntülenir:
Ayrıca, sipariş detaylarının başlığını düzenleyeceğiz ve “siparişinizden” aşağıdaki komut dosyasıyla “siparişe” genel bakış “olarak değiştireceğiz:
Bunlar, burada neler yapabileceğinize dair birkaç basit örnek. Daha ileri gitmek ve kendi özelleştirmenizi yapmaktan çekinmeyin. Orijinal WordPress işlevlerinden birini burada kullanabilirsiniz. Ödeme Kait hakkında daha fazla bilgi için bu makaleyi görebilirsiniz.
WooCommerce şablonunu programlanmış bir şekilde nasıl ayarlayacağınız hakkında daha fazla bilgi edinmek için bu tam kılavuza bakın. 2.3) Ödeme sayfasına bir sepet ekleyin Ödeme sayfasında birkaç kısa kod kullanabilirsiniz, bu nedenle oraya bir araba eklemek istiyorsanız, WooCommerce Sepet kısa kodunu aşağıdaki gibi kullanabilirsiniz: echo do_shortcode (‘[woocommerce_cart]’); Sepeti sipariş ayrıntılarından hemen önce görüntülemek için, bu PHP komut dosyasını Fonksiyonlara yapıştırın.php Dosya Çocuk temanıza: Add_action (‘wooocommerce_checkout_aftomer_customer_details’, ‘quadLayers_add_cart_checkout’); quadLayers_add_cart_checkout () işlevi { echo do_shortcode (‘[wooocommerce_cart]’);} Artık ödeme formunun sonunda kullanıcı tarafından eklenen bir ürüne sahip bir sepet göreceksiniz: 2.4) Müşteri sipariş ayrıntılarını incelediğinde ödeme sayfasına özel içerik ekleyin, ödeme yöntemini seçebilir ve tıklayabilirler. Satın alma işlemini tamamlamak için “siparişi ver”.Bu blok sağ sütunda görüntülendiğinden, dengeli bir tasarım elde etmek için sol tarafa biraz içerik ekleyeceğiz.Bu, bazı iade politikalarını, ödeme yöntemlerini, gönderim vb.Mağazanıza ayarlamaktan ve ayarlamaktan çekinmeyin: add_action (‘wooocommerce_checkout_beefore_order_review’, ‘quadLayers_add_column_before_order_review’);quadLayers_add_column_beefore_order_review () işlev { Printf (‘
Siparişiniz hakkında daha fazla bilgi:
Mağazamızda alışveriş yaptığınız için çok teşekkür ederim.
Mümkün olan en kısa sürede göndermek için elimizden geleni yapıyoruz, ancak optimal hizmetleri korumak için ürününüz, gelmeden önce iki iş gününe kadar ihtiyaç duyabilir
İade politikamız, 15 güne kadar değiştirme talep etmenizi sağlar. Satın aldıktan sonra. Li>
Aldığınız şeyden memnun değilseniz, geri ödeme politikamıza uygun olarak bir geri ödeme de seçebilirsiniz
Bir indirim kuponunuz var mı? Bir not varsa, buraya alın ve döndürün böylece
‘,’ wooocommerce ‘);} Ve bu nihai sonuç:
2.5) Function.php dosyasındaki ödeme sayfasına bazı CSS stilleri ekleyin, özel üretim dediğimiz kendi sınıfımızı eklediğimizi göreceksiniz. Bu sınıfı birkaç CSS komut dosyasıyla içerik düzenlemek için kullanacağız. Ayrıca, özel sınıfımızı kullanmadan yeni bir yeni sayfa ödeme tasarımımıza son bir dokunuş verebiliriz. Bu, bu öğreticide kullandığımız tam CSS komut dosyasıdır. Çocuğunuzun temasından style.css dosyasına kopyalayıp yapıştırın: / * Faturalandırma formunun başlığını gizleme * /
.WOOCOMMERCE-BILLING ALANLARI> H3: N-CHILD (1) {Ekran: Yok;
/ * Alacaksın … */
.Prud-kustom> h2: nth-child (1) {
Metnin hizalanması: orta; }
/* resim */
img.attachment-wooocommerce_thumbnail: nth-child (2) {
Marj: Otomatik;
}
/* tanım */
.Custom Ürün> Açık: N-Child (3) {
Marj: Otomatik;
Genişlik:%50;
Ekran bloğu;
}
/* Siparişinizi tamamlayın …*/
.Prus-kustom> h3: nth-child (4) {
Metnin hizalanması: orta;
Marj: 25px 0 25px 0;
}
/* daha fazla bilgi.. */
.Custom Ürün> div: nth-child (8) {
şamandıra: sol;
Genişlik:%47;
}
#Detile Müşteri {
Marj-Bawah: 40px;
} Not: Bu gösteri için mağaza temasını kullandık, böylece farklı bir tema kullanıyorsanız veya kendi özelleştirmenizi eklediyseniz CSS seçmenlerini ayarlamanız gerekebilir.Bundan sonra, her şey yolunda giderse, ödeme sayfanızda aşağıdakileri göreceksiniz:
İşte burada! Tamamen ayarlanmış bir sayfa wooocommerce ödeme yaptınız. 3) WooCommerce’de bir -sayfa ödeme oluşturmak ve ayarlamak için başka bir ilginç seçenek sayfası oluşturucu ile bir sayfa ödeme oluşturun. Orada birkaç yarda üreticisi var. Bu gösteri için sitenin kökenini kullanacağız. 1 milyondan fazla aktif kurulumla, bu sadeliği ve verimliliği nedeniyle en popüler sayfa üreticilerinden biridir. Süreç çoğu sayfa yapımcısı için benzerdir, bu yüzden ne kullanırsanız kullanın, bu kılavuzu sorunsuz bir şekilde takip edebilmelisiniz. İlk olarak, Site Origin’i WordPress depolarından indirin, web sitenize yükleyin ve etkinleştirin. Ardından, ödeme sayfasını editörle açın ve adı ekleyin. Buna bir sayfa ödeme diyeceğiz. Gördüğünüz gibi, ödeme sayfası sadece Gutenberg bloğuna yerleştirilen bir WooCommerce kısa kodudur. Gutenberg bloğunu arka uçta devre dışı bıraktıysanız, aynı kısa kodu ancak eski metin düzenleyicisini de göreceksiniz. Kısa kod bloğunu silin ve bir sayfa üreticisi ekleyin.
Şimdi bir sayfa üreticisi kullanılarak tamamen ayarlanmış bir sayfa ödeme yapmaya başlayabiliriz. Sütuna herhangi bir widget ekleyebilir ve istenen düzene ayarlayabilirsiniz. [Woocommerce_checkout] kısa kodu tekrar girmeniz gerektiğini unutmayın, aksi takdirde çalışmaz.
Ve bu en iyi yanı. Sayfa üreticisinin düzeninde bulunan widget’lardan veya modüllerden birini de kullanabilirsiniz. Ayrıca, diğer kısa kodları ekleyebilirsiniz. Sepet ve “hesabım” oldukça yaygındır. Bu temel bir örnektir, bu nedenle her widget’ı ayarlamanız ve ödeme sayfasını ihtiyaçlarınıza göre ayarlamanız gerekir. Ayrıca, her sayfa üreticisinin farklı çalıştığını unutmayın, böylece süreç benzer olsa da, birkaç şeyi ayarlamanız gerekebilir. Genel bir öneri olarak, tam genişliğe sahip ve yan bıçakları olmayan şablon genellikle en iyi şekilde çalışır. 4) Gutenberg Block Düzenleyicisini kullanarak bir sayfa ödeme oluşturun. Aynı şekilde, Gutenberg Block Düzenleyicisini kullandığınız bir sayfa ödeme ayarınızı ayarlayabilirsiniz. Bunun için, WordPress kontrol panelinizde ödeme sayfasını açın ve kısa bir ödeme koduna sahip bir blok göreceksiniz. Block ( +) Ekle düğmesini tıklayıp sütunları seçerek bu sayfaya daha fazla blok ekleyelim.
Burada ödeme sayfanızı tamamen ayarlamak için mevcut bloklardan ve kısa kodlardan birini kullanabilirsiniz. Veya kodlama becerileriniz varsa, kod bloğuyla kendi HTML kodunuzu girerek kontrolleri de düzenleyebilirsiniz. Bu demo için, hesap sepetimi ve kısa kodumu 2 sütunda ekledik, böylece şöyle görünecek:
Ve Gutenberg Blok Düzenleyicisi ile WooCommerce’de kolayca bir sayfa ödeme oluşturabilirsiniz. Son İpuçları
Bir sayfa ödeme yaparken, her zaman ödemenin ana amacını hatırlayın: Müşterilerin sipariş vermesini mümkün olduğunca kolay yerleştirmesine izin verir. Kullanıcının dikkatini bu hedeften uzaklaştıran herhangi bir içerikten kaçınmalısınız. “Mesaj” düğmesine basmadan önce kullanan tüm bilgilerin incelenmesi gerekir, böylece ödeme sayfasından her şeyi yapabilirler. Gerekli tüm bilgileri ekleyin ve kullanıcıyı farklı bir URL’ye yönlendiren bağlantıları eklemekten kaçının.
Kullanıcılar satın alırken uzun içerik sayfalarını sevmezler. Her şeyin basit ve temiz kalmasını sağlayın ve verimli ve profesyonel bir ödeme sayfasına ulaşmaya odaklanın Sonuç Genel olarak, bir sayfa ödeme satın alma işlemini kısaltmanıza, sepetlerin ihmalini azaltmanıza ve dönüşüm seviyesini artırmanıza yardımcı olacaktır. Bazı durumlarda, çok deneyim kontrolleri daha etkili olsa da, çoğu mağaza için daha kısa kasalar daha iyi çalışma eğilimindedir. Bu kılavuzda, Woocommerce’de bir sayfa ödeme yapmanın çeşitli yollarını gördük: Eklentilerle Programlanmış Bir sayfa yapımcısı ile Gutenberg Blok Editörünü Kullanma
