Divi Mağaza Sayfalarında Sepete Ekle Düğmesi Nasıl Eklenir

Divi kullanıyor ve mağaza sayfalarınızı özelleştirmek mi istiyorsunuz? Bu eğitimde, Sepete Ekle düğmesini Divi mağaza sayfalarına nasıl ekleyeceğinizi öğreneceksiniz.

Bir çevrimiçi mağaza açmayı planlıyorsanız, WooCommerce bunu yapmanın en kolay ve en hızlı yoludur. Bir geliştirici olmasanız bile, bazı mükemmel WooCommerce temaları, başlamanıza ve mağazanızın özelliklerini geliştirmenize yardımcı olabilir. En iyi seçeneklerden biri Divi.

Mağaza Sayfalarına neden Sepete Ekle düğmesi eklensin?

Divi teması, WooCommerce mağazaları için en popüler seçeneklerden biridir. Çok sayıda güçlü özellikle birlikte gelen çok esnek bir temadır. Ancak bir dezavantajı, mağaza sayfalarındaki ürünlerin Sepete Ekle düğmesinin olmamasıdır. Bu, satın alma hunisine bir adım ekler ve dönüşümleri etkileyebilir. İyi haber şu ki, bunu düzeltmenin bir yolu var.

Bu kılavuzda, Divi mağaza sayfalarına Sepete Ekle düğmesini nasıl kolayca ekleyebileceğinizi göstereceğiz.

Divi'de Sepete Ekle Düğmesi Nasıl Eklenir?

Burada, Divi'ye Sepete Ekle düğmesini eklemenin en basit ve en etkili yollarını göstereceğiz. Temanın çekirdek dosyalarında bazı değişiklikler yapacak olsak da, bu yöntemleri yeni başlayanlar için bile takip etmek çok kolay.

Alışveriş sayfalarında Sepete Ekle düğmesini eklemenin başlıca iki yöntemi şunlardır:

1. Functions.php dosyasını değiştirme
2. Kod Parçacıkları eklentisini kullanma

Her iki yöntem de yeni başlayanlar için uygundur ve kısa sürede Sepete Ekle düğmesini eklemenize olanak tanır.

Başlamadan önce

Başlamadan önce size şunları öneriyoruz:

• Bir şeyler ters gittiğinde tam bir yedek oluşturun.
• Bir alt tema oluşturun: Temanın dosyalarını doğrudan değiştirmenizi önermiyoruz. Bunun yerine bir alt tema oluşturabilir ve üzerinde değişiklikler yapabilirsiniz. Bunun için farklı yöntemler vardır. Bu eğitimde bir eklenti kullanacağız.

1) Functions.php'den Sepete Ekle düğmesini ekleyin

Bir Alt Tema Oluşturun

Divi'de Sepete Ekle düğmesini eklemeden önce bir alt tema oluşturmanız gerekiyor. Bunu yapmak için Child Themify adlı ücretsiz bir WordPress eklentisi kullanacağız. Bu nedenle, öncelikle sitenize Child Themify'ı yüklemeniz gerekir.

Ardından, etkinleştirin.

Bundan sonra, eklentinin ayarlarını Görünüm bölümünün altında göreceksiniz.

Açılır menüden bir ana tema seçmeniz gerekecek. Bizim durumumuzda Divi için bir çocuk teması oluşturacağız. Ardından, yeni alt temanıza bir ad verin.

Bazı gelişmiş seçenekler de var, ancak bunun için bunları kullanmanıza gerek yok.

Ana temayı seçip alt temayı adlandırdıktan sonra Alt Tema Oluştur düğmesine basın.

Bundan sonra Görünüm > Temalar bölümüne gidin ve yeni alt temayı göreceksiniz. Etkinleştir.

Şimdi mağazanızın mağaza sayfasını kontrol edin. Bizim durumumuzda, bazı örnek ürünleri kullanarak bir demo mağazası oluşturduk.

Yukarıdaki ekran görüntüsünde de görebileceğiniz gibi, Sepete Ekle düğmesi yoktur. Bu nedenle, bir kullanıcı sepete bir ürün eklemek istediğinde, bunu doğrudan mağaza sayfasından yapamaz. Bunun yerine, belirli ürün sayfalarına gitmeleri ve ürünleri oradan sepete eklemeleri gerekiyor.

İyi haber şu ki, alışveriş sayfasına Sepete Ekle düğmesini eklemenin kolay bir yolu var. Bunu yapmak için, alt temanıza birkaç satır kod eklemeniz gerekecek.

Functions.php dosyasını değiştirin

Divi'deki alışveriş sayfasına Sepete Ekle düğmesini eklemek için tema düzenleyiciye gidin ve functions.php dosyasını seçin. Aşağıdaki kodu kopyalayın ve function.php dosyanıza yapıştırın.

 // Bu kod, mağaza döngüsünü gösteren bir sayfaya "Sepete Ekle" düğmeleri ekler
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 20 );

Kodu yapıştırdıktan sonra Dosyayı Güncelle 'yi tıklayın. Mağaza sayfasının ön ucunu kontrol ederseniz, değişiklikleri göreceksiniz.

Alışveriş sayfasına Sepete Ekle butonlarını eklediniz !

2) Kod Parçacıkları Eklentisi

Alternatif olarak, function.php dosyasını güncellemek yerine, bir eklenti kullanarak Divi'ye Sepete Ekle düğmesini ekleyebilirsiniz. WordPress ve özelleştirme konusundaki deneyimimize göre, Kod Parçacıkları bu görev için en iyi araçlardan biridir.

Öncelikle sitenize Code Snippets eklentisini yüklemeniz ve etkinleştirmeniz gerekiyor.

Ardından, web sitenize yeni bir snippet eklemeniz gerekecek.

Tanımlama amacıyla snippet'inizi adlandırın, aşağıdaki kodu kopyalayın ve Kod alanına yapıştırın.

 // Bu kod, mağaza döngüsünü gösteren bir sayfaya "Sepete Ekle" düğmelerini içerecektir
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 20 );

Ardından, snippet'i kaydedin ve etkinleştirin.

Bir kez daha, alışveriş sayfanızda Sepete Ekle düğmelerini göreceksiniz.

Gördüğünüz gibi, her iki yöntem de çok basit ve etkilidir. Yeni başlayan biriyseniz, Kod Parçacıklarını kullanmanızı öneririz. Çekirdek dosyaları kolayca değiştirmenizi sağlayan ücretsiz bir araçtır ve web sitenizi bozmaz.

Sepete Ekle Düğmesi Nasıl Özelleştirilir

Artık Divi mağaza sayfalarına Sepete Ekle düğmesini başarıyla eklediğinize göre, düğmeyi özelleştirmeniz gerekir.

Bunu yapmak için, düğmeniz için özel bir CSS sınıfı belirlemeniz gerekir. Basit bir PHP kodu işi yapacak. Ardından, biraz CSS ekleyebilir ve düğmeyi özelleştirebilirsiniz.

Bunu yapmak için aşağıdaki PHP kodunu Kod Parçacıkları bölümüne yeni bir kod olarak yapıştırın.

 add_action( 'woocommerce_after_shop_loop_item', 'quadlayers_woocommerce_template_loop_add_to_cart', 10 );
add_action( 'woocommerce_after_shop_loop_item_title', 'quadlayers_woocommerce_template_loop_add_to_cart', 10 );

işlev quadlayers_woocommerce_template_loop_add_to_cart(){
   woocommerce_template_loop_add_to_cart(array('class'=>'button product_type_simple add_to_cart_button ajax_add_to_cart my_class_here')); 
}

Ardından, düğmeyi değiştirmek için CSS'yi kullanabilirsiniz. Bu kodda, düğmenin varsayılan CSS sınıflarından bahsettik: button product_type_simple add_to_cart_button ajax_add_to_cart . Ek olarak, my_class_here değiştirerek özel CSS sınıfınızı ekleyebilirsiniz.

Temanıza ek CSS eklediğinizde, şunun gibi bir şey kullanabilirsiniz: .my_class { option:value !important; } .my_class { option:value !important; } my_class CSS sınıfınızla değiştireceğinizden emin olun.

Örneğin, şöyle bir CSS kodu kullanabilirsiniz:

 .woocommerce-LoopProduct-link + bir {
    /* Özel CSS'niz burada */
}

Divi teması, özel bir CSS düzenleyiciyle birlikte gelir ve tüm CSS kodunu buraya yapıştırabilirsiniz. Öte yandan, WordPress özelleştiriciniz aracılığıyla ek CSS bölümünü kullanabilirsiniz. Gerçek zamanlı olarak ne yaptığınızı görmenizi sağladığı için Özelleştirici'yi kullanmanızı öneririz.

Çözüm

Divi mağaza sayfalarına Sepete Ekle düğmesini bu şekilde kolayca ekleyebilirsiniz. Bu sayede satın alma sürecini iyileştirebilir, müşterilere daha iyi bir deneyim sunabilir ve dönüşümlerinizi artırabilirsiniz. Ek olarak, mağazanızda sepet terkini azaltmanıza yardımcı olacaktır.

Mağazanızda dönüşümü artırmak için bir başka ilginç seçenek de mağazanıza doğrudan ödeme bağlantıları eklemektir. Bu şekilde, satın alma sürecini kısaltır ve kullanıcıların bırakma olasılığını azaltırsınız. Bununla ilgili daha fazla bilgi için, WooCommerce doğrudan ödeme bağlantılarının nasıl oluşturulacağına ilişkin kılavuzumuza bakın.

Ek olarak, mağazanızı özelleştirmek istiyorsanız aşağıdaki eğiticilere göz atmanızı öneririz:

• WooCommerce Mağaza Sayfası nasıl özelleştirilir?
• WooCommerce'de programlı olarak sepete ekle işlevi
• WooCommerce'de AJAX sepete ekle düğmesi nasıl uygulanır?
• WooCommerce ödeme sayfası nasıl özelleştirilir?

Son olarak, Divi Temasından en iyi şekilde yararlanmak için kılavuzlarımıza göz atabilirsiniz:

• Divi'de Altbilgi Nasıl Gizlenir ve Kaldırılır?
• Divi İletişim Formu Çalışmıyor mu? İşte Nasıl Düzeltilir!

Bu makaleyi faydalı bulduysanız, lütfen bu gönderiyi sosyal medyada arkadaşlarınızla paylaşmayı düşünün. Başkalarının Divi mağaza sayfalarını özelleştirmesine yardımcı olacaktır.

Dönüşümlerin nasıl iyileştirileceği hakkında daha fazla bilgi için en iyi WooCommerce hızlı satın alma eklentilerine göz atın.