Divi’deki fiyat tablonuza basit bir şerit ödeme düğmesi nasıl eklenir
Stripe, özellikle teknolojiyi anlayan bir geliştiriciyseniz, çevrimiçi işletmeler için çok esnek bir ödeme işleme çözümüdür. Ancak, bir geliştirici değilseniz ve yine de çevrimiçi birkaç ürün satmak için bir şerit kullanmak istiyorsanız, bunu yapmanın basit bir yolu vardır. Aslında, birkaç kod (veya basit eklentiler) ile, web sitenize bir anda bir şerit ödeme düğmesi ekleyebilirsiniz. Bu öğreticide, WordPress eklentisi için şerit ödemeleri kullanarak divi web sitenize nasıl bir şerit ödeme düğmesi ekleyeceğinizi göstereceğim. Divi düzeninize uyacak şekilde düğmenizi nasıl düzenleyeceğinizi bile göstereceğim.
Başlayalım! Aşağıdaki gizlice göz atma, bu öğreticide yapacağımız şerit düğmesinin görüntüleridir.
Divi teması (yüklü ve aktif)
Şerit hesabı
WPPress eklentileri için şerit ödeme WP Simply Pay (yüklü ve etkin)
Divi Builder’da ücretsiz olarak mevcut olan dijital ürün fiyat sayfalarının düzenini de kullanacağız
Eklentiler hakkında WPPress tarafından WPPress için şerit ödemesi Simply Pay, basit bir kısa kod kullanarak çizgilerle kredi kartı ödemeleri toplamaya başlamanızı sağlayan bir eklentidir. Bir eklenti kullanmadan manuel olarak bir ödeme formu ve ödeme düğmesi oluşturabilirsiniz, ancak bu eklenti bunu kolaylaştırdığından ve bazı rahat özellikler sunduğundan (ödeme onayı ve ödeme hatası sayfası gibi), bunun uzun vadede daha yararlı olacağını düşünüyorum . . Öğreticinin ücretsiz bir Lite sürümünü kullanacağım. Eklentinin Pro sürümü, özel alanlar, özel miktarlar ve abonelik özellikleri gibi şeylere destek ile birlikte form stiliniz üzerinde daha fazla kontrol sağlayacaktır. Eklentiyi yükledikten ve etkinleştirdikten sonra eklenti ile bir şerit formu hazırlayın, basit ödeme yaptıktan sonra gidin. Lite> Ayarlar. Ardından Stripe Keys sekmesinin altında, şerit hesap anahtarınızı girmeniz gerekir. Bu öğretici uğruna, yalnızca test anahtarını kullanacağım, ancak gerçek para toplamaya başlamak istiyorsanız, şerit hesabınızı emin olmalısınız ve aktive etmelisiniz. Şerit hesabınızı girip geliştirici> yangın kilidi tıklayarak yangın anahtarınızı bulabilirsiniz.
Yayınlanabilir anahtar ve gizli anahtarı eklenti ayarlarına kopyalamanız gerekir. Şimdi genel sekmeye atlayın. Orada ödeme başarı sayfasını ve ödeme hatası sayfasını belirleyebileceksiniz. Eklentinin sizin için sayfayı oluşturduğunu göreceksiniz. Ancak sayfa içeriği kısa bir kodla üretildiğinden, sayfanın özel bir sürümünü oluşturmak için herhangi bir divi düzenine herhangi bir divi modülüne kısa kodu ekleyebilirsiniz. Şimdilik, varsayılan sayfayı yerine kaydedin ve hazırlığa devam edin. Ödeme düğmesi stilini “yok (temadan miras)” olarak ayarlayın. Yapılan şey, yalnızca varsayılan mavi satır düğmesini düzenlemek için kullanılan CSS’nin yayınlanmasıdır. Divi üzerindeki düğmeyi düzenlemek için kendi özel CSS’imizi eklediğimizde bu, her şeyi biraz daha temiz hale getirecektir. Sonra değişiklikleri saklayın. Ödeme Onayı sekmesi altında, ödeme onay sayfanızdaki kısa kod tarafından görüntülenen mesajı ve bilgileri ayarlamak için sağlanan şablon etiketini kullanabilirsiniz. Ancak bu öğretici için yalnızca varsayılan mesajı bırakacağım.
Stripe Ödeme Formları Oluşturma Ödeme Formu, kullanıcıların sayfadan ayrılmak zorunda kalmadan satın alma işlemini tamamlamalarını sağlayan bir Sembulan ödeme formu oluşturan bir Stripe Ödeme düğmesidir. Bu nedenle, sattığınız her ürün veya hizmet için yeni bir ödeme formu oluşturmanız gerekir. Bu kullanım durumunda, üç yapay ürün için üç ödeme formu yapacağız. Yeni bir ödeme formu oluşturmak için WordPress kontrol panelini açın ve Basit Ödeme Lite> Yeni Ekle’ye gidin. Ödeme formunda bir başlık verin (bu başlık önde görüntülenmeyecektir). Ardından Ödeme Seçeneği sekmesi altında, bir kez numarayı girin. Ardından, sayfadaki Form Ekran sekmesini tıklayın ve varsayılan ödeme düğmesi metnini “Şimdi Satın Al” (veya ne istersen) olarak değiştirin. Ödeme düğmesi işleme metnini de seçebilirsiniz. Sekme ekranının kontrolü altında, aşağıdakileri güncelleyin: Logo/URL Öğe Görüntüsünün Şirket Adı Açıklama Beni Etkinleştir: Evet
Bu seçenek, bu özel ürün için ödeme açılır penceresinde neyin görüntülendiğini belirler. Bittiğinde, ödeme formunu emin olun ve yayınlayın/güncelleyin. Son olarak, Divi sayfanızın düzenine eklemek için ödeme formu düzenleme sayfasının sağ üst kısmında bulunan ödeme formu kısa kodunu kopyalamanız gerekir. Ancak şimdilik, her biri öğelerin, logoların/görüntülerin ve miktarın kendisinin açıklaması ile iki ödeme formu daha oluşturmak için aynı sürece devam edebilirsiniz. Tüm ödeme formlarınız oluşturulduktan sonra, Basit Pay Lite> Ödeme Formuna giderek ödeme formunuzu ziyaret edebilirsiniz. Orada kısa kodlara kolay erişiminiz olacak. Kullanıma hazır olan kısa bir şerit ödeme formu olmadan divi sayfa düzeninize bir şerit ödeme düğmesi ekleyin, şimdi Divi sayfamızın düzenini hazırlamamız ve çalıştırmamız gerekiyor. Bunu yapmak için yeni bir sayfa oluşturun, sayfa başlığınızı verin ve Divi Builder’ı kullanmak için tıklayın.
Ardından “Önceden Yapılan Bir Düzen Seç” seçeneğini seçin. Bir dijital ürün düzeni paketini açın ve dijital ürün fiyatı sayfası kullanmak için tıklayın. Düzen sayfaya yüklendikten sonra sayfayı yayınlayın, ardından önde oluşturmak için tıklayın.
Ayrı bir sekmede, ödeme formu sayfasına dönün ve fiyat tablosuna eklemek istediğiniz kısa kodu alın.
Ardından, fiyat sayfanızın düzenine dönün ve düzendeki fiyat tablolarından biri için fiyat tablosu ayarlarını açın. Düğme metnini kaldırın (kısa kod bir düğme olarak işlev göreceği için ihtiyacınız yok) ve içerik kutusundaki içeriğin altındaki kısa kodu yapıştırın. Düğmenin altına vurgulanan “Test Modu” metni ile stilsiz bir düğme göreceksiniz. Varsayılan mavi düğme için tema stilini kullanma seçeneğini seçtiğimiz için Düzlenmed düğmesi. Test modu metni yalnızca doğrudan bir satır ödeme formu kullanmadığınızı hatırlatmak için mevcuttur. Test modu metni, yangın kilidi doğrudan kullanıldıktan sonra açıkça kaybolacaktır. Ardından, geri kalan iki fiyat tablosuna iki kısa ödeme kodu formunu kopyalamak ve eklemek için aynı sürece devam edin. Ödeme formunun düzgün çalıştığından emin olmak için düğmelerden birini test edin. Böyle görünmeli … Ne yazık ki, eklenti sürümü, gördüğünüz varsayılan stilin dışında ödeme formunu ayarlamanıza izin vermez. Ancak işlevselliği var ve birçok durumda bu ekstra stile ihtiyacınız yok. Ancak, bu düğmeleri ayarlayabilirsiniz! Şerit Ödeme Düğmesini Düzenleme Şerit Ödeme düğmesini düzenlemek için düzenle eşleşecek şekilde, sayfa ayarlarımıza bazı özel CSS ekleyeceğiz. İlk olarak, düğmeyi ayarlamak için hangi seçmenleri kullanacağımızı bulmamız gerekiyor. Tarayıcı geliştiricinizi kullanarak bulabilirsiniz. Sağ -Şerit düğmesine tıklayın ve “Kontrol Et” i seçin. HTML kodunda, düğmenin CSS sınıfı “Simpay-Payment-btn” olduğunu görebilirsiniz. Bu, düğme stilini hedeflememiz gereken seçmen. Şerit ödeme düğmesi stilimizi daha önce oluşturulmuş olan düzende kullanılan düğmeyle eşleştirmek istiyorsak, ihtiyacımız olan CSS kodunu almak için sayfada düzenlenmiş Divi düğmelerinden birini kontrol edebiliriz. Şimdi sayfa ayarlarını açın ve gelişmiş sekmenin altına aşağıdaki özel CSS ekleyin: .Simpay-Payment-btn {Renk: #ffffff! Önemli; Sınır rengi: RGBA (0.0,0,0); Border-Radius: 100px; Harf alanları: 2px; yazı tipi boyutu: 16px;
Font ailesi: ‘Poppins’, Helvetica, Arial, Lucida, sans-serif! Önemli;
Yazı tipi-ağırlık: 600! Önemli;
Arka Plan rengi: #091C4F;
Dolgu Top: 16px! Önemli;
Dolgu-Sağ: 32px! Önemli;
Pilding Alt: 16px! Önemli;
Dolgu-sol: 32px! Önemli;
}
İşte burada! Sonuç sonucuna bakalım.
Ödeme Onayı ve Ödeme Başarısız Sayfanızı Ayarlama Eklentinin ödeme onayınızı ve sayfanın içeriği kısa bir kod kullanarak başarısız ödeme ile sonuçlandığından, kısa kodu herhangi bir Divi düzenine ekleyebileceğinizi ve ardından varsayılan Divi ayarlarını kullanabileceğinizi unutmayın. Metni isteklerinize göre düzenlemek için. Bu, özel bir CSS kullanmak zorunda kalmadan bu sayfanın stilini web sitenizle eşleştirmek için kullanışlıdır. Stripe’nin son zihni, çevrimiçi ödeme toplamak için çok rahat bir çözüm olabilir. WordPress için basit bir ödeme eklentisiyle, temel şerit ödeme işlevselliğini alabilir ve Divi sitenizde birkaç dakika içinde çalıştırabilirsiniz. Ayrıca, Divi önceden hazırlanmış düzenden yararlanıyorsanız, sadece sizin için oluşturulan CSS kodunu kopyalayıp ekleyerek düzeninizi eşleştirecek şekilde şerit ödeme düğmenizi ekleyebilir ve ayarlayabilirsiniz. Sonuç, sayfadan ayrılmak zorunda kalmadan ziyaretçilerden ödeme toplayabilen tamamen işlevsel bir ödeme işleme aracıdır. WordPress web sitenizde şerit ödemeleri almanın daha fazla yolunu keşfetmekten çekinmeyin. Umarım bu öğreticiyi yararlı bulursunuz ve umarım yorumlarda sizden haber almayı umar. Kızarmış ekmek!
