WooCommerce ödeme sayfasında alışveriş sepeti ayrıntıları nasıl değiştirilir?

Çoğunuz WooCommerce'in müşterilerin alışveriş sepetini ödeme sayfasından güncellemesine izin vermediğini bilirsiniz. Bu, ödeme sayfasından miktarı değiştiremeyeceğiniz veya ürünü silemeyeceğiniz anlamına gelir. Müşterinin sepet sayfasına geri dönmesi, sepeti güncellemesi ve ardından tekrar ödeme sayfasına gitmesi gerekir. Bu, müşterilerin gerekli tüm bilgileri tekrar doldurmasına neden olur. Bu, müşteriler için, özellikle misafir kullanıcılar için (ki bu büyük bir çoğunluk) biraz sinir bozucu .

Bu yazıda, WooCommerce'in ödeme sayfasında alışveriş sepetinin nasıl güncelleneceğini tartışacağız. Bu özelliği ofisteki Fun Friday etkinliğimizde geliştirdim. Eğlenceli Cumalarda , bütün bir günü kişinin asıl işiyle ilgili olmayan şeyleri yaparak geçirmeye çalışırız.

İlk olarak, WooCommerce Checkout sayfasındaki sepet ayrıntıları tablosuna bir göz atalım:

Burada müşteri ürünün miktarını düzenleyemez veya silemez. Bu nedenle, müşterinizi Ödeme sayfasından ayrılmadan miktarı değiştirme ve ürünü silme işlevselliğini sağlamak istiyoruz.

Hadi başlayalım

Bu açıklamayı atlamak ve bunun yerine işlevselliği mağazanıza uygulamak istiyorsanız, oluşturduğum eklentiyi indirebilirsiniz.

1. Ödeme sayfasının sepet bölümünde UI değişikliklerinin yapılması

“Siparişiniz” tablosundaki “Ürün” sütununu değiştirmemiz gerekiyor. Sepetteki her ürün için “Sil” ikonu ve “Miktar seçici” eklememiz gerekiyor.

Bunu başarmak için WooCommerce, her alışveriş sepeti öğesinin Ürün adı satırını değiştirmenize izin veren bir filtre vermiştir: woocommerce_cart_item_name .

Siparişiniz tablosunda görüntülenen seçilen miktar, başka bir WooCommerce filtresi kullanılarak da değiştirilebilir: woocommerce_checkout_cart_item_quantity .

Her iki filtreyi de kullanacağız ve müşterilerin ödeme sayfasında alışveriş sepeti ayrıntılarını düzenlemesine izin vereceğiz. Yeni bir eklenti oluşturarak aşağıdaki değişiklikleri uygulayabilirsiniz.

İlk olarak, Sipariş tablonuzdaki her bir ürün için gösterilen miktara ihtiyacımız yok. Bu yüzden filtreyi kullanacağız ve boş bir dize döndüreceğiz, böylece WooCommerce verilerinin üzerine yazacaktır.

Bundan sonra, woocommerce_cart_item_name filtresini kullanarak Ürün adı satırını değiştireceğiz ve Miktar alanını ve Sil simgesini ekleyeceğiz.

Burada, değişiklikleri yalnızca ödeme sayfasında uyguladığımızdan emin olmak için is_checkout() işlevini kullanıyoruz. Yukarıdaki kod parçacığında belirtildiği gibi 3 adıma böldüm.

1. Adım: Silme simgesi ekleyin
Bu adımda, sepetteki her ürün için Sil simgesini ekleyeceğiz. Bu, WooCommerce alışveriş sepetinde kullanılan simgeyle aynıdır.

Burada, get_remove_url() WooCommerce işlevini kullandık. Her sepet ürünü için $cart_key'i geçmemiz gerekiyor. Böylece get_remove_url() işlevi, her alışveriş sepeti öğesini silmek için benzersiz bir URL döndürür.

2. Adım: Ürün adını ekleyin
Ürün adı satırını değiştirdiğimiz için, yeni alanlar ile birlikte satıra ürün adını da eklememiz gerekiyor. Ürün adını, ilk argüman olarak iletilen filtrenin kendisinden alacağız. Bizim durumumuzda $product_title.

WooCommerce Mağaza Satışlarını Artırın

"WooCommerce Abandoned Cart Pro'nun yüksek değerli ürünler için satışları ne kadar artırdığını görmek ilginç. Eklentinin, müşterilerin satın alıp almadıklarını (örneğin gıda) önemsemediği düşük değerli ürünler için satışları artırmasını beklerdim, ancak ben böylesine büyük bir satın alma kararı gerektiren ürünler için yaratabileceği farkı görmek beni daha çok şaşırttı." - Katie Keith, Barn2 Media Operasyon Direktörü

3. Adım: Miktar seçici ekleyin
Son olarak, miktar seçiciyi ekleyeceğiz. Burada WooCommerce işlevini woocommerce_quantity_input() kullanacağız.

“input_name”, “input_value”, “max_value”, “min_value” fonksiyonu için dört parametre vermemiz gerekiyor.

• input_name: 'cart' adlı diziyi içerecektir, bunun içinde sepet öğe anahtarını ve miktarı iletmeniz gerekir.
• input_value: Ürünün seçilen miktarını içerecektir.
• max_value: Ürünün maksimum stok sayısı olacaktır.
• min_value: Miktar seçicinin minimum değeri olacaktır.

Yukarıdaki tüm adımlar tamamlandığında, şimdi Ödeme sayfasının Siparişiniz tablosunda sil düğmesi ve miktar seçici görüntülenecektir.

Burada bir koşulumuz var if ( is_checkout() ) { koşulu. Aşağıda belirtilen nedenlerden dolayı gereklidir.

Ürün adı sütun değerini (woocommerce_cart_item_name) değiştirmek için kullandığımız filtreye mağazanızın Sepet sayfasında da denir. Yazdığımız kodun Sepet sayfasının işlevselliğini bozmadığından emin olmak için değişikliklerin yalnızca ödeme sayfasında uygulanmasını sağladık.

2. Sepeti Ajax çağrısı ile güncelleme

Bu kadarını eklemek işe yaramaz, bir müşterinin miktarı değiştirdiğinde sepet toplamına yansıtacağından emin olmamız gerekir.

Değişen Miktar

Sepet toplamını değiştirmek için Ajax çağrısına ihtiyacımız var. Bu nedenle, bir müşteri miktarı değiştirdiğinde, bir işlem yapmamız ve sepet toplamını değiştirmemiz gerekir.

Şimdi “add_quantity.js” dosyasını web sitesinin altbilgisinde sıralayacağız ve ödeme sayfasına geldiğimizde eklendiğinden emin olacağız.

Şimdi, sepet toplamını değiştirmek için ajax'ı çağıracak olan Javascript dosyasına işlevi eklememiz gerekiyor.

Yukarıdaki javascript, değiştirilmiş ödeme formunun verilerini ileteceğimiz ajax'ı arayacaktır. Ancak miktar ikonuna tıkladığımızda arayacaktır. Böylece miktarın değiştirilmiş değerini içerecektir.

Şimdi, değiştirilen miktara göre sepet toplamını değiştirecek olan ajax fonksiyonunu eklememiz gerekiyor.

Ödeme sayfasındaki miktarı değiştirdiğimizde, yukarıdaki fonksiyon çağrılacak ve sepet toplamını değiştirecektir. Fonksiyonlarımızda WooCommerce fonksiyonlarını kullandık.

Sepet toplamını değiştirmek ve ödeme sayfasının Siparişiniz tablosunda görüntülemek için “set_quantity()”, “calculate_totals()”, “woocommerce_cart_totals()” fonksiyonlarını kullandık.

set_quantity() : Bu işlev, değiştirilen miktarı sepete ayarlar.

Değiştirilen miktar değerine sahip olacak javascript işlevinden verileri gönderdik, bu nedenle bu değiştirilmiş değeri kullanacağız ve sepete ayarlayacağız.

hesap_toplam() : Bu işlevi kullanarak, sepetin toplamını tekrar hesaplamasını söylüyoruz.

woocommerce_cart_totals() : Bu fonksiyon, değiştirilen sepeti görüntülemek için kullanılır.

Yukarıdaki tüm hesaplamalar yapıldıktan sonra, ajax işlevini çağırdığımız javascript'e geri dönecektir. Bu işlevin yanıtı olarak, sırayla alışveriş sepetini değiştirecek ve kullanıcıya gösterecek olan 'update_checkout' işlevini 'tetikleyeceğiz' .

Siparişiniz tablosunun “Sil” düğmesi için CSS'ye ihtiyacımız var. Bu yüzden WooCommerce sepeti silme düğmesi gibi görünmelidir. Bu yüzden bunun için CSS'yi eklememiz gerekiyor. CSS'yi web sitenizin altbilgisine ekleyebilirsiniz.

Eklendikten sonra CSS dosyasındaki sil düğmesine CSS'yi vermemiz gerekiyor. CSS aşağıda gösterilmiştir.

Bu nedenle, WooCommerce'in ödeme sayfasındaki miktarı değiştirebileceğimiz işlevselliğe hazırız.

Yukarıdakileri uyguladıktan sonra, ödeme sayfasındaki Sipariş tablonuz şöyle görünür:

Ödeme sayfasının Siparişiniz tablosunun her bir öğesi için miktar seçiciyi ve silme simgesini ekleyecektir.

Bunu Eylül 2016'da piyasaya sürülen WooCommerce için Checkout'ta Change Quantity adlı bir eklenti olarak oluşturdum. 400'den fazla WooCommerce mağazasında kullanılıyor. Bu eklentiyi WooCommerce mağazanızda zaten kullanıyorsanız, eklentiyi incelemek için biraz zaman ayırabilirseniz sevinirim.

Herhangi bir geri bildiriminiz varsa, aşağıdaki yorumlarda bana bildirebilir veya eklentinin destek forumunda yayınlayabilirsiniz.