WooCommerce Ödeme Sayfalarını Özelleştirmenin 2 Etkili Yolu

Her yıl, e-ticaret markaları, alışveriş sepetinin terk edilmesi nedeniyle 18 milyar dolarlık satış geliri kaybediyor. Kök nedenlerinden biri karmaşık ödeme sürecinde yatmaktadır.

Ödeme sayfası, tarayıcıları müşterilere dönüştürmek için son bir kapı görevi görür. İdeal bir ödeme sayfası, kullanıcılar için baştan sona sorunsuz bir işlem sağlamalıdır. Daha fazla dönüşüm sağlamak ve mağazalarınız için alt satırı iyileştirmek istiyorsanız, WooCommerce ödeme sayfanızı optimize etmek bir zorunluluktur!

Bu makalede, WooCommerce ödeme sayfalarını neden özelleştirmeniz gerektiğini açıklayacağız. Ayrıca, ödeme sayfanıza stil vermenin ve bunlardan yararlanmanın 2 etkili yolu da öne çıkar.

Başlayalım!

• WooCommerce Ödeme Sayfalarını Tanıyın
• WooCommerce Ödeme Sayfalarını Neden Özelleştirmelisiniz?
• WooCommerce Ödeme Sayfalarını Kodla Manuel Olarak Özelleştirme
• Eklentileri Kullanarak WooCommerce Ödeme Sayfalarını Düzenleyin

WooCommerce Ödeme Sayfalarını Tanıyın

Varsayılan olarak, WooCommerce ödeme sayfası oldukça sıkıcı ve basit görünüyor. Görevi, alışveriş yapanların ad ve soyadı, adres, telefon numaraları, e-posta adresi, sipariş notları ve fatura ayrıntıları vb. gibi bazı temel bilgileri girmesini istemekten başka bir şey değildir.

Bu ayrıntılar, web sitelerinin ödeme verilerini işlemesi ve müşterilerin satın alma işlemini tamamlaması için gerekli olsa da, dönüşümü artırmada veya alışveriş sepetini terk etmeyi azaltmada yardımcı olmuyorlar.

Bunun da ötesinde, varsayılan ödeme sayfası, stratejik bir düzen sunmanın yanı sıra önemli bilgileri hedeflemez. Bu nedenle, ödeme sayfanıza hem tasarım hem de içerik açısından birkaç ince ayar yapmanız gerekir.

WooCommerce ödeme sayfalarını özelleştirmenin 2 etkili yoluna dalmadan önce, ödeme sayfası özelleştirmesinin faydalarını daha fazla tartışalım.

WooCommerce Ödeme Sayfalarını Neden Özelleştirmelisiniz?

İlk ve en önemli fayda, müşterilere sorunsuz bir çevrimiçi alışveriş deneyimi sunan hızlı ve kolay satın alma işlemleri sağlamaktır.

Ödeme sayfasını özelleştirerek, tüm tüyleri süpürebilir ve yalnızca temel ayrıntılara odaklanabilirsiniz. Müşterilerden, birden fazla sayfada birçok alan girişi ile ödeme sürecini tamamlamalarını istemek, onların enerjisinin tükenmesine neden olabilir. Bu, yüksek bir sayfa bırakma şansına yol açacaktır.

Ayrıca, WooCommerce ödeme sayfalarını özelleştirmeye çalışmak, mağazanıza benzersiz, profesyonel bir görünüm ve his verir. Varsayılan olanı bırakmak, sitenizi oradaki binlerce WooCommerce mağazası arasında bir taş gibi batırır. Tasarım da dahil olmak üzere ödeme sayfanızı optimize etmek, mağazanızın kalabalığın arasından sıyrılmasını ve müşterilerin ilgisini çekmesini sağlayacaktır.

Sonuç olarak, bu fikirler aynı amaca yöneliktir: alışveriş sepetini terk etmeyi ortadan kaldırmak.

Gerçek mekanda faaliyet gösteren mağazalardaki alıcılar sepetlerini neredeyse hiç bırakmazken, çevrimiçi alışveriş sepetlerinde vazgeçme oldukça sık görülür. Burada, ödeme sayfaları için ortalama alışveriş sepetini terk etme oranları %87 kadar yüksektir.

Baymard enstitüsü araştırmasına göre, ödeme sırasında terk edilme nedenleri arasında çok uzun veya karmaşık ödeme süreci %27'dir.

Sonuç olarak, alışveriş sepeti bırakma oranını azaltmak için “ödeme öncesi” sürecinde kullanıcı deneyimine dikkat etmelisiniz.

Daha iyi bir kullanıcı deneyimi sağlamanın çeşitli yolları vardır, örneğin:

• Ödeme şablonlarını ve tasarımlarını değiştirme
• Alan ekleme, kaldırma ve yeniden düzenleme
• Zorunlu alanları isteğe bağlı yapmak
• Yer tutucuyu ve etiketleri optimize etme
• Ücretsiz gönderim maliyetlerini tetikleme
• Tek sayfalık ödeme oluşturma

Bu eğitimde, ödeme alanlarını optimize etmeye odaklanacağız. WooCommerce ödeme sayfalarını kodlu ve kodsuz nasıl özelleştireceğinizi öğrenmek için sonraki bölümleri okumaya devam edin.

WooCommerce Ödeme Sayfalarını Kodla Manuel Olarak Özelleştirme

WordPress teknolojisi konusunda bilgiliyseniz ve PHP dosyalarına ve Javascript'e dokunduğunuzda kendinize güveniyorsanız, özel kodlar kullanarak ödeme sayfanızı özgürce düzenleyebilirsiniz.

Yer tutucu metnini değiştirme, alan ekleme ve kaldırma ve zorunlu bir alanı isteğe bağlı hale getirme dahil, ödeme alanlarını düzenlemeniz için size bazı kod parçacıkları sağlayacağız. Endişelenme, beynini dağıtmaz!

Ödeme Alanlarını Düzenleyin

Ödeme alanlarınızı düzenlemek için sitenizin function.php dosyasını ve WooCommerce filtrelerini kullanma. Bilmediğiniz gibi, WooCommerce, ödeme alanlarını neredeyse istediğiniz gibi özelleştirmenize izin veren bir eylemler ve filtreler listesi sunar, yani:

• woocommerce_checkout_fields
• woocommerce_billing_fields
• WooCommerce_shipping_fields
• woocommerce_checkout_before_order_review
• woocommerce_checkout_before_customer_details
• woocommerce_after_checkout_form

Ardından, woocommerce_checkout_fields filtresini kullanmak herhangi bir alanı geçersiz kılmanızı sağlayacağından, size nasıl bağlanacağını ve görüntülenen metni nasıl değiştireceğinizi, alanları tamamen ekleyip kaldıracağınızı göstereceğiz.

Yer Tutucu Metni Değiştir

order_comments alanlarındaki yer tutucu metni değiştireceğimizi varsayarsak. Varsayılan olarak şöyle görünür:

 _x('Siparişinizle ilgili notlar, örneğin teslimat için özel notlar.', 'yer tutucu', 'woocommerce')

Bunu değiştirmek için bu kod parçacığını function.php dosyanıza ekleyin:

 // Bağla

add_filter('woocommerce_checkout_fields', 'custom_override_checkout_fields');

// Bağlanmış fonksiyonumuz - $fields filtreden geçirilir!

işlev custom_override_checkout_fields( $alanlar) {

$fields['order']['order_comments']['placeholder'] = 'Yeni yer tutucum';

$alanlarını döndür;

WooCommerce Ödeme Sayfasına alanlar ekleyin

1. Ödeme sayfanızı düzenlemeye başlamak için aşağıdaki kodu function.php dosyanıza ekleyin:

 <?php

/**

* Ödeme sayfasına alanı ekleyin

*/

add_action('woocommerce_after_order_notes', 'customise_checkout_field');

işlev customise_checkout_field($checkout)

{

yankı '<div><h2>' . __('Başlık') . '</h2>';

woocommerce_form_field('özelleştirilmiş_alan_adı', dizi(

yazın' => 'metin',

'sınıf' => dizi(

'alan-sınıfı form-satır çapında'

),

'label' => __('Ek Alanı Özelleştir'),

'yer tutucu' => __('Kılavuz'),

'gerekli' => doğru,

), $checkout->get_value('customized_field_name'));

yankı '</div>';

}

Bu kodu ekledikten sonra ödeme sayfanızda ek bir alan görünecektir:

2. Veri doğrulama için aşağıdaki kodu ekleyin.

 <?php

/**

* Ödeme İşlemi

*/

add_action('woocommerce_checkout_process', 'customise_checkout_field_process');

işlev customise_checkout_field_process()

{

// alan ayarlanmışsa, değilse bir hata mesajı göster.

if (!$_POST['özelleştirilmiş_alan_adı']) wc_add_notice(__('Lütfen değeri girin.') , 'hata');

}

3. Ödeme sayfasına ve doğrulama kontrolüne alanlar ekledik. Tüm müşteri girdilerinin düzgün bir şekilde kaydedileceğinden emin olmanın zamanı geldi.

Bu, aşağıdaki kod kullanılarak yapılabilir:

 <?php

/**

* Alanın değerini güncelle

*/

add_action('woocommerce_checkout_update_order_meta', 'customise_checkout_field_update_order_meta');

işlev customise_checkout_field_update_order_meta($order_id)

{

if (!empty($_POST['özelleştirilmiş_alan_adı'])) {

update_post_meta($order_id, 'Bazı Alan', sanitize_text_field($_POST['özelleştirilmiş_alan_adı']));

}

}

WooCommerce Ödeme Sayfasından Alanları Kaldırın

Aşağıda verilen kodu kullanarak:

 // Bağla

add_filter('woocommerce_checkout_fields', 'custom_override_checkout_fields');

 

// Bağlanmış fonksiyonumuz - $fields filtreden geçirilir!

işlev custom_override_checkout_fields( $alanlar) {

unset($fields['order']['order_comments']);

 

$alanlarını döndür;

Zorunlu Alanı İsteğe Bağlı Yap

Diyelim ki sanal ürünleri satıyorsunuz ve Faturalandırma bölümündeki “Adres” alanını isteğe bağlı yapmak istiyorsunuz. Aşağıdaki kodu alt temanızın functions.php dosyasına eklemeniz yeterlidir.

 add_filter('woocommerce_billing_fields', 'wc_address_field_opsiyonel');

function wc_address_field_opsiyonel( $alanlar ) {

$fields['billing']['billing_address_1']['gerekli'] = false;

$alanlarını döndür;

}

Not: function.php dosyasında kalan hataların sitenizin devre dışı kalmasına neden olabileceğini göz önünde bulundurarak herhangi bir değişiklik yapmadan önce sitenizi yedeklemelisiniz. Alt temanızın function.php dosyasını kullanmak anlamına gelen risksiz bir yol öneriyoruz.

Eklentileri Kullanarak WooCommerce Ödeme Sayfasını Düzenleyin

Teknisyen değilseniz, güçlü eklentilerden yardım istemek her zaman akıllıca bir fikir olacaktır.

Binlerce WooCommerce optimizasyon eklentisi arasında, WooCommerce Checkout Manager, WooCommerce ödeme sayfalarını özelleştirmek için bir hotshot olur.

Quadlayers tarafından geliştirilen bu ücretsiz ancak güçlü eklenti kesinlikle masada bırakmak istemeyeceğiniz bir eklentidir.

Eklenti, alanları dahil ederek/hariç tutarak, alanları zorunlu/isteğe bağlı hale getirerek ve fatura verilerini kolaylıkla genişleterek WooCommerce ödeme sayfalarını özgürce özelleştirmenizi sağlar. Koşullu alanlar oluşturarak kullanıcı deneyimini iyileştirebilir ve satışları artırabilirsiniz. Bunun dışında sizi dosya yükleme türlerinin sayısıyla sınırlamaz. Müşterilerin çeşitli türlerdeki herhangi bir dosyayı zahmetsizce/hiç çaba harcamadan yüklemesine izin verebilirsiniz.

Bunun da ötesinde, tüm değişiklikler menüden seçenekler etkinleştirilerek yapıldığından kullanıcı arayüzü de bir başparmak hak ediyor.

Peki WooCommerce Checkout Manager ile WooCommerce ödeme sayfanızı nasıl optimize edebilirsiniz?

#1 Ödeme Sayfasına Yeni Alanlar Ekleyin

WooCommerce Checkout Manager, Faturalandırma, Gönderi ve Ek alanlar bölümlerindeki ödeme sayfasına özel alanlar oluşturmanıza izin verir.

Eklentiyi kurduktan ve etkinleştirdikten sonra, yönetici kontrol panelinizde WooCommerce > Checkout > Billing'e gidin.

1. "Yeni Alan Ekle"yi seçin.
2. Alan adını, etiketi ve yer tutucuyu doldurun.
3. Alan türlerini seçin.
4. Tüm değişiklikleri güncellemek için “Kaydet”e basın.
   

#2 Ödeme Sayfalarından Alanları Sil

“Devre Dışı Bırak” düğmesini değiştirerek alanları özgürce kaldırabilirsiniz.

#3 Ödeme Alanı Konumunu Yeniden Düzenleme

Ödeme alanlarının varsayılan sırasını şu şekilde değiştirerek:

1. Taşımak istediğiniz alan üzerinde 3 dikey çizgi butonuna tıklanır.
2. Bu düğmeyi basılı tutun, alanı istediğiniz konuma sürükleyip bırakın.
3. Sayfanın altındaki "Değişiklikleri Kaydet"e basın.
   

WooCommerce Ödeme Sayfanızı Şimdi Optimize Edin!

WooCommerce ödeme sayfasını değiştirmek, mağazalarınız için büyük bir fark yaratabilir ve ödeme sürecinizi bir sonraki düzeye taşıyabilir. En ufak bir kişiselleştirme bile ödeme sürecini hızlandırmanın, alışveriş deneyimini geliştirmenin ve satışları artırmanın yolunu açıyor.

Bu gönderide, WooCommerce ödeme sayfalarını özelleştirmenin 2 yolunu gösterdik. Bir eklenti çözümü seçebilir veya doğrudan function.php dosyasına kod parçacıkları ekleyebilirsiniz.

Mağazanıza daha fazla optimizasyon eklemek istiyorsanız, daha fazla bilgi için WooCommerce ürün sayfalarına özel alanların nasıl ekleneceğine ilişkin bu kılavuza bakın.

WooCommerce ödeme sayfası optimizasyonu hakkında herhangi bir sorunuz varsa, bir yorum bırakın, mümkün olan en kısa sürede size geri döneceğiz.