WooCommerce tek sayfalık ödeme nasıl oluşturulur

Yayınlanan: 2021-03-18

Alışveriş sepetini terk etmeyi azaltmak ve dönüşüm oranlarınızı artırmak mı istiyorsunuz? Bu kılavuzda, satışlarınızı artırmanıza yardımcı olacak eklentileri olan ve olmayan bir WooCommerce tek sayfalık ödemeyi nasıl oluşturacağınızı öğreneceksiniz.

Ödeme sayfasının bir çevrimiçi mağaza için en önemli sayfalardan biri olduğu bir sır değil. Bununla birlikte, birçok kullanıcının sepetlerini terk ettiği adımdır. Son araştırmalara göre, alışveriş yapanların yaklaşık %70'i bir noktada alışveriş sepetini terk ediyor ve %21'i bunu kasada yapıyor. Niye ya? Genellikle, satın alma süreci çok uzun veya karmaşık olduğu için.

Her e-ticaret sitesi için işe yarayan tek bir çözüm olmasa da, çoğu işletme için tek sayfalık ödeme sayfaları daha iyi çalışır. Bu nedenle, WooCommerce mağazanız için tek sayfalık bir ödeme oluşturmak, alışveriş sepetini terk etmeyi azaltmanıza ve satışlarınızı artırmanıza yardımcı olabilir.

WooCommerce tek sayfalık ödeme nedir?

Tek sayfalık bir ödeme, ödemenin tüm alanlarını tek bir sayfada görüntüler . Sepet içeriğini, ödeme ayrıntılarını, fatura ve gönderim adreslerini, gönderim seçeneklerini ve resimler, metin veya ek iletişim formları gibi diğer bilgileri içerebilir.

WooCommerce Tek sayfalık ödeme oluşturun - QuadLayers
Tek sayfalık ödeme örneği

Tek sayfalık ödemenin arkasındaki ana amaç, satın alma sürecini kısaltmak ve alışveriş sepetini terk etmeyi azaltmaktır. Müşteriler, siparişlerini tek bir sayfada vermek için tüm bilgileri doldurduklarında, süreci tamamlama olasılıkları daha yüksektir.

Tek sayfalık ödemenin faydaları

Tek sayfalık bir ödemenin avantajlarından bazıları şunlardır:

  • Sepeti terk etmeyi azaltmaya yardımcı olur
  • Ödeme sürecini kısaltır
  • Dönüşüm oranlarını artırır
  • Kolay anlaşılır, çünkü alışveriş yapanlar doldurmaları gereken tüm bilgileri tek bir sayfada görebilir

Tek ve çok sayfalı ödemeler hakkında daha fazla bilgi için bu kılavuzun tamamına göz atın.

WooCommerce tek sayfalık ödeme nasıl oluşturulur

WooCommerce tek sayfalık ödeme oluşturmanın farklı yolları vardır:

  1. Eklenti kullanma
  2. programatik olarak
  3. Bir sayfa oluşturucu ile
  4. WordPress kontrol panelinden

Bu bölümde, becerilerinize ve ihtiyaçlarınıza en uygun olanı seçebilmeniz için her bir seçeneğe göz atacağız.

1) Bir eklenti ile tek sayfalık bir ödeme oluşturun

WooCommerce'de tek sayfalık bir ödeme oluşturmanın ilk seçeneği bir eklenti kullanmaktır. Hem ücretsiz hem de premium birçok tek sayfalık ödeme eklentisi var. Bu gösteri için WooCommerce Direct Checkout kullanacağız. Bu eklenti, ödeme sürecini kısaltmanıza ve dönüşüm oranlarınızı artırmanıza yardımcı olacaktır. Yalnızca tek sayfalık bir ödeme oluşturmakla kalmaz, aynı zamanda gereksiz ödeme alanlarını kaldırabilir, hızlı satın alma düğmesi ekleyebilir ve daha fazlasını yapabilirsiniz.

Direct Checkout ile tek sayfalık ödeme

Direct Checkout'un temel özelliklere sahip ücretsiz bir sürümü ve 19 USD'den başlayan (tek seferlik ödeme) daha fazla işlevselliğe sahip 3 premium planı vardır.

İlk önce eklentiyi indirin. Bunu bu bağlantıdan veya WordPress kontrol panelinizden yapabilirsiniz. Etkinleştirdikten sonra WooCommerce > Direct Checkout'a gidin. Burada, kullanıcıları mağazadan ve tek ürün sayfalarından doğrudan ödeme sayfasına yönlendirmesi için aşağıdaki gibi ayarlayın.

  • Sepete eklendi uyarısı : "Sepeti görüntüle" uyarısını doğrudan ödeme ile değiştirir
  • Sepete eklendi bağlantısı : "Sepeti görüntüle" bağlantısını doğrudan ödeme ile değiştirir
  • Sepet yönlendirme : Bu, Sepete ekle düğmesinin davranışını değiştirmenize olanak tanır
  • Sepete yönlendirme : Sepetlerine bir şey ekledikten sonra kullanıcıları nereye yönlendireceğinizi seçebilirsiniz. Bu durumda, onları kasaya yönlendireceğiz
  • Sepet URL'sini değiştir : Alışveriş yapanlar sepetlerine bir şey ekledikten sonra onları ödeme sayfasına yönlendireceğiz, alışveriş sepeti URL'sini ödeme bağlantısıyla değiştireceğiz

WooCommerce tek sayfalık ödeme oluşturun - Doğrudan Ödeme

Bu değişikliklerin mağaza, tek ürün ve kategori sayfaları için geçerli olacağını lütfen unutmayın. Ek olarak, devre dışı bırakacağımız için kullanıcıları sepete götüren herhangi bir bağlantınız olmadığından emin olun.

Bu kadar! Müşterileri ürün ve mağaza sayfalarından doğrudan ödeme sayfasına yönlendirerek ödeme sürecini basitleştirdiniz. Bunun da ötesinde, alışveriş yapanlar siparişlerini ödeme sayfasında düzenleyebilir ve onaylayabilir.

WooCommerce Direct Checkout'un ücretsiz sürümüyle tek sayfalık bir ödeme oluşturabilirsiniz, ancak ödemenizi bir sonraki düzeye taşımak için daha fazla özellik istiyorsanız, bazı premium planlara göz atabilirsiniz.

2) Programlı olarak tek sayfalık bir ödeme oluşturun

Bu bölümde, eklentiyle oluşturduğumuz tek sayfalık ödemeye işlevler eklemek için bazı PHP betikleri ve CSS stili kullanacağız. Bu nedenle, ilk bölüme bir göz atmanızı ve eklentiyi tek bir sayfa ödemesi oluşturmak için kurup kurmanızı öneririz. Kelimenin tam anlamıyla birkaç dakika sürecek.

Bunu yaptıktan sonra , tek sayfalık ödeme sayfanızı programlı olarak nasıl tamamen özelleştireceğinizi görelim.

NOT : Bazı temel tema dosyalarını düzenleyeceğimizden, başlamadan önce sitenizin bir yedeğini aldığınızdan ve sitenizde bir alt temanın yüklü olduğundan emin olun. Bu alt tema eklentilerinden herhangi birini kullanabilir veya bu kılavuzu izleyerek kendi başınıza bir tane oluşturabilirsiniz.

2.1) Ödeme sayfasına ürün meta verilerini ekleyin

Kullanıcının satın aldığı ürün hakkında bazı bilgiler ekleyerek başlayalım. Ödeme sayfasında ürünün adını, küçük resmini ve açıklamasını görüntüleyeceğiz.

Sepet sayfasını devre dışı bıraktığımız için, sepete ürün ekledikten sonra alışveriş yapanlar ödeme sayfasına yönlendirilecektir. Sepet sayfası gizli olsa bile, tüm ürün bilgilerini buradan almak için kullanabiliriz.

Bunu yapmak için, aşağıdaki kodu alt temanızın functions.php dosyasına yapıştırmanız yeterlidir:

 // ürün meta verilerini görüntülemek için kanca
 add_action('woocommerce_checkout_before_customer_details','QuadLayers_product_meta');
 function QuadLayers_product_meta(){
 echo '<div class="custom-product"><h2>Bir ' satın almak üzeresiniz;
 $cart = WC()->cart->get_cart();
 foreach( $cart as $cart_item_key => $cart_item ){
 $ürün = $cart_item['veri'];
 echo $product->get_name()."</h2>";
 echo $ürün->get_image();
 echo "<span>".$product->get_description()."</span>";
 }
 echo "<h3>Aşağıdaki formu doldurarak siparişinizi tamamlayın</h3>";
 }

Bunu test etmek için herhangi bir üründeki satın al düğmesine tıklayın ve ödeme sayfasına yönlendirildikten sonra şöyle bir şey göreceksiniz:

Ödeme sayfasına ürün meta verileri ekleyin

2.2) WooCommerce ödeme şablon dosyasının üzerine yazma

Ödeme sayfasını yazdırmaktan sorumlu dosya form-checkout-php php'dir ve şablonlar klasöründeki WooCommerce eklentisinde bulunur: /woocommerce/templates/checkout.

Bu dosyanın üzerine yazmak için, orijinal dosyayı WooCommerce eklentisinden kopyalayın ve alt temanızın WooCommerce dizininin içindeki ödeme klasörüne yapıştırın.

WC ödeme şablon dosyasının üzerine yazma

Varsayılan WooCommerce ödemesinde, düzen iki sütuna ayarlanmıştır. Fatura, sevkiyat ve ek formlar ilk sütunda, sipariş ayrıntıları diğer sütunda görüntülenir.

Formları kapsayan <div> öğesinin HTML sınıfını col2-set'ten col1-set'e aşağıdaki gibi düzenleyerek bunu değiştirebilirsiniz:

 <div class="col1-set">

Bu basit sürümden sonra, tüm formlar aşağıdaki gibi tam genişlikte tek bir sütunda görüntülenecektir:

Tam genişlikte ödeme formu

Ardından, sipariş ayrıntılarının başlığını düzenleyeceğiz ve aşağıdaki komut dosyasıyla "Siparişiniz" yerine "Sipariş incelemesi" olarak değiştireceğiz:

 <h3><?php esc_html_e('Sipariş incelemesi', 'woocommerce'); ?></h3>

Bunlar, burada yapabileceklerinize dair sadece birkaç basit örnek. Daha ileri gitmekten ve kendi özelleştirmelerinizi yapmaktan çekinmeyin. Burada yerel WordPress işlevlerinden herhangi birini kullanabilirsiniz. Ödeme kancaları hakkında daha fazla bilgi için bu makaleye göz atabilirsiniz.

WooCommerce şablonlarını programlı olarak nasıl özelleştireceğiniz hakkında daha fazla bilgi için bu tam kılavuza bakın.

2.3) Ödeme sayfasına sepet ekleyin

Ödeme sayfasında bazı kısa kodları kullanabilirsiniz, bu nedenle sepeti buraya eklemek isterseniz WooCommerce sepet kısa kodunu aşağıdaki gibi kullanabilirsiniz:

 echo do_shortcode(' [ woocommerce_cart ] ');

Sepeti sipariş detaylarından hemen önce görüntülemek için, bu PHP betiğini alt temanızın functions.php dosyasına yapıştırın:

 add_action('woocommerce_checkout_after_customer_details','QuadLayers_add_cart_checkout');
 function QuadLayers_add_cart_checkout(){
       echo do_shortcode(' [ woocommerce_cart ] ');
 }

Şimdi, ödeme formlarının sonunda, kullanıcının eklediği ürünlerin bulunduğu sepeti görmelisiniz:

Ödeme sayfasına sepet ekle

2.4) Ödeme sayfasına özel içerik ekleyin

Müşteriler sipariş detaylarını incelediklerinde, bir ödeme yöntemi seçebilir ve satın alma işlemini tamamlamak için "Sipariş Ver"e tıklayabilirler. Bu blok sağ sütunda görüntülendiğinden, dengeli bir tasarım elde etmek için sol tarafa bir miktar içerik ekleyeceğiz.

Bu, bazı iade politikalarını, ödeme yöntemlerini, teslimatı vb. açıkladığımız function.php dosyasına yapıştırılacak özel içerik işlevidir. Özelleştirmekten ve mağazanıza uyarlamaktan çekinmeyin:

 add_action('woocommerce_checkout_before_order_review','QuadLayers_add_column_before_order_review');
function QuadLayers_add_column_before_order_review(){    
    printf(' <div><h3>Siparişiniz hakkında daha fazla bilgi:</h3>
 <p>Mağazamızdan satın aldığınız için çok teşekkür ederiz. İşte bilmeniz gerekebilecek bazı yararlı bilgiler</p>
 <ul>
 <li>Mümkün olduğunca hızlı teslim etmek için elimizden gelenin en iyisini yapıyoruz, ancak optimum hizmeti sürdürmek için ürününüzün gelmesi iki iş günü kadar sürebilir</li>
 <li>İade politikalarımız, satın alma tarihinden itibaren 15 gün içinde değişim talebinde bulunmanıza olanak tanır. <a href="#">Mağaza politikalarını buradan okuyun</a></li>
 <li>Kredi kartıyla ödeme yöntemini seçerseniz, bu, bazı durumlarda teslimatta iki günlük bir gecikmeye neden olabilir</li>
 <li>Aldıklarınızdan memnun değilseniz, geri ödeme politikamıza göre geri ödeme yapmayı da seçebilirsiniz</li>
 <li>İndirim kuponunuz var mı? Notu buradan alın ve geri dönün, böylece uygulayabilirsiniz</li>
 </ul>
 </div>','woocommerce');
}

Ve bu nihai sonuçtur:

Ödeme sayfasına özel içerik ekleyin

2.5) Ödeme sayfasına biraz CSS stili ekleme

function.php dosyasında, custom-product adını verdiğimiz kendi sınıfımızı eklediğimizi göreceksiniz. Bu sınıfı, içeriği bazı CSS komut dosyalarıyla biçimlendirmek için kullanacağız. Ek olarak, özel sınıfımızı kullanmadan yeni tek sayfalık kasamızın tasarımına son dokunuşları yapabiliriz.

Bu, bu eğitimde kullandığımız tam CSS betiğidir. Basitçe kopyalayıp alt temanızın style.css dosyasına yapıştırın:

 /* Faturalandırma formu başlığını gizle */
.woocommerce-faturalandırma alanları > h3:nth-child(1){
    görüntü yok;
}
/* satın almak üzeresiniz... */
.özel ürün > h2:nth-child(1){
    metin hizalama: merkez;
}
/* resim */
img.attachment-woocommerce_thumbnail:nth-child(2){
    kenar boşluğu:otomatik;
}
/* tanım */
.özel ürün > yayılma:nth-child(3){
    kenar boşluğu:otomatik;
    genişlik: %50;
    Ekran bloğu;
}
/* Siparişinizi tamamlayın ...*/
.özel ürün > h3:nth-child(4){
    metin hizalama: merkez;
    kenar boşluğu: 25px 0 25px 0;
}
/* daha fazla bilgi.. */
.özel ürün > div:nth-child(8){
    yüzer: sol;
    genişlik:%47;
}
#Müşteri detayları{
    kenar boşluğu-alt:40px;
}

NOT : Bu gösteri için Vitrin temasını kullandık, bu nedenle farklı bir tema kullanıyorsanız veya kendi özelleştirmelerinizi eklediyseniz CSS seçicilerini ayarlamanız gerekebilir.

Bundan sonra, her şey yolunda giderse, ödeme sayfanızda aşağıdakileri görmelisiniz:

Tek sayfalık ödeme Örnek sayfası

Bu kadar! Programlı olarak tamamen özelleştirilmiş bir WooCommerce tek sayfalık ödeme oluşturdunuz.

3) Bir sayfa oluşturucu ile tek sayfalık bir ödeme oluşturun

WooCommerce'de tek sayfalık bir ödeme oluşturmak ve özelleştirmek için bir başka ilginç seçenek de bir sayfa oluşturucu kullanmaktır. Orada birkaç sayfa oluşturucu var. Bu gösteri için Site Origin'i kullanacağız. 1 milyondan fazla aktif kurulum ile bu, sadeliği ve verimliliği nedeniyle en popüler sayfa oluşturuculardan biridir.

İşlem çoğu sayfa oluşturucu için benzerdir, bu nedenle hangisini kullanırsanız kullanın, kılavuzu sorunsuz bir şekilde takip edebilmelisiniz.

İlk olarak, WordPress deposundan Site Origin'i indirin, kurun ve web sitenizde etkinleştirin. Ardından, düzenleyici ile ödeme sayfasını açın ve ona bir ad ekleyin. Buna Tek Sayfa ödeme diyeceğiz.

Gördüğünüz gibi, ödeme sayfası sadece bir Gutenberg bloğuna yerleştirilmiş bir WooCommerce kısa kodudur. Arka uçta Gutenberg bloklarını devre dışı bıraktıysanız, aynı kısa kodu eski metin düzenleyicide de görürsünüz. Kısa kod bloğunu silin ve bir sayfa oluşturucu ekleyin.

Artık sayfa oluşturucuyu kullanarak tamamen özelleştirilmiş tek sayfalık bir ödeme oluşturmaya başlayabiliriz. Sütunlara herhangi bir widget ekleyebilir ve istediğiniz düzene ayarlayabilirsiniz. eklemeniz gerektiğini unutmayın.

 [ woocommerce_checkout ]

tekrar kısa kod, aksi takdirde çalışmaz.

Ve işte en iyi kısım geliyor. Sayfa oluşturucu düzeninde mevcut widget'lardan veya modüllerden herhangi birini de kullanabilirsiniz. Ek olarak, diğer kısa kodları da ekleyebilirsiniz. Sepet ve "Hesabım" oldukça yaygın.

Bu basit bir örnektir, bu nedenle her bir widget'ı ayarlamanız ve ödeme sayfasını ihtiyaçlarınıza göre özelleştirmeniz gerekir. Ayrıca, her sayfa oluşturucunun farklı çalıştığını unutmayın, bu nedenle süreç benzer olsa da bazı şeyleri ayarlamanız gerekebilir. Genel bir öneri olarak, tam genişliğe sahip ve kenar çubuğu olmayan şablonlar genellikle en iyi sonucu verir.

4) Gutenberg blok düzenleyicisini kullanarak tek sayfalık bir ödeme oluşturun

Benzer şekilde, Gutenberg blok düzenleyicisini kullanarak WooCommerce tek sayfalık ödemenizi özelleştirebilirsiniz. Bunun için WordPress kontrol panelinizde ödeme sayfasını açın ve ödeme kısa kodlu bloğu göreceksiniz. Blok ekle düğmesine ( + ) tıklayarak ve Sütunları seçerek bu sayfaya daha fazla blok ekleyelim.

WooCommerce tek sayfalık ödeme oluşturun - Gutenmberg

Burada, ödeme sayfanızı tamamen özelleştirmek için mevcut bloklardan ve kısa kodlardan herhangi birini kullanabilirsiniz. Alternatif olarak, kodlama becerileriniz varsa, kod bloğuyla kendi HTML kodunuzu ekleyerek ödemeyi de düzenleyebilirsiniz. Bu demo için sepet ve hesabım kısa kodlarını 2 sütun halinde ekledik, böylece şöyle görünecek:

Ve bu şekilde Gutenberg blok düzenleyicisiyle WooCommerce'de kolayca tek sayfalık bir ödeme oluşturabilirsiniz.

Son ipuçları

  • Tek sayfalık bir ödeme oluştururken, ödeme işleminin ana amacını daima aklınızda bulundurun: müşterilerin siparişlerini olabildiğince kolay vermelerini sağlamak. Kullanıcıları bu amaçtan uzaklaştıran her türlü içerikten kaçınmalısınız.
  • Kullanıcıların "Sipariş ver" düğmesine basmadan önce gözden geçirmesi gereken tüm bilgiler aynı sayfada mevcut olmalıdır, böylece ödeme sayfasından her şeyi yapabilirler. Gerekli tüm bilgileri ekleyin ve kullanıcıları farklı bir URL'ye götüren bağlantılar eklemekten kaçının.
  • Kullanıcılar satın alırken uzun içerik sayfalarından hoşlanmazlar. İşleri basit ve temiz tutun ve verimli ve profesyonel bir ödeme sayfası elde etmeye odaklanın

Çözüm

Sonuç olarak, tek sayfalık ödeme, satın alma sürecini kısaltmanıza, alışveriş sepetini terk etmeyi azaltmanıza ve dönüşüm oranlarını artırmanıza yardımcı olacaktır. Bazı durumlarda, çok sayfalı ödemeler daha etkili olsa da çoğu mağaza için daha kısa ödemeler daha iyi sonuç verme eğilimindedir.

Bu kılavuzda, WooCommerce'de tek sayfalık bir ödeme oluşturmanın farklı yollarını gördük:

  • bir eklenti ile
  • programatik olarak
  • Bir sayfa oluşturucu ile
  • Gutenberg blok düzenleyicisini kullanma

Hızlı ve verimli bir çözüm istiyorsanız, Direct Checkout'u kullanmak en iyi seçiminizdir. Bu freemium eklentisi, birkaç dakika içinde tek sayfalık bir ödeme oluşturmanıza olanak tanır ve ayrıca, ödemenizi iyileştirmenize ve satışlarınızı artırmanıza yardımcı olacak çeşitli özellikler içerir. Örneğin, ödeme alanlarını kaldırabilir, hızlı satın alma ve hızlı görüntüleme düğmeleri ekleyebilir ve çok daha fazlasını yapabilirsiniz. Ek bir eklenti yüklemek istemiyorsanız ve bir sayfa oluşturucu kullanıyorsanız, ödeme sayfasını Gutenberg blok düzenleyicisini veya sayfa oluşturucunuzu kullanarak oluşturabilirsiniz.

Öte yandan, kodlama becerileriniz varsa, ödeme sayfanızı düzenlemek için daha fazla seçeneğiniz vardır. Ödemeyi Direct Checkout eklentisiyle oluşturduktan sonra, ödemenizi tamamen özelleştirmek için PHP ve CSS komut dosyaları ekleyebilirsiniz. Bu yazıda birkaç örnek gördük ama yapabileceğiniz daha çok şey var. Bunları bir üs olarak kullanmaktan çekinmeyin ve sizin için en iyi olanı bulmak için oynayın.

WooCommerce'de tek sayfalık bir ödeme oluşturmak için favori yönteminiz hangisi? Eklememiz gereken başka bir şey biliyor musunuz? Aşağıdaki yorumlar bölümünde bize bildirin!