Elementor ve HappyAddons ile WooCommerce Ödeme Sayfası Nasıl Özelleştirilir

Yayınlanan: 2022-09-16

Harika ödeme sayfaları, dönüşüm oranınızı büyük ölçüde etkiler. Bir WooCommerce mağazanız varsa veya bir mağaza açmayı planlıyorsanız, müşterilere rahat bir ödeme süreci sağlamanız gerekir.

Dijital Pazarlama Enstitülerine göre, ödeme optimizasyonu dönüşümleri %35,62 oranında artırabilir . Bir ürünün kalitesinden bağımsız olarak, sorunsuz bir ödeme deneyimi sunamazsanız müşteriler web sitenizden ayrılabilir.

Ama endişelenme. Aşağıdaki blogda, WooCommerce ödeme sayfalarını estetik ve bazı sektördeki en iyi uygulamalarla nasıl özelleştireceğinize dair adım adım bir eğitim göreceksiniz. İşin iyi yanı, bu kılavuzu takip etmek için herhangi bir kodlama deneyimine ihtiyacınız olmayacak. Hadi okumaya başlayalım.

WooCommerce Ödeme Sayfanızı Neden Özelleştirmelisiniz?

Why Should You Customize WooCommerce Checkout Page

WooCommerce eklentisini kullanarak hemen hemen her türden e-ticaret web sitesi oluşturabilirsiniz. Eklenti yüklendiğinde, web siteniz otomatik olarak varsayılan bir ödeme sayfası oluşturacaktır. Ancak varsayılan ödeme sayfası o kadar basittir ki, müşterilere modaya uygun deneyimler sunmanıza yardımcı olamaz.

WooCommerce ödemesini özelleştirmenin bu kadar önemli olmasının nedeni budur. Ödeme sayfanızın kullanımı kolay ve gezinmesi zor olmadıkça, müşterilerin web sitenizi terk etme ve bir daha asla geri dönmeme olasılığı daha yüksektir. Aşağıda, WooCommerce ödeme sayfanızı özelleştirmeniz için bazı temel nedenler bulunmaktadır.

1. Gereksiz Alanları Kaldırın

Çoğu müşteri, ödeme sayfasında çok fazla kişisel bilgi istemenizi kolay karşılamayacaktır. Kimse gereksiz kişisel bilgileri başkalarıyla paylaşmayı sevmediğinden, yalnızca ödeme işlemi için zorunlu olan alanları (ad, e-posta, telefon numarası, adres vb.) ekleyin.

2. Birden Fazla Ödeme Seçeneği Ekleyin

Müşteriler tercih ettikleri ödeme seçeneklerini bulamazlarsa, ödemeden vazgeçme oranı inanılmaz derecede yüksek olabilir. WooCommerce ödeme sayfanıza mümkün olduğunca ödeme yöntemleri eklemeye çalışmalısınız. Teslimatta nakit ödeme, banka çeki, banka ve kredi kartları, mobil ödeme ve elektronik para transferleri gibi.

3. Sayfa Tasarımını ve Düzenini Değiştirin

Izgara düzeni, çok sayıda web içeriğini mümkün olan en kısa alanda görüntülemenin harika bir yoludur. İki sütunlu ızgara, şu anda WooCommerce ödeme sayfasını tasarlamada en popüler stildir . WooCommerce ödeme sayfasını özelleştirerek ızgara sistemine daha fazla çeşitlilik getirebilirsiniz.

Use Grid Layout in WooCommerce Checkout page

4. Ek Bilgileri Görüntüle

Müşterilerin okumasını istediğiniz özel bir mesajınız varsa ödeme sayfasında gösterebilirsiniz. Örneğin, yaklaşan teklifler, belirli ürünlerdeki indirimler, yeni kullanıcılar için promosyon kodları vb. hakkında onları bilgilendirebilirsiniz.

5. Tüm Cihazlarda Duyarlı Hale Getirin

Ödeme sayfanızı tüm cihazlar için mükemmel şekilde yanıt vermediğiniz sürece, birçok potansiyel müşteriyi kaçıracaksınız. Ödeme sayfasını özelleştirmek, tüm cihazlarda ( masaüstü bilgisayarlar, dizüstü bilgisayarlar, tabletler ve akıllı telefonlar ) iyi görünmesini sağlayabilir.

Elementor ve HappyAddons ile WooCommerce Ödeme Sayfası Nasıl Özelleştirilir

WooCommerce ödeme sayfasını özelleştirmek bugün çok kolay. Elementor , istediğiniz herhangi bir web sayfasını oluşturabileceğiniz bir sürükle ve bırak sayfa oluşturucusudur. Ayrıca, alışveriş sepeti sayfası, ürün sayfası, üst bilgi, alt bilgi gibi diğer web bölümlerini özelleştirmeniz gerekirse, bunu bu eklentiyi kullanarak yapabilirsiniz.

HappyAddons , e-Ticaret sitenizin işlevlerini daha da güçlendirebilen güçlü bir Elementor eklentisidir. Burada, WooCommerce ödeme sayfalarının nasıl düzenleneceğini göstermek için bu eklentileri kullanacağız.

WooCommerce Ödeme Sayfasını Özelleştirmek için Ön Koşullar

  • WooCommerce
  • eleman
  • Mutlu Eklentiler
  • HappyAddons Pro

Bu eklentilerin web sitenize yüklendiğinden ve uygun şekilde yapılandırıldığından emin olun. Ardından, aşağıda gösterilen adımları izlemeye başlayın.

Adım 01: Bir Ödeme Sayfası Oluşturun

WooCommerce eklentisini yükledikten sonra, sayfa bölümünde varsayılan bir WooCommerce ödeme sayfası alacaksınız. Ödeme sayfasını özelleştirmek için Elementor ile açabilirsiniz.

Default WooCommerce Checkout Page

Ancak isterseniz yeni bir sayfa oluşturabilir, onu varsayılan WooCommerce ödeme sayfası olarak bağlayabilir ve ardından onu Elementor ile özelleştirebilirsiniz. Yeni bir WooCommerce ödeme sayfasının nasıl oluşturulacağına ve varsayılan olarak nasıl ayarlanacağına ilişkin aşağıdaki videoyu izleyin .

En iyi uygulama, yeni bir ödeme sayfası oluşturmanız ve ardından bunu Elementor ile özelleştirmenizdir. Ardından, aşağıdaki videoyla Elementor tuvalinde yeni ödeme sayfasını açın.

Adım 02: WC Checkout Widget'ını Sürükleyip Bırakın

Elementor widget arama çubuğuna WC Checkout yazın. Aşağıda görünen widget'ı alacaksınız. Elementor tuvalinin seçtiğiniz bölümüne sürükleyip bırakın.

Drag and drop the WC Checkout widget to customize WooCommerce checkout page

Widget'ı yerleştirdikten hemen sonra, bir ödeme sayfası için gerekli olan tüm alanlar tuvalde görünecektir. Ardından, Elementor panelinde bulunan seçenekleri kullanarak bu alanları istediğiniz gibi değiştirmelisiniz.

Customize WooCommerce Checkout Page with Elementor

Adım 03: Ödeme Sayfası için bir Düzen seçin

Genel bölümünden bir düzen stili seçin. Genel bölümde iki düzen vardır: Bir Sütun ve İki Sütun .

Change the Layout Style of WooCommerce Checkout Page

İki Sütun düzenini seçerseniz, WooCommerce sayfasını özelleştirmek için bazı ek seçenekler (Stack-On, Columns Gap ve Column Width) elde edersiniz. İki Sütun düzeninin nasıl çalıştığını keşfetmek için aşağıdaki videoyu izleyin.

Adım 04: Ödeme Sayfasını Stilize Edin

Stil bölümünde, ödeme sayfasını tasarlamak için on bir seçenek daha alacaksınız. Orada bulacağınız seçeneklerin listesi aşağıdadır.

  • Bölümler
  • Girişler
  • Kupon Çubuğu
  • Kupon Kutusu
  • Başlıklar
  • Fatura Detayları
  • Ek Bilgiler
  • Siparişi gözden geçir
  • Ödeme şekli
  • Gizlilik Politikası
  • Buton
How to Stylize the WooCommerce Checkout Page

Bu seçenekleri kullanarak arka plan rengini, alan rengini, etiket tipografisini, giriş tipografisini ve tipografi rengini değiştirebilirsiniz. Bu seçeneklerle neler yapabileceğinizi keşfedelim.

  • Bölümler

Bölüm seçeneğinden bölümler arasındaki boşluğu düzenleyebilir, arka plan renklerini değiştirebilir ve alan kutularına gölgeler ekleyebilirsiniz.

  • Girişler

Giriş bölümü, ödeme sayfanızdaki alanların yüksekliğini, rengini, aralığını, tipografisini ve kutu gölgelerini özelleştirmenize olanak tanır.

  • Kupon Çubuğu

Kupon Çubuğundan rengi, tipografiyi ve kupon bağlantısını değiştirebilirsiniz.

  • Kupon Kutusu

Kupon Kutusu, giriş metni tipografisini, kutu rengini, düğme tipografisini ve düğme rengini değiştirmenizi sağlar.

  • Başlık

Başlık seçeneğinden ödeme sayfasının ana başlıklarının rengini ve tipografisini değiştirebilirsiniz.

  • Fatura Detayları

Fatura Ayrıntıları, giriş metni rengini, alan rengini, arka plan rengini, etiket tipografisini ve daha fazlasını değiştirmenize olanak tanır.

  • Ek Bilgiler

Alıcılar için bir not tutmak istiyorsanız, bu bölüm bunu yapmanıza izin verecektir. Metin alanını, giriş metni stilini, kutu gölgesini, aralığı, vurgulu stili vb. özelleştirmek için bu seçeneği kullanabilirsiniz.

  • Siparişi İncele

Siparişi İncele seçeneği, müşterilerin sipariş edecekleri ürünlerin özetini görmelerini sağlar. Buradan tipografiyi, arka plan tipografisini, rengi, metin rengini, aralığı ve daha fazlasını değiştirebilirsiniz.

  • Ödeme şekli

Ödeme yöntemi seçeneğinden ödeme kutunuzun etiket yazı tipi stilini, rengini, tipografisini, arka plan rengini ve mesaj kutusunu düzenleyebilirsiniz.

  • Gizlilik Politikası

Ödeme sayfanızdaki ödeme yöntemi kutusunun altında Gizlilik Politikasını alacaksınız. Bu seçeneği kullanarak, bölümün metin rengini, tipografisini, bağlantı üzerine gelme rengini ve bağlantı rengini özelleştirebilirsiniz.

  • Buton

Sonunda, ödeme sayfanızdaki sipariş verme Düğmesini özelleştirmek isteyebilirsiniz. Düğme seçeneği, düğme metnini, tipografiyi, rengi, arka plan rengini ve daha fazlasını değiştirmenize olanak tanır.

Ek rehberlik için lütfen bu HappyAddons widget'ını kullanarak WooCommerce'de ödeme sayfalarının nasıl özelleştirileceğine ilişkin bu belgeleri ziyaret edin. Widget'ı kullanarak ödeme sayfanızı özelleştirme konusunda hala herhangi bir sorunla karşılaşırsanız, yorum bölümünden bize bildirmenizi rica ederiz. Ekip üyelerimizden biri yakında size cevap verecektir.

Adım 05: Ödeme Sayfasını Mobil Duyarlı Hale Getirin

Sayısız istatistiklere göre, bugün e-ticaret satışlarının yaklaşık %50 ila %60'ı mobil cihazlardan yapılıyor. Bu nedenle, WooCommerce ödeme sayfanızın mobil cihazlar için mükemmel şekilde optimize edildiğinden emin olmalısınız.

Elementor panelinin alt kısmından Duyarlı Mod düğmesine tıklamanız yeterlidir. Sayfanızı farklı ekran boyutlarında görüntüleyebileceğiniz ve değişiklikleri uygulayabileceğiniz Elementor tuvalinin üzerinde bir seçenek açılacaktır. Aşağıdaki videoyu izleyin.

Endişelenmeyin, mobil veya tablo görünümü için bir şeyi değiştirirseniz, masaüstü görünümünde herhangi bir değişiklik yapmaz. Değişiklikler söz konusu cihaza uygulanacaktır.

Şimdi, bu widget'ı kullanarak oluşturduğumuz aşağıdaki WooCommerce ödeme sayfasını önizleyin.

WooCommerce Checkout Page Example

Bonus – Ödeme Sayfalarında Dönüşümleri Artırmak için En İyi 7 Uygulama

XP2 Dynamic Yields'e göre , e-ticaret ürünlerinin %70'inden fazlası, çevrimiçi mağazaların neden her yıl yaklaşık 18 milyar dolar kaybettiği için alışveriş sepetinden çıkarılıyor. Bunun arkasındaki temel neden, çoğu e-ticaret web sitesinin müşterilere birinci sınıf kullanıcı deneyimleri sunamamasıdır.

Bir e-ticaret siteniz varsa veya yeni bir site kurmayı planlıyorsanız, dönüşüm oranınızı artırmak için ödeme sayfanızda aşağıdaki uygulamaları uygulayın.

1. Ödeme Alanlarına İsimler Verin

WooCommerce ödeme sayfasının alanlarını etiketlemek, müşterilerin nereye gideceklerini ve ne yapacaklarını bilmelerini kolaylaştırır. Ödeme sürecini hızlandıracak ve müşteriler için değerli zaman kazandıracaktır.

2. Açıklayıcı İpuçları Ekleyin

Araç ipucu, birisi imlecini belirli web öğelerinin üzerine getirdiğinde açılan bir metin parçacığıdır. Çok fazla alan kullanmadan ödeme sayfasına ek bilgiler eklemenizi sağlar. Araç ipucu, HappyAddons'ın ücretsiz bir özelliğidir. Web bölümlerinize araç ipuçlarını nasıl ekleyeceğinizi öğrenin.

3. Cazip Promosyonlar ve İndirimler Sunun

Teklifler ve indirimler, ürün satışlarınızı bir gecede artırma gücüne sahiptir. Statista'nın yakın tarihli bir istatistiğine göre , ABD halkının yaklaşık %90'ı yıl boyunca bir kupon veya indirim kodu kullanıyor. Aşağıdaki gibi satışlarınızı artırmak için promosyonlar ve indirimler uygulamaya çalışın.

  • Yüzde Kapalı
  • Hoşçakal Bir Al Bir (BOGO)
  • Ücretsiz kargo
  • Hediye kartı
  • Sadakat Puanı Kuponu

4. Kullanıcıların Ürün Miktarını Güncellemesine İzin Verin

Alıcılar istedikleri zaman fikirlerini değiştirebilirler. Daha ödeme düğmesine basmadan ürün miktarını değiştirmek isteyebilirler. Müşterilerin ürün miktarını değiştirebilmesi için ödeme sayfanızda seçeneğiniz olmalıdır. Aksi takdirde, kötü bir kullanıcı deneyimine neden olacak sepet sayfasını ziyaret etmeleri gerekir.

5. Güvenlik ve Güven Rozetini Göster

Güvenlik ve güven rozetleri göstermek, müşterilere bu sitenin ürün satın almak için yasal bir site olduğuna dair güvence verir. Müşterilerin banka/kredi kartı numaraları, telefon numaraları, e-posta adresleri vb. kişisel bilgileri paylaşma konusunda kendilerini güvende hissetmelerini sağlayacaktır.

Show Security Badges on eCommerce Checkout Page

6. İade ve İade Süresini Göster

Shopify'dan çevrimiçi ürünlerin %20'sinden fazlası birçok nedenden dolayı perakendeciye iade edilir . Bu nedenle müşteriler, çevrimiçi satın almadan önce iade ve geri ödeme politikasına çok önem veriyor. Ürün ve sepet sayfalarının yanı sıra ödeme sayfasında da iade ve geri ödeme süresini netleştirmeniz gerekir.

7. İlgili Ürünleri Artırın

Upselling, müşterileri başlangıçta planladıklarından daha fazla ürün veya hizmet satın almaya teşvik eden bir satış tekniğidir. İlgili ürünleri ödeme sayfasında göstererek, müşterileri bu ürünlerden daha fazla satın almaya ikna edebilir ve önemlerini hissettirebilirsiniz. Daha fazla satış için bu ürünleri indirimli fiyattan sunabilirsiniz.

8. Mevcut Kullanıcılar için Benzersiz Avantajlar Sunun

Mevcut müşterilere daha fazlasını satın almaya ikna etmek için heyecan verici teklifler sunmak, herhangi bir e-ticaret organizasyonu için harika bir pazarlama yaklaşımıdır. Kayıtlı olmayan kullanıcılardan daha değerli olduklarını hissettirecektir. HappyAddons'ın Koşullu Görüntüleme özelliğini kullanarak kayıtlı kullanıcılarınıza kupon ve promosyon kodları sunabilirsiniz.

WooCommerce Ödeme Sayfasını Özelleştirme Hakkında SSS

Bu makale boyunca henüz yanıtlanmamış sorularınız varsa, bu bölüm bunları yanıtlayabilir. Burada, WooCommerce ödeme sayfasının nasıl özelleştirileceğiyle ilgili en sık sorulan bazı soruları ele alacağız.

WooCommerce ödeme sayfası nedir?

WooCommerce ödeme sayfası, müşterilerin bir ürünü satın almak için ödeme bilgileri, fatura adresi, promosyon kodu vb. tüm gerekli bilgileri sağladığı son açılış sayfasıdır.

WooCommerce ödeme sayfası ne içermelidir?

WooCommerce ödeme sayfasına zorunlu olarak aşağıdaki bölümleri eklemelisiniz.

1) Fatura ayrıntıları
2) Teslimat adresi
3) Sipariş Özeti
4) Ödeme yöntemleri
5) Kayıt formu bağlantısı (yalnızca yeni kullanıcılar için)

WooCommerce çok sayfalı ödeme nedir?

WooCommerce çok sayfalı ödeme, bir alıcının satın alma işlemini tamamlamak için birden fazla sayfayı ziyaret etmesi gereken bir yaklaşımdır.

Tek sayfalık WooCommerce ödemesi nedir?

Tek sayfalık WooCommerce ödemesinde, alıcıların satın alma yapmak için birden fazla sayfayı ziyaret etmesi gerekmez. Çevrimiçi sipariş vermek için her şeyi tek bir sayfada tamamlayabilirler. Çok zaman kazandırdığından ve alıcılara daha iyi bir deneyim sunduğundan, tek sayfalık WooCommerce ödeme, dönüşüm için çok etkili olmuştur.

E-Ticaret alışveriş sepetini terk etme oranı nasıl düşürülür?

Aşağıdaki yöntemlerle e-ticaret alışveriş sepetini terk etme oranını düşürebilirsiniz.

1) Konuk ödeme seçeneği sunun
2) Birden fazla teslimat seçeneği sağlayın
3) Gereksiz aşırı fiyatlar talep etmeyin
4) İade ve geri ödeme seçeneğinden emin olun
5) Buraya ücretsiz bir nakliye seçeneği ekleyin
6) 7/24 müşteri hizmetleri sağlayın
7) Alışveriş sepetindeki ürünleri hatırlatmak için müşterilere e-posta gönderin

WooCommerce misafir ödemesi nedir?

WooCommerce'de misafir ödeme alıcıları, bir hesaba giriş yapmadan veya herhangi bir bilgiyi (kullanıcı adı, şifre, teslimat adresi, vb.) veritabanına kaydetmeden çevrimiçi mağazadan satın alma işlemi gerçekleştirir. Kişisel bilgilerini e-ticaret siteleriyle paylaşmayı sevmeyen pek çok kişi var. WooCommerce misafir ödeme, onlar için en iyi seçenektir.

WooCommerce Ödeme Sayfasının Nasıl Özelleştirileceğine İlişkin Son Çıkarımlar

WooCommerce ödeme sayfasını özelleştirmek, alıcılar için olumlu bir alışveriş deneyimi sağlamak için önemlidir. Bu, potansiyel müşterilerin arzu ettikleri ürünleri satın almak için geldikleri son sayfadır. Bu nedenle, bunu basit, kolay ve göz alıcı tutmak, herhangi bir e-ticaret işinin başarısı için bir zorunluluktur.

Bu kılavuzda, WooCommerce ödeme sayfasını özelleştirmenin en kolay yolunu açıkladık. Bu ipuçlarını izleyerek, daha önce deneyiminiz olmasa bile WooCommerce mağazanız için bir ödeme sayfası oluşturabileceğinizi umuyoruz.

Hâlâ herhangi bir sorununuz varsa, bize aşağıya bir yorum bırakın, size yardımcı olmaktan memnuniyet duyarız! Ayrıca, düzenli güncellemeler almak için Facebook ve Twitter kanallarımızı takip edin.

Haber bültenimize abone ol

Elementor ile ilgili en son haberleri ve güncellemeleri alın