Wooocommerce Checkout sayfası nasıl düzenlenir
Ödeme sayfası, satın alma işleminin en önemli adımlarından biridir. Çevrimiçi bir mağazanız varsa, dönüşüm oranını artırmak için ayarlamanız ve optimize etmeniz gerekir. Bunu yapmanın birkaç yolu var. Bu kılavuzda, WooCommerce Checkout sayfasını düzenlemek için size 2 farklı yöntem göstereceğiz: Eklentiler ve Programlanmış. WooCommerce’deki ödeme sayfasını neden ayarlamanız gerekiyor? Bir WooCommerce mağazanız varsa, Checkut en önemli sayfalardan biridir. Müşteri burada ödeme yapar ve satışı kapatırsınız. Kaç alıcının tramvaylarından ayrıldığını ve şu anda ne kadar rekabet olduğu düşünüldüğünde, ödemeleri mümkün olduğunca çok satışı kapatmak için optimize etmelisiniz.
WooCommerce iyi bir varsayılan yapılandırma içerse de, mağazanızdaki dönüşüm oranını artırmak için ödeme sayfasını düzenlemeniz gerekebilir. Woocommerce Checkut sayfanızı düzenlemek için uygulayabileceğiniz bazı değişiklikler şunlardır:
Bir Sayfa Ödeme Yapın
CSS ile kasanın stilini ve tasarımını değiştirin
Ödeme alanını ekleyin, silin veya sıfırlayın
İçerik dahil
Doldurulması veya isteğe bağlı olması gerekir
Koşullu bir alan ekleyin ve koşullu bir mantık oluşturun
Nakliye, ambalaj vb. İçin ek ücretler ekleyin
Ve daha fazlası
Daha önce mağaza sayfasının nasıl ayarlanacağını ve alanların kasalardan nasıl silineceğini görmüştük ve bugün size WooCommerce’deki ödeme sayfasını ayarlamanın 2 farklı yolunu göstereceğiz.
WOOOCOMMERCE DÜZENLEME ÖDEME Sayfaları: 2 Yöntem Bu kılavuzda WooCommerce üzerindeki ödeme sayfasının 2 farklı şekilde nasıl düzenleneceğini öğreneceksiniz:
Programlanmış bir eklenti (kodlama) ile
Her seçeneğe daha yakından bakalım. 1) Ödeme sayfasını eklentilerle ayarlayın Kodlama becerileriniz yoksa, WooCommerce Checkout sayfasını bir eklenti ile düzenleyebilirsiniz. Orada birçok seçenek var, ancak bu eğitim için WooCommerce Checkut Manager’ı kullanacağız. Bu eklenti birkaç yıldır piyasada ve 90.000’den fazla aktif indirmeye sahip. Buradan indirebileceğiniz temel ama güçlü bir işlevi ve 19 USD (bir kerelik ödeme) arasında daha sofistike özelliklere sahip 3 premium pakete sahip ücretsiz bir sürüme sahiptir. Bakalım bu aracın ne yapabileceğini görelim.
WooCommerce Checkout Manager Ödeme Yöneticisi, ödeme sayfanızı yönetmek için en iyi eklentilerden biridir. Bu, satışlarınızı artırmak için ödeme sayfasına alanları eklemenize, düzenlemenize ve silmenize olanak tanır. Ve en iyi kısmı kullanımı çok kolaydır. Örneğin, nakliye, faturalandırma ve ödeme sayfasına ek alanları yalnızca menüden seçenekleri etkinleştirerek ekleyebilirsiniz. Bu araç, ilk ve arka adlar, şirket adı, ülke, şehir, posta kodu, adres, telefon numarası, e -posta ve diğerleri gibi alanlar eklemenize veya gizlemenize olanak tanır. Bunu yapmak için, WordPress kontrol panelinizde, WooCommerce’i açın> Fatura sekmesini, gönderim veya ek sekmeleri açın. Orada, görüntülemek veya gizlemek istediğiniz tüm alanların bir listesini göreceksiniz.
Belirli bir ülkeye veya yere nakliye için ek ücretler
Kredi kartları veya ödeme ağ geçitleri ile ilgili maliyetler
WooCommerce bu ek ücreti eklemek için çeşitli seçenekler sunsa da, ödeme yöneticisi size daha fazla kontrol ve esneklik sağlar. Ödeme yöneticisi ile ücret eklemek ve WooCommerce> Checkout> Faturalandırma’yı açmak için. Etkinleştirilebilecek çeşitli faturalandırma alanlarını göreceksiniz. Bu gösteri için ekspres ifadeler için ücretler ekleyeceğiz ve yeni bir alan oluşturmamız gerekiyor, böylece yeni alan ekleme düğmesine basıyoruz. Radyoyu bir düğme türü olarak seçeceğiz ve yeni alana bir isim vereceğiz.
Ardından, Seçenek sekmesini açın, iki etiket ekleyeceğiz: evet ve hayır. Alıcı Express ifadesini seçtiğinde, 10 $ ek bir ücret ekleyeceğiz.
Değişikliği kaydet ve hepsi bu! Şimdi kullanıcı ödeme sırasında Express Teslimat seçeneğini seçtiğinde, sepetlerine 10 $ ek ücret eklenecektir. Koşullu Bir Alan Oluşturma Alan ve maliyet eklemenin yanı sıra, kullanıcı deneyimini geliştirmek için koşullu bir alan oluşturarak Woocommerce Checkut sayfasını da ayarlayabilirsiniz. Yalnızca bir Parorer alanı ve ana değeri seçmeniz gerekir. Adım adım işlemine bakalım: WordPress kontrol panelinizde WooCommerce’i aç> Ödeme> Faturalandırma ve Yeni Alan Ekle’yi tıklayın Yapmak istediğiniz alan türünü seçin ve etiketi, rezervuar/türü ve açıklamayı doldurun. Bu, yaptığınız koşul türüne bağlı olacaktır Bundan sonra sağdaki koşullu kutuyu kontrol edin. Koşullu bir alan görüntülemek için üst alan ve üst alan tarafından alınması gereken değeri seçin
Kaydet’e basın ve bitirin!
İyi olan şey, ödeme yöneticisinin sınırsız özel bir alan oluşturmanıza ve ödeme sayfasını düzenlemek ve kullanıcıya benzersiz bir deneyim sunmak istediğiniz koşulları uygulamanıza izin vermesidir.
WooCommerce’de koşullu bir alan oluşturma hakkında daha fazla bilgi için, kasanızı ayarlamak için neler yapabileceğinize dair birkaç örneğe sahip olan bu tam kılavuza bakın. Bu sadece basit bir örnek ama yapabileceğiniz çok daha fazlası var. Daha fazla bilgi için, wooocommerce’i kasaya nasıl ekleyeceğinizle ilgili tam kılavuzumuza bakın. Genel olarak, ödeme sayfasını kolayca düzenlemek istiyorsanız, WooCommerce Checkout Manager doğru seçimdir. Ücretsiz sürüm iyi bir başlangıçtır, ancak daha sofistike bir özellik istiyorsanız, premium paketlerden birini öneririz. Sonunda, nasıl yapılacağını bileceksiniz:
Woocommerce Checkout sayfasına özel bir alan ekleyin
Veritabanına özel alanları kaydedin
Zorunlu alanı isteğe bağlı olarak yapın
Ödeme sayfasına içerik ekleyin
Woocommerce Checkout sayfasında kısa bir kod kullanın
Özel CSS ile ödeme sayfası stili
Tüm bu ayarlamaları elde etmek için bazı WooCommerce kontrolleri kullanacaksınız. Kancalara aşina değilseniz, WooCommerce Hooks’un nasıl kullanılacağına dair ilk kılavuzumuzu görmenizi öneririz. Function.php dosyasına bazı değişiklikler uygulayacağımız için, çocuk temasını kullanmanızı öneririz. Birçok çocuk tema eklentisinden birini kullanabilir veya bu kılavuzu takip edebilirsiniz.
2.1) WooCommerce Chepout sayfasına Özel Bir Alan Ekleyin Size göstereceğimiz ilk şey, ödeme sayfasına nasıl özel bir alan ekleyeceğinizdir. Bunu yapmak için, çocuk temasından functions.php dosyasına aşağıdaki komut dosyasını yapıştırın: // checkddd_ace (‘wooocommerce_after_notes’, ‘quadLayers_subscribe_checkout’);
QuadLayers_subscribe_checkout ($ checkut) işlevi {
wooocommerce_form_field (‘müşteri’, dizi (
‘type’ => ‘onay kutusu’,
// ‘zorunlu’ => doğru,
‘Class’ => dizi (‘özel alan form sırası’),,
‘Etiket’ => ” Bültenimize abone olun. ‘
), $ checkout-> get_value (‘müşteri’));
} Bu, kullanıcılara bülteninize abone olma seçeneği sunmak için ödeme sayfasının sonuna özel bir onay kutusu düzlemi ekleyecektir. Aynı şekilde, her türlü alan ekleyebilirsiniz. Örneğin, aşağıdaki komut dosyasıyla radyo giriş alanının türünü ekleyelim: // radyo giriş alanı
Add_action (‘wooocommerce_beefore_order_notes’, ‘quadlayers_radio_checkout’);
QuadLayers_radio_checkout işlevi ($ checkout3) {
wooocommerce_form_field (‘yem’, dizi (
‘type’ => ‘radyo’,
// ‘zorunlu’ => doğru,
‘Class’ => dizi (‘özel alan form sırası’),,
‘Etiket’ => ‘Bizi nasıl buluyorsunuz?
‘Seçenekler’ => dizi (
‘Google’ => ‘Google’,
‘Arkadaşlar’ => ‘arkadaşlar’,
‘Facebook’ => ‘Facebook’,
‘Youtube’ => ‘youttube’,
‘Diğerleri’ => ‘Diğer’
)
));
}
Bu, müşterilere sizi nerede duyduklarını sorabilmeniz için bir tür radyo girişi ekleyecektir. WooCommerce Checkut sayfasına özel alanların nasıl ekleneceği hakkında daha fazla bilgi için, birkaç örnekle bu tam kılavuza bakın. 2.2) Özel alan değerini geçerli veritabanına kaydedin, kasaları düzenlemek ve WooCommerce siparişleri hakkında bilgi toplamak için bu özel alanı nasıl kullanabileceğinize bakalım. Bunu yapmak için, ihtiyaç duyduğunuzda özel alanların değerini alabilmeniz gerekir. Ayrıca, müşteri formu tamamladıktan ve Sipariş düğmesine bastıktan sonra veritabanına özel alan değerini kaydetmeniz gerekir. Bunu başarmak için ‘wooocommerce_checkout_update_order_meta’ kancasını kullanmalısınız. Adım 2.1’e eklediğiniz iki özel alanı güncellemek için, funcitons.php dosyasına aşağıdaki kodu kopyalayıp yapıştırın çocuk teması: add_action (‘woocommerce_checkout_update_order_meta’, ‘quadLayers_save_function’);
quadLayers_save_function işlevi ($ sipariş_id) {
if (! boş ($ _post [‘abone’])))) {
update_post_meta ($ sipariş_id, ‘müşteri’, saditize_text_field ($ _post [‘müşteri’]);
}
if (! boş ($ _post [‘feed’]))) { update_post_meta ($ sipariş_id, ‘feed’, sendize_text_field ($ _post [‘feed’]));
}
}
Bu komut dosyası, veritabanına kaydetmeden önce özel alanın boş olup olmadığını IF () koşuluyla kontrol eder. Bu komut dosyasını ekledikten sonra, genel WP nesnesi “$ post” kullanarak veritabanından depolanan verileri alabilirsiniz. Aşağıdaki komut dosyasında, geçerli siparişten müşteri meta verilerini alıyoruz. Bunu WooCommerce Siparişleri listesinin arkasında kullanabilirsiniz. Global $ post; $ sipariş = wc_get_order ($ post-> id);
$ c_meta = $ sipariş-> get_meta (‘müşteri’); Bunun ham bir komut dosyası olduğuna dikkat edilmelidir, bu nedenle özel ihtiyaçlarınıza uygun olarak ayarlamanız gerekir. 2.3) Woocommerce’deki ödeme sayfasını düzenlemenin isteğe bağlı olarak zorunlu bir alanı oluşturun, isteğe bağlı olarak doldurulacak zorunlu veya zorunlu bir alan oluşturmaktır. Bu şekilde, alıcının yalnızca işlemler için gereken sütunu doldurmasına ve satın alma deneyimlerini geliştirmesine izin verirsiniz. Örneğin, faturalandırma bölümünün adresini isteğe bağlı olarak yapmak istersiniz. Çocuğunuzun temasından functions.php dosyasına aşağıdaki kodu ekleyin. add_filter (‘wooocommerce_billing_fields’, ‘wc_address_field_opsional’);
Wc_address_field_optional ($ fields) işlevi {
$ Fields [‘faturalandırma’] [‘Billing_address_1’] [‘zorunlu’] = false;
$ Field Return;
} Bu görüntüleri temel olarak kullanarak, kısa sürede daha isteğe bağlı alanlar yapabilirsiniz.
Koşullu Alan WooCommerce Checkout sayfanızı bir adım önüne getirmek istiyorsanız, koşullu alanlar ekleyerek ayarlayabilirsiniz. Koşullu alanlar koşullu mantığa sahiptir, böylece diğer alanların değerine göre görünen veya kaybolan alanlar vardır. Örneğin, kredi kartı sütunu yalnızca kullanıcı bir kredi kartı seçme seçeneği olarak seçerse görünür olması için koşullu mantık oluşturabilirsiniz. Koşullu alanı ve ödeme sayfanızı düzenlemek için nasıl kullanılacağı hakkında daha fazla bilgi edinmek için bu tam kılavuza bakın. 2.4) Ödeme sayfasına İçerik Ekle WooCommerce Checkout sayfasını düzenlemenin başka bir yolu biraz içerik eklemektir. Tuvalet kontrolü hakkında güçlü bilgilerle, istediğiniz yerde resimler, başlıklar, metin vb. Gibi her türlü içeriği kolayca girebilirsiniz. Örneğin, ödeme sayfasındaki sipariş düğmesinden önce bir güven rozeti resmi eklemek için bu komut dosyasını kullanabilirsiniz: add_action (‘wooocommerce_review_order_before_submit’, ‘quadLayers_checkout_content’); quadLayers_checkout_concontent () işlevi işlevi
echo ‘ ;
}
Resimlere ek olarak, kasanın üstüne basit bir başlık metni de ekleyebilirsiniz: add_action (wooocommerce_checkout_before_customer_details
, ‘quadLayers_checkout_header’);
QuadLayers_checkout_header () function () {
Echo ”
Bu özel bir başlık
“;
}
Bir başka ilginç alternatif de ödeme sayfanıza mesaj eklemektir.Genellikle, mağazalar nakliye, nakliye vb. İle ilgili konulardan bahseder.Örneğin, müşterilere ürünlerini almak için 5 iş günü beklemeleri gerekebileceğini hatırlatmak istersiniz.Dosya temanızdan functions.php dosyasında, add_action (‘wooocommerce_after_notes’, ‘wc_add_message’); wc_add_message () işlev {) {) {) {) {) {)
Echo ‘Lütfen nakliyenin 5 iş gününe kadar sürebileceğini unutmayın.’;
Kalıcı
Yüzde
Bu bölümde, her ikisini de kasaya nasıl ekleyeceğinizi göstereceğiz. Sabit bir maliyetin tipik bir örneğinin sabit bir ücret ekspres ekspress ifadesidir. Express ifadesi için 10 $ ‘lık sabit bir ücret girmek istediğinizi varsayalım. Sadece aşağıdaki komut dosyasını kullanın ve alan adı için metni düzenleyin. Bu örnekte, “ekstra maliyetler” olarak adlandıracağız ve bu siparişe 10 $ ekleyecektir. Add_action (‘wooocommerce_cart_calculate_fees’, function () {if (Is_admin () &&! Defined (‘do_ajax’)) {back;} wc () -> cart -> add_fee (__ (‘ekstra maliyetler’, ‘txtdomain’) 10 );}); Bu kodun, ödeme yaparken toplam müşteri siparişlerine otomatik olarak 10 $ sabit bir ücret ekleyeceğini unutmayın. Diğer alternatif yüzdeye dayalı maliyetler ekleyin, yüzde bazlı bir maliyet almaktır. Bu, ek bir vergi varsa veya belirli ödeme ağ geçidi ücretleri için ek ücretler eklemek istiyorsanız yararlı olabilir. Diyelim ki toplam sipariş fiyatının% 3’ü (ürün + nakliye maliyeti) maliyeti eklemek istiyoruz. Add_action (‘wooocommerce_cart_ccalculate_fees’, function () {if (is_admin () &&! Defined (‘do_ajax’)) {} $ yüzde = 0.03; $ yüzdege_fee = (wc () -> trolley + tuvalet () -> trolley -> get_shipping_total ()) * $ yüzde; wc () -> sepet -> add_fee (__ (‘vergi’, ‘txtdomain’), $ yüzde_fee);});
Bu komut dosyası, ödeme sırasında toplam alışveriş siparişine% 3 ücret ekleyecektir. Mağazanıza ücret eklemek için daha fazla bilgi ve örnek için, wooocommerce’i kasaya nasıl ekleyeceğiniz konusunda kılavuzumuza bakın. 2.6) WooCommerce Checkout sayfasındaki kısa kodu kullanın WooCommerce kısa kodu size çok fazla esneklik sağlar ve ödeme kancalarını kullanarak her türlü içerik eklemenizi sağlar. Ancak, yalnızca kısa kodlar yazdırırsanız, işe yaramaz. Bunun yerine, aşağıdaki gibi girmelisiniz: echo do_shortcode (‘[wooocommerce_cart]’); Bu nedenle, kancayı önceki örnekte yaptığınız gibi kullanarak, bunun gibi sonuçları alabilirsiniz: add_action (‘wooocommerce_aft_checkout_form’, ‘quadlayers_checkout_shortcode’); {{) {) {)
echo do_shortcode (‘[wooocommerce_cart]’); } Bu komut dosyası [wooocommerce_cart] kısa kodu eyleme taşıyarak ödeme sayfasının altında bir WooCommerce sepeti görüntüler.
WordPress, WooCommerce veya herhangi bir özel kısa kodu kullanabileceğinizi lütfen unutmayın. Bununla birlikte, bazı kısa kodlar WooCommerce tarafından uyumlu veya desteklenemez, bu nedenle kullanmadan önce kontrol edin. Kısa kod hakkında daha fazla bilgi edinmek için WooCommerce Kısa Kod Kılavuzumuzu görebilirsiniz. 2.7) WooCommerce Checkout sayfasını son özel CSS ile düzenleyin, Woocommerce mağaza kontrol sayfanızı CSS stilini düzenleyerek de ayarlayabilirsiniz. Bu, ödeme sayfasını yeniden oluşturmak için saatler harcamanız gerektiği anlamına gelmez. Bazı basit değişiklikler bile kasaları optimize etmenize yardımcı olabilir. Örneğin, renkleri, yazı tiplerini, kenar boşluklarını veya sınırları düzenleyerek, dönüşüm oranında bazı büyük artışlar görebilirsiniz. Burada her işletme için çalışan sihirli bir formül yoktur ve farklı stilleri test etmeniz gerekir, ancak birkaç şeyi ayarlamak satışlarınızı artırmanıza yardımcı olabilir. Örneğin, bu basit komut dosyasını özel bir CSS stili uygulamak ve ödeme sayfasında arka plan renklerini düzenlemek için kullanabilirsiniz: add_ace (‘wp_head’, ‘quadLayers_checkout_style’); quadLayers_checkout_style () () {function {function {function {
if (is_checkout () == true) {
echo ‘ vücut {arka plan: #dfdfff! Önemli;} ‘;
}
}
Ayrıca, bu komut dosyasını temel olarak kullanabilir ve sitenizi mükemmel bir görünüm ve his sağlamak için HTML etiketine kendi CSS kurallarınızı ekleyebilirsiniz. Bu, ödeme sayfasına CSS uygulamak için hızlı bir dönüş. Küçük CSS parçaları eklemek için çok kullanışlıdır. Ancak daha geniş bir stil komut dosyası istiyorsanız, orijinal WP kancasını wp_enqueue_style () kullanarak aşağıdaki gibi WordPress tarafından CSS stilini sıralamanız gerekir: add_action (‘wp_enqueue_scripts’, ‘quadLayers_enqueue_css’);
wp_enqueue_style (‘style_checkout’,
get_stylesheet_directory_uri (). ‘/checkout-style.css’
);
} Bu şekilde, çocuğunuzun tema klasöründe ana stil.css dosyasıyla aynı seviyede saklanacak ayrı dosyalarda (checkut-style.css) tüm özel CSS’nizi (checkut-style.css) alabilirsiniz. Bunlar, WooCommerce’deki ödeme sayfasını bazı basit komut dosyalarıyla nasıl ayarlayabileceğinize dair birkaç örnektir. Ödülü olarak kullanmanızı ve kasanızın diğer yönlerini eklemek veya düzenlemek için oynamanızı öneririz. Buna ek olarak, mağaza sayfalarını kodlama yoluyla düzenlemek istiyorsanız, WooCommerce Shop sayfasını nasıl ayarlayacağınız konusunda kılavuzumuzu görmenizi öneririz. Bonus: Ödeme Kancaları WooCommerce’deki ödeme sayfasını düzenlemek için kullanabileceğiniz birçok ödeme vardır. Bunlar ana olanlardan bazıları:
wooocommerce_beefore_checkout_form
wooocommerce_checkout_beefore_customer_details
wooocommerce_checkout_billing
wooocommerce_beefore_checkout_billing_form
wooocommerce_checkout_shipping
wooocommerce_beefore_order_notes
wooocommerce_checkout_after_order_reviewwoocommerce_checkout_affter_customer_details
wooocommerce_review_order_beefore_cart_contents
wooocommerce_review_order_before_shipping
wooocommerce_review_order_after_order_total
wooocommerce_checkout_order_review
wooocommerce_review_order_beefore_submit
wooocommerce_review_order_beefore_payment
wooocommerce_review_order_after_submit
wooocommerce_aft_checkout_form
Kancalar ve nasıl çalıştığı hakkında daha fazla bilgi için aşağıdaki yönergelere bakın:
WooCommerce Checkout Kap nasıl kullanılır
Wooocommerce Hooks nasıl kullanılır – Komple Yönergeler
Son olarak, kullanabileceğiniz kancaların eksiksiz bir listesi için bu belge sayfasına bakın. Sonuç Genel olarak, ödeme sayfasını düzenlemek büyük bir fark yaratabilir ve Woocommerce mağazanızı bir sonraki seviyeye getirmenize yardımcı olabilir. Bazı değişikliklerle bile, dönüşüm seviyesini artırabilir ve satışlarınızı artırabilirsiniz. Bu kılavuzda, ödeme düzenlemenin iki yolunu gösterdik:
Eklentilerle
Programlanmış (kodlama yoluyla)
