WooCommerce Ödeme Sayfasını Özelleştirmenin ve Düzenlemenin 3 Etkili Yolu

WooCommerce ödeme sayfasını düzenlemenin en iyi yolunu mu arıyorsunuz?

WooCommerce ödeme sayfasını nasıl özelleştireceğinizi öğrenmek, tasarımı üzerinde daha fazla kontrol sahibi olmanızı sağlar ve daha fazla satış potansiyelini artırır.

‍ Bu ayrıntılı eğitimde, tasarımı tamamen ayarlamak ve/veya ödeme sayfasında görünen alanları değiştirmek dahil, ödeme sayfasını özelleştirmenin kodsuz üç yolunu göstereceğiz.

Ayrıca ödeme deneyimini özelleştirmek için WooCommerce'in sunduğu tüm yerleşik özellikleri de gözden geçireceğiz.

Başlayalım…

WooCommerce ödeme sayfasını düzenleme nedenleri

Başlamak için WooCommerce ödeme sayfasını değiştirmek için göze batan bir neden var mı? Bu bağlıdır. Yerleşik ödeme modülü, müşterilerinizi rahatsız etmeden ödemeleri işlemek için temiz, işlevsel ve yeterince hızlıdır.

Ancak olumsuz yanlarını da fark edebilirsiniz. WooCommerce ödeme sayfasını düzenlemek isteyebileceğiniz ana nedenler şunlardır:

• Önceden ayarlanmış yazı tipleri, stilleri ve WooCommerce moru gibi varsayılan WooCommerce marka öğelerini değiştirmek için.
• Logo, marka renkleri ve destek belgelerine bağlantılar gibi işinizle ilgili web öğeleri eklemek için.
• Testten sonra ödemenin dönüşümler için optimize edilmesi gerekiyorsa.
• Ödeme işlemini tek bir adıma dönüştürerek hızlandırmak.
• Artan satışları, çapraz satışları ve ilgili ürünleri birleştirmek.
• Özel alanlar eklemek veya WooCommerce tarafından sağlanan bazı alanları kaldırmak için.
• Nakliye seçeneklerini değiştirmek için.
• Düğme metni, önceden ayarlanmış alan metni ve misafir ödeme seçenekleri gibi tasarım öğelerini değiştirmek için.

WooCommerce ödeme sayfası nasıl düzenlenir

WooCommerce ödeme sayfasını düzenlemek için birkaç seçeneğiniz var. Sizin için en uygun yöntem, yapmaya çalıştığınız belirli düzenlemelere ve bir eklenti kullanmaya açık olup olmadığınıza bağlı olacaktır.

Aşağıda, en iyi üç yöntemi inceleyeceğiz:

1. Yerel WooCommerce ayarları – WooCommerce, ödemeyi özelleştirmek için ilk yöntemde ayrıntılandıracağımız birçok yerleşik seçenek içerir. Temanız, ödeme sayfası tasarımını özelleştirmek için kendi seçeneklerini de sunabilir.
2. Elementor Pro – Elementor Pro şimdi, ödeme sayfasının tasarımını tamamen özelleştirmenize olanak tanıyan kendi ödeme widget'ını sunuyor. Özellikle sayfanın tasarımını düzenlemek istiyorsanız bu harika bir seçenektir.
3. Ödeme Alanı Düzenleyicisi – ödeme sayfasında görünen form alanlarını düzenlemek istiyorsanız bu harika bir seçenektir. Yeni alanlar eklemek, varsayılan alanları kaldırmak ve her şeyi gerektiği gibi yeniden düzenlemek için kullanabilirsiniz.

bunları geçelim..

Yöntem 1: Varsayılan WooCommerce ödeme ayarlarını kullanın

WooCommerce, ödeme modülünüzü düzenlemek için yerleşik ayarlar sunar ve WordPress temanız, WordPress Özelleştirici'deki bazı alanları ve ödeme ayarlarını düzenlemek için zaten araçlar sağlayabilir.

Ek bir eklenti, tema veya alan özelleştirici aramadan önce bu ayarları kontrol etmek her zaman akıllıca olacaktır, çünkü ihtiyacınız olan özelliklere zaten sahip olabilirsiniz.

Örneğin, WooCommerce belirli alanları kaldırmak, ödeme sırasında vergi oranlarını etkinleştirmek ve kupon alanlarını göstermek için araçlara sahiptir.

1. Adım: Ödeme sırasında vergi hesaplamaları ve bir kupon alanı ekleyin

WooCommerce, vergi hesaplamalarını otomatikleştirmek ve ödeme sırasında kuponları kabul etmek için yerleşik ayarlara sahiptir.

Açma/kapama arasında geçiş yapmak için WordPress'te WooCommerce > Ayarlar'a gidin.

Genel sekmesini seçin ve Vergileri Etkinleştir bölümüne gidin. Ödeme sırasında Vergi Oranlarını ve Hesaplamalarını Etkinleştir kutusunu işaretleyin. Bu, WooCommerce'de yapılandırdığınız oranlara dayalı olarak vergi ücretleri oluşturur ve görüntüler ( WooCommerce > Ayarlar > Vergi > Standart Oranlar ).

Müşterilerin indirim kodlarını yazabilecekleri bir alanı göstermek için Kupon Kodlarının Kullanımını Etkinleştir kutusunu işaretleyin.

Belirli öğeleri göstermemeyi tercih ediyorsanız, onay kutularını kaldırmanız yeterlidir. Değişikliklerinizi ön uçta görmek için Kaydet düğmesini tıkladığınızdan emin olun.

2. Adım: Vergili veya vergisiz ürün fiyatlandırmasını görüntüleyin

Ödeme işleminin sonunda vergileri hesaplamak bir şeydir, ancak özellikle müşteriler ödeme işlemi sırasında ilerlerken, ürünlerin toplam maliyetine vergiyi dahil etmek isteyip istemediğinize de karar vermelisiniz.

Genel olarak, bu, müşteri ödemeden hemen önce vergi ile fiyatı artırmak yerine daha fazla şeffaflık gösterir.

Ödeme işlemine vergiyle birlikte vergiyi dahil etmek için WooCommerce > Ayarlar > Vergi seçeneğine gidin.

"Sepet ve ödeme sırasında fiyatları görüntüle" alanını bulmak için sayfayı aşağı kaydırın.

Açılır menüden seçin:

• Vergi dahil
• vergi hariç

Değişiklikleri Kaydet 'i tıklayın.

3. Adım: Ödeme sayfasında hangi kargo öğelerinin gösterileceğini ayarlayın

Ayrıca, WooCommerce > Ayarlar altında, WooCommerce ödeme sayfasında hangi kargo bölgesi, yöntem ve hesaplamaların görüneceğini işaretleyebilirsiniz.

Gönderi sekmesine gidin ve şunları ayarlayın:

• Hesaplamalar: sepet sayfasında kargo hesaplayıcısını etkinleştirmek için
• Hesaplamalar: Bir adres girilene kadar kasada nakliye masraflarını gizlemek için
• Gönderim hedefi: ödeme sırasında varsayılan gönderim adreslerini ayarlamak için

Değişiklikleri Kaydet 'i tıklayın.

4. Adım: Ödeme sırasında hesapları ve gizliliği yönetin

WooCommerce > Ayarlar altında kalırken Hesaplar ve Gizlilik sekmesine gidin.

Sayfanın üst kısmında iki alan göreceksiniz:

• Misafir ödemesi: misafir çıkışlarını ve mevcut hesap girişlerini dahil etme/kaldırma
• Hesap oluşturma: müşterilerin ödeme sırasında bir hesap oluşturmasına veya bir abonelik başlatmasına izin verin

Gizlilik Politikası alanını bulmak için Hesaplar ve Gizlilik sayfasından devam edin.

Müşterilerin ödeme yaparken politikayı görmelerini sağlamak için Ödeme Gizlilik Politikası metin kutusunu doldurun. Bu alanda bir gizlilik politikası görüntülememeyi tercih ediyorsanız, alanı boş bırakın.

Adım 5: Gerçek ödeme sayfasını ve diğer gelişmiş ayarları seçin

Bir Sayfa Yapısı bölümünü ortaya çıkarmak için Gelişmiş sekmesine gidin; bu, satıcılardan, ödeme yaptıkları sırada WooCommerce'e müşterileri nereye göndereceklerini söylemelerini ister.

Varsayılan olarak WooCommerce, WordPress'te Sayfalar > Tüm Sayfalar'a giderek bulabileceğiniz Sepet , Ödeme , Hesabım ve Şartlar ve Koşullar sayfalarını oluşturur.

Ancak, tamamen yeni bir sayfa oluşturup buraya bağlama seçeneğiniz vardır. Bu, varsayılan ödeme sayfalarını geçersiz kılar ve müşterileri özel sayfalara gönderir.

Gelişmiş sekmesindeki diğer bir seçenek de SSL sertifikası gerektiren Güvenli Ödemeyi Zorla'dır.

Adım 6: WordPress Özelleştirici'de temanızın ödeme tasarımını değiştirin

WooCommerce işlevine sahip WordPress temaları, ödeme stilinizi kolayca ayarlamak için genellikle WordPress Özelleştirici araçlarını yükler.

Tüm WooCommerce temalarının benzersiz WordPress Özelleştirici ayarları sunduğunu unutmayın (bazılarının hiçbir ayarı yoktur), ancak genel olarak, ödeme üzerinde hızlı kontrol için WordPress Özelleştirici'yi kontrol etmeye değer.

Başlamak için Görünüm > WordPress'te Özelleştir'e gidin.

Varsa, temanız WordPress Özelleştirici'de bir yerde bir WooCommerce düğmesi göstermelidir. Bunun üzerine tıklayın.

Bu sadece Vitrin temasına bir örnektir (bu nedenle aynı şeyi göremeyebilirsiniz), ancak temaların Özelleştirici'de bir Ödeme sekmesine sahip olması oldukça yaygındır. Ödeme üzerinde kontrolü gösterebilecek bunu veya benzer bir şeyi seçin.

Temanızın sunduğu tüm ödeme ayarlarını gözden geçirin. Vitrin temasında bu alanları isteğe bağlı, zorunlu veya gizli yapabilirsiniz:

• Şirket adı alanı
• Adres satırı 2 alanı
• telefon alanı

Gerekli alanları yıldız işaretiyle vurgulamak da mümkündür.

Son olarak, Vitrin teması, ödemenin sonunda bir Gizlilik Politikası ve Şartlar ve Koşullar sayfası gösterme seçenekleri sunar.

Yöntem 2: WooCommerce ödeme alanlarını ve genel stili düzenlemek için bir sayfa oluşturucu kullanın

Elementor, Beaver Builder ve Themify gibi sayfa oluşturucuların tümü, şu anda WooCommerce ödeme sayfasında bulunanları geçersiz kılmak için WooCommerce içerik widget'ları sunar.

Sayfa oluşturucular, Premium planları için neredeyse yalnızca WooCommerce ödeme modüllerini ayırır, bu nedenle bu işlevsellik için ödeme yapmanız gerekme ihtimali yüksektir. Örneğin, Pro planıyla Elementor Checkout widget'ını alırsınız.

Bunu söyledikten sonra, bir sayfa oluşturucu size ödeme sayfanız üzerinde neredeyse tam kontrol sağlar, bu nedenle WooCommerce ödemesini kodlama bilgisi olmadan düzenlemenin kolay bir yoludur ve yılda yalnızca yaklaşık 50 ila 100 ABD Doları karşılığında.

Bu öğreticide, ödeme özelleştirmesinin genellikle Elementor kullanan bir sayfa oluşturucuyla nasıl çalıştığını göstereceğiz.

Adım 1: Belirlenen Ödeme Sayfasını Elementor'da açın

Elementor'da WooCommerce ödemesini düzenlemek için WooCommerce tarafından otomatik olarak oluşturulan Ödeme sayfasına gitmelisiniz. Bunu Sayfalar > Tüm Sayfalar altında bulun.

"Ödeme Sayfası" etiketli sayfayı açın, ardından Elementor ile Düzenle'yi tıklayın.

Adım 2: WooCommerce ödeme kısa kodunu kaldırın

WooCommerce otomatik olarak “WooCommerce varsayılan WooCommerce ödeme modülünü oluşturan düzenleyiciye "ödeme" kısa kodu.

Amaç, bunu sayfa oluşturucunuzdan bir ödeme modülüyle değiştirmek. Bu nedenle, WooCommerce ödeme kısa kodunu silin.

3. Adım: Elementor Checkout widget'ını bırakın

Şimdi sayfa oluşturucunuzun ödeme widget'ını bulma zamanı. Elementor, arama çubuğunu kullanarak veya WooCommerce başlığının altına göz atarak bulabileceğiniz Checkout adlı bir tane sunar. Checkout widget'ını tıklayın ve "Widget'ı Buraya Sürükle" yazan boş sayfaya sürükleyin.

Not: Elementor'un Premium sürümüne yükseltmediyseniz , Checkout widget'ını göremeyebilirsiniz. Çoğu sayfa oluşturucu için durum budur.

4. Adım: İçeriği, stili ve gelişmiş özellikleri özelleştirin

Ödeme widget'ının üzerine sürükledikten sonra Elementor, ödeme önizlemesini oluşturur. Ardından, ödemenin her yönünü özelleştirmek için soldaki bu sekmelere tıklayabilirsiniz:

Örnek olarak, Genel Düzen'i bir sütuna değiştirebilir ve ad alanı için yer tutucu metni ayarlayabilirsiniz.

Diğer özelleştirme sekmeleri şunları içerir:

• Fatura Detayları
• Ek Bilgiler
• Siparişiniz
• Kupon
• Ödeme

Stil sekmesi altında WooCommerce ödemesini düzenlemenin de sonsuz yolu vardır.

Bu sekmeleri kullanın:

• Bölümler
• tipografi
• Formlar
• sipariş özeti
• Satın Alma Düğmesi

Örnek olarak, yeşil olan mavi Satın Al düğmesini değiştirdik.

Son olarak, Gelişmiş sekmesi düzenlemek için daha da güçlü araçlar sunar:

• Düzenler
• Hareket Efektleri
• dönüşümler
• Arka plan
• Sınırlar
• maskeler
• Cevaplanabilirlik
• Öznitellikler
• Özel CSS

WooCommerce için önceden "Ödeme Sayfası" olarak ayarlanan sayfaya bağlı kaldığınız ve sayfa oluşturucu ödeme aracı için WooCommerce ödeme kısa kodunu değiştirdiğiniz sürece, değişiklikleri kaydedebilir ve işlemi tamamlayabilirsiniz!

Yöntem 3: Alanları düzenlemek için bir özelleştirici eklentisi yükleyin

Birçok WooCommerce ödeme özelleştirme eklentisi mevcuttur, örneğin:

Çoğu WooCommerce ödeme eklentisi, alanları değiştirmek ve eklemek için ek özelleştirme araçları sağlar, ancak Multi-step Checkout eklentisi gibi tasarımı tamamen yenilemek için birkaç tane vardır.

Yukarıda önerilen tüm eklentilere bakmanızı öneririz, ancak bir eklenti ile WooCommerce ödemesini nasıl düzenleyeceğinizi anlamanıza yardımcı olmak için Checkout Field Editor eklentisi ile hızlı bir eğitimden geçeceğiz.

1. Adım: Checkout Field Editor eklentisini kurun ve etkinleştirin

Checkout Field Editor eklentisini kurun, ardından eklentiyi etkinleştirme sürecini gözden geçirin.

Eklenti etkinleştirildiğinde, WordPress'e WooCommerce > Checkout Form'a giderek erişebileceğiniz yeni bir sekme ekler.

2. Adım: Mevcut alanları düzenleyin

Eklenti, artık varsayılan WooCommerce ödemesine bağlantı vermesi dışında, WooCommerce kasanızdaki tüm mevcut alanları görüntüler, böylece alanlar üzerinde tam kontrole sahip olursunuz.

Şunları düzenleyebilirsiniz:

• Faturalandırma Alanları
• Nakliye Alanları
• İlave Alanlar

WooCommerce ödeme alanlarını düzenlemek için değiştirmek istediğiniz alanın yanındaki Düzenle'ye tıklayın. Bu örnek için Şirket Adı alanını değiştireceğiz.

Alanı Düzenle penceresinde, aşağıdaki gibi alan seçeneklerini değiştirebilirsiniz:

• Etiket
• Yer tutucu
• Varsayılan değer
• Sınıf
• doğrulama

Müşterilerin alanı doldurmak zorunda kalmaması için Gerekli kutusunun işaretini kaldırmak da mümkündür. Ayrıca, ödeme sayfasında hiç görünmemesi için alanı devre dışı bırakabilirsiniz. Kaydet ve Kapat 'ı tıkladığınızdan emin olun.

Eklenti genellikle bundan sonra her şeyi kaydeder, ancak çalıştığından emin olmak için Değişiklikleri Kaydet düğmesine tekrar tıklayabilirsiniz.

Gördüğünüz gibi, ödeme alanından Şirket Adı alanını kaldırdık.

Ve ön uç kasasından gitti.

Yer Tutucu metni gibi bir şeyi de düzenlemek isteyebilirsiniz. Bu durumda, söz konusu alanı açmak ve ayarları değiştirmek aynı işlemdir.

Ödeme sayfamızdaki Ad alanı artık yeni yer tutucu metni gösteriyor.

Adım 3: WooCommerce kasasına yeni bir alan ekleyin

Tamamen yeni bir alan eklemek için Alan Ekle düğmesine tıklayın.

Aşağıdaki gibi seçenekler arasından seçim yaparak alan Türü'nü seçin:

• Metin
• Sayı
• Gizlenmiş
• Şifre
• Telefon
• onay kutusu
• Ay
• URL
• ve daha fazlası

Örnek olarak, bir Sayı alanı oluşturacağız ve müşterilerden Sadakat Ödülleri Numaralarını yazmalarını isteyeceğiz. Ayrıca yer tutucular, varsayılan değerler ve bunun gerekli bir alan olup olmadığı gibi öğeleri de belirleyebilirsiniz.

Etkin kutusunu işaretlediğinizden emin olun, ardından Kaydet ve Kapat 'ı tıklayın.

4. Adım: Sonuçları görüntüleyin

Arka uçta, listenin alt kısmında yeni ödeme alanını göreceksiniz. Varsayılan olarak sona yerleştirilir, ancak yeniden sıralamak için tıklayıp sürükleyebilirsiniz.

Ve yeni alan, ön uç ödeme modülünde de görünür.

Mükemmel ödeme sayfasını bugün oluşturun

İstediğiniz sonuçlara ulaşmanıza yardımcı olup olmadıklarını görmek için varsayılan WooCommerce ödeme ayarlarıyla başlamanızı öneririz. Daha gelişmiş düzenlemeler için özel alanlar kullanmayı düşünün. Gelişmiş, ancak uygulaması nispeten kolay özelleştirmeler için önerilen sayfa oluşturuculardan birini kullanın.

WooCommerce ödemesini nasıl düzenleyeceğinizle ilgili ana sorularınız nelerdir? Düşüncelerinizi yorumlarda paylaşın!