WooCommerce Ödeme Kancaları nasıl kullanılır?

Bu kılavuzda, WooCommerce'de ödeme kancalarının nasıl kullanılacağını öğreneceksiniz . Ana kancalardan bazılarına göz atacağız ve bunlarla neler yapabileceğinize dair bazı örnekler vereceğiz. Bu nedenle, ödeme sayfanızı özelleştirmeye ve dönüşüm oranlarınızı artırmaya hazır olun.

WooCommerce kancaları nedir?

Kancalar, çekirdek dosyaları değiştirmek zorunda kalmadan kod değiştirmenize veya eklemenize izin veren güçlü işlevlerdir. Kancalar çok fazla esneklik sağlar ve geliştiriciler bunları WooCommerce varsayılan işlevlerini değiştirmek için kullanır.

İki farklı kanca türü vardır:

• Eylem kancaları , bir olay meydana geldiğinde belirli eylemleri yapmak için özel kod eklemenize izin verir.
• Filtre kancaları , mevcut bir değişkenin veya işlevin davranışını değiştirir.

WooCommerce kancaları sayesinde geliştiriciler, çok pratik ve esnek bir şekilde son derece özelleştirilmiş çözümler oluşturabilir. WooCommerce'deki en önemli kancalardan bazıları ödeme kancalarıdır. Ve bir çevrimiçi mağazanız varsa, ödemeyi özelleştirmek ve dönüşüm oranlarınızı artırmak için bunları kullanmanız gerekir.

WooCommerce Ödeme Kancaları

Ödeme kancaları, WooCommerce'in desteklediği çoklu kancaların yalnızca bir türüdür ve ödeme sayfasında çalışırlar. Bu ödeme kancalarını notları düzenlemek, faturalandırma alanlarından önce, sipariş incelemesinden önce veya ödeme formundan sonra biraz içerik eklemek, fiyatı artırmak veya kullanıcıları role göre sınırlamak için biraz mantık uygulamak ve çok daha fazlası için kullanabilirsiniz.

WooCommerce kancaları, tam olarak WordPress yerel kancaları gibi çalışır. Bu nedenle, WordPress kancalarına aşina iseniz, WooCommerce kancalarında ustalaşmak kolay olacaktır.

Başlamadan önce

Kancalara atlamadan önce bir alt tema oluşturmanızı öneririz. Kullanabileceğiniz birçok araç var. WordPress için en iyi alt tema eklentileri listemize veya bir eklenti ile veya manuel olarak bir alt temanın nasıl oluşturulacağına dair ayrıntılı kılavuzumuza göz atabilirsiniz.

Kancalarla ilk kez karşılaşıyorsanız, bu komut dosyalarını kopyalayabilir ve doğrudan Alt Temanızın functions.php dosyasına yapıştırabilirsiniz. Gönderinin sonunda, size fikir vermesi için ödeme kancalarıyla yapabileceğiniz bazı örnekler bulacaksınız.

WooCommerce Ödeme Kancaları nasıl kullanılır?

Daha önce gördüğümüz gibi, WooCommerce eylem kancaları ve filtre kancaları vardır ve her ikisinin de benzer bir sözdizimi vardır.

Bu, bir eylem kancası örneğidir:

 add_action('woocommerce_after_checkout_billing_form','QuadLayers_callback_function');
function QuadLayers_callback_function(){
    # kodunuzu buraya ekleyin
}

Burada woocommerce_after_checkout_billing_form kanca ve QuadLayers_callback_function , özel komut dosyalarımızı eklemek için oluşturduğumuz işlevdir.

Filtre kancaları ise aynı şekilde çalışır ancak işlevde bir parametre alıp döndürmeleri gerekir. Örneğin:

 add_filter('woocommerce_breadcrumb_defaults','quadlayers_change_breadcrumb');
function quadlayers_change_breadcrumb( $içerik) {
$içerik .= "Dört Katmanlı";
$içerik döndür;
}

WooCommerce için ödeme kancalarının listesi

Ödeme sayfasında kullanabileceğiniz birçok WooCommerce kancası vardır. Ana olanlardan bazıları şunlardır:

• woocommerce_before_checkout_form
• woocommerce_checkout_before_customer_details
• woocommerce_checkout_billing
• woocommerce_before_checkout_billing_form
• woocommerce_checkout_shipping
• woocommerce_before_order_notes
• woocommerce_after_order_notes
• woocommerce_checkout_after_order_review
• woocommerce_checkout_after_customer_details
• woocommerce_review_order_before_cart_contents
• woocommerce_review_order_before_shipping
• woocommerce_review_order_after_order_total
• woocommerce_checkout_order_review
• woocommerce_review_order_before_submit
• woocommerce_review_order_before_payment
• woocommerce_review_order_after_submit
• woocommerce_review_order_after_payment
• woocommerce_after_checkout_form

Hepsinin açıklayıcı isimleri var. WooCoommerce kancalarının tam listesine bir göz atmak isterseniz, bu belgeye göz atın. Ve her bir kancanın nasıl çalıştığını görmek için bu gönderiye bir göz atın.

Örneğin, fatura formundan sonra ve sevkiyat bölümü başlığından önce bir miktar içerik eklemek istediğinizi varsayalım. Bunun gibi bir şey kullanırsınız:

 add_action('woocommerce_after_checkout_billing_form','QuadLayers_callback_function');
function QuadLayers_callback_function(){
echo 'içerik metni veya html burada';
}

Bu durumda, sadece biraz metin ekliyoruz, ancak karmaşık HTML yapıları ekleyebilir ve PHP işlevleriyle özel mantığınızı oluşturabilirsiniz. WooCommerce ödeme kancalarından en iyi şekilde nasıl yararlanabileceğiniz konusunda size bazı fikirler vermek için bazı örneklere bakalım.

WooCommerce kancalarıyla ödeme sayfası nasıl özelleştirilir

Burada, sitenizde WooCommerce kancalarını kullanarak ödeme sayfasını özelleştirmek için neler yapabileceğinize dair bazı örnekler göstereceğiz.

Sipariş incelemesine bir resim ekleyin

Sipariş inceleme sayfasına bir resim ekleyebilirsiniz. Bu durumda, bir QR kodu ekledik, ancak başka resimler, hareketli bir GIF veya arka plan resimleri de ekleyebilirsiniz.

 add_action('woocommerce_review_order_before_payment','example_callback');
function example_callback() {
    echo '<img src="https://quadlayers.com/wp-content/uploads/2020/06/frame.png" width="200px" height="200px">';  
} 

Ödeme sayfasındaki kırıntıları değiştirin

İçerik haritalarını düzenleyerek kullanıcıların ana sayfaya geri dönmesini engelleyebilirsiniz. Bu örnekte, Mağaza için içerik haritasındaki Ana Sayfa metnini nasıl değiştireceğinizi göstereceğiz.

 add_filter('woocommerce_breadcrumb_defaults', 'quadlayers_change_breadcrumb');
işlev 'quadlayers_change_breadcrumb'( $varsayılan) {
    $default['home'] = 'Mağaza';
    $varsayılanı döndür;
}

Sipariş Ver düğmesinin yanında güven rozetlerini görüntüleyin

WooCommerce ödeme kancaları, güven oluşturmak ve satın almak üzereyken müşterilere gönül rahatlığı sağlamak için bazı harika seçenekler sunar. Sipariş ver düğmesinin hemen yanında güven rozetleri göstererek, dönüşüm oranlarınızı iyileştirebilir ve markanız çevresinde güven oluşturabilirsiniz.

 add_action('woocommerce_review_order_after_submit', 'quadlayers_trust_badges');
function quadlayers_trust_badges() {
    echo '<div class="güven rozetleri">
    <img src="https://www.pngitem.com/pimgs/m/19-197703_transparent-secure-checkout-png-best-trust-badges-for.png">
    </div><div class="trust-badge-message"><i>Yukarıdaki güven rozetlerini bir WooCommerce kancasıyla ekledim</i></div>';
} 

Mevcut ödeme alanlarını düzenleyin

Ödeme sayfasını tamamen özelleştirmenin en iyi yolu, etiketleri ve alanların yer tutucularını düzenlemektir. Bu örnekte, woocommerce_checkout_fields kancasını kullanarak sipariş notunun ad ve yer tutucu etiketini düzenleyeceğiz.

 add_filter('woocommerce_checkout_fields', 'quadlayers_labels_placeholders', 9999); 
function quadlayers_labels_placeholders( $f ) { 	
	$f['billing']['billing_first_name']['label'] = 'Adın ne?';
	$f['order']['order_comments']['placeholder'] = 'Aklınızdan ne var?'; 
	$f döndür; 
} 

Özel bir ödeme alanı ekleyin

Son olarak, işte daha karmaşık bir örnek. Müşterilerin ödeme sayfasında bülteninize abone olmalarını sağlayan yeni bir özel alanın nasıl oluşturulacağını göstereceğiz. Bunun için iki kanca kullanacağız: biri abone olunacak alanı görüntülemek için, diğeri ise düğmenin durumunu veritabanına kaydetmek için (kontrol edilmiş olsun ya da olmasın).

 add_action('woocommerce_after_order_notes', 'quadlayers_subscribe_checkout');
add_action('woocommerce_checkout_update_order_meta', 'quadlayers_save_function');

// woocommerce ödemesine onay kutusu ekle 
function quadlayers_subscribe_checkout( $checkout ) { 
	woocommerce_form_field( 'abone olundu', dizi(
		'type' => 'onay kutusu',
		'sınıf' => dizi('misha alanı form-satır çapında'),
		'label' => 'Bültenimize abone olun.',
		), $checkout->get_value( 'abone olundu' ) ); 
}
// alan değerini kaydet
function quadlayers_save_function( $order_id ){ 
	if( !empty( $_POST['contactmethod'] ) )
		update_post_meta( $order_id, 'contactmethod', sanitize_text_field( $_POST['contactmethod'] ) ); 
	if( !empty( $_POST['abone olundu'] ) && $_POST['abone olundu'] == 1 )
		update_post_meta($order_id, 'abone olundu', 1 ); 
}

Ödeme sayfasını eklentilerle özelleştirin

Kancaları kullanmakta rahat değilseniz, eklentileri kullanarak ödeme sayfanızı da özelleştirebilirsiniz. Piyasada birçok araç var ama biz bu ikisini öneriyoruz:

• WooCommerce için Ödeme Yöneticisi : 70.000'den fazla aktif kurulumla bu, WooCommerce için en popüler ödeme eklentilerinden biridir. Ödeme Yöneticisi, ödeme sayfasındaki alanları özelleştirmenize, eklemenize, düzenlemenize ve silmenize olanak tanır. Ücretsiz bir sürümü ve 20 USD'den başlayan 3 premium planı vardır.
• WooCommerce için Doğrudan Ödeme : Bu freemium aracıyla, ödeme sürecini basitleştirebilir ve dönüşüm oranlarınızı artırabilirsiniz. Müşterilerinizi ürün sayfasından doğrudan ödeme sayfasına yönlendirerek satın alma sürecini kısaltabilirsiniz. Direct Checkout'un ücretsiz bir sürümü ve 20 USD'den başlayan premium planları vardır (tek seferlik ödeme).

Bu eklentilerin nasıl kullanılacağı ve ödeme sayfasının nasıl iyileştirileceği hakkında daha fazla bilgi için ayrıntılı kılavuzumuza göz atın.

Çözüm

Sonuç olarak, WooCommerce kancalarıyla ödeme sayfanızı özelleştirebilir ve dönüşüm oranlarını artırabilirsiniz. Burada, ödemenizin farklı bölümlerini kişiselleştirmek için bu kancaların nasıl kullanılacağına dair bazı örnekler gösterdik. Ancak, yapabileceğiniz daha çok şey var! Bu nedenle, onlarla oynamanızı ve yaratıcılığınızı serbest bırakmanızı öneririz.

WooCommerce ödeme sayfasının nasıl özelleştirileceği hakkında daha fazla örnek ve bilgi için bu adım adım kılavuza göz atın.

Herhangi bir sorunuz varsa aşağıdaki yorumlar bölümünde bize bildirin. Ve eğer okumaktan zevk aldıysanız, lütfen bu gönderiyi sosyal medyada paylaşın!