WooCommerce Sepeti Boşalt Butonu Nasıl Eklenir?

Merhaba! Ben Boran Karadeniz. WooCommerce ile bir e-ticaret sitesi yönetiyorsanız, müşteri deneyimini artırmak için her detayı düşünmeniz gerekir. Sepete eklenen ürünlerin kolayca silinmesini sağlamak, kullanıcı dostu bir alışveriş deneyimi sunar. Ancak, WooCommerce’in varsayılan ayarlarında “Sepeti Boşalt” butonu bulunmaz. Bu rehberde, WooCommerce sepeti boşalt butonu ekleme işlemini adım adım öğreneceksiniz. Ayrıca, bu özelliği nasıl özelleştirebileceğinizi ve kullanım senaryolarını detaylıca ele alacağım. 😊

WooCommerce Sepeti Boşalt Butonu Nedir ve Neden Gerekli?

Sepeti boşalt butonu, kullanıcıların sepetlerindeki tüm ürünleri tek bir tıklamayla kaldırmasına olanak tanır. Bu özellikle, kullanıcıların hızlı bir şekilde değişiklik yapması gereken durumlarda faydalıdır.

Neden Önemlidir?

• Kullanıcı Deneyimini İyileştirir: Daha temiz ve kullanışlı bir alışveriş deneyimi sunar.
• Hızlı İşlem İmkanı: Müşteriler tek bir tıklamayla sepetlerini temizleyebilir, bu da zaman kazandırır.
• Mobil Kullanıcılar İçin Avantajlıdır: Sepetteki ürünleri tek tek kaldırmak yerine toplu işlem yapılmasını sağlar.

Eğer WooCommerce sitenizde henüz bir sepeti boşalt butonu yoksa, bu özelliği hemen eklemenizi öneririm.

WooCommerce Sepeti Boşalt Butonu Nasıl Eklenir?

WooCommerce’e sepeti boşalt butonu eklemek için birkaç farklı yöntem bulunmaktadır:

1. Kod ile Eklemek
2. Eklenti Kullanarak Eklemek
3. Tasarımsal Özelleştirmeler ile Kullanıcı Deneyimini Artırmak

1. Kod ile Sepeti Boşalt Butonu Eklemek

Kod kullanarak WooCommerce sepetine boşalt butonu eklemek oldukça kolaydır. Bunun için, temanızın functions.php dosyasına birkaç satır kod eklemeniz yeterlidir.

Adım 1: functions.php Dosyasını Düzenleyin

WordPress panelinizde Görünüm > Tema Düzenleyici sekmesine giderek aktif temanızın functions.php dosyasını açın.

Adım 2: Aşağıdaki Kodu Ekleyin

<?php
/**
 * Sepeti Boşalt Butonu ve İşlevi
 * 
 * @snippet     Sepeti Boşalt Butonu Ekleme ve İşlevi
 * @description WooCommerce sepet sayfasına "Sepeti Boşalt" butonu ekler ve bu buton aracılığıyla sepeti temizler.
 * @author      Boran Karadeniz
 * @version     1.0.1
 * @compatible  WooCommerce 6.0+
 */

// Sepet sayfasına "Sepeti Boşalt" butonu ekleme
add_action('woocommerce_cart_actions', 'sepeti_bosalt_butonu_ekle');

/**
 * Sepet sayfasına "Sepeti Boşalt" butonunu ekler.
 */
function sepeti_bosalt_butonu_ekle() {
    // Butonun HTML çıktısını oluştur
    echo '<a href="' . esc_url( add_query_arg('empty-cart', '1', wc_get_cart_url() ) ) . '" 
             class="button sepeti-bosalt" 
             onclick="return confirm(\'Sepeti boşaltmak istediğinizden emin misiniz?\')">
             Sepeti Boşalt
          </a>';
}

add_action('init', 'sepeti_bosalt_islevi');

/**
 * Sepeti boşaltma işlevini aktifleştirir.
 * Kullanıcı "empty-cart" sorgu parametresini ilettiğinde sepeti temizler.
 */
function sepeti_bosalt_islevi() {
    // Kullanıcı "empty-cart" parametresini gönderdi mi kontrol et
    if (isset($_GET['empty-cart']) && $_GET['empty-cart'] === '1') {
        // WooCommerce sepetini temizle
        WC()->cart->empty_cart();
        
        // Kullanıcıyı sepet sayfasına yönlendir ve mesaj göster
        wp_safe_redirect(wc_get_cart_url());
        wc_add_notice('Sepet başarıyla boşaltıldı.', 'success');
        exit; // İşlemi burada sonlandır
    }
}

Bu Kod Ne Yapar?

• Sepeti Boşalt Butonunu Ekleme: Sepet sayfasına yeni bir buton ekler.
• Sepeti Temizleme İşlevi: Butona tıklandığında sepetteki tüm ürünleri kaldırır.

Örnek Sonuç:

Buton, sepetteki ürünlerin hemen altına “Sepeti Boşalt” şeklinde eklenir.

2. Eklenti Kullanarak Sepeti Boşalt Butonu Eklemek

Kod eklemek istemeyen kullanıcılar için, eklenti kullanarak bu özelliği kolayca eklemek mümkündür. WooCommerce için geliştirilmiş bazı eklentiler bu işlemi birkaç tıklamayla gerçekleştirir.

Önerilen Eklentiler:

• WooCommerce Cart Abandonment Recovery: Sepet yönetimi ve ek özellikler sunar.
• Advanced WooCommerce Cart: Sepeti boşaltma ve özelleştirme özellikleri sağlar.

Eklenti Kullanımı Adımları:

1. WordPress Paneli > Eklentiler > Yeni Ekle bölümüne gidin.
2. Yukarıdaki eklentilerden birini aratarak yükleyin ve etkinleştirin.
3. Eklenti ayarlarına giderek, sepeti boşalt butonunu aktifleştirin ve özelleştirin.

Avantajları:

• Kod bilgisi gerektirmez.
• Farklı özelleştirme seçenekleri sunar.

3. Tasarımsal Özelleştirme ile Sepeti Boşalt Butonu

Sepeti boşalt butonunu daha dikkat çekici hale getirmek, kullanıcıların bu özelliği daha kolay fark etmesini sağlar. CSS kullanarak butonun tasarımını özelleştirebilirsiniz.

CSS ile Buton Tasarımı

WordPress panelinizde Görünüm > Özelleştir > Ek CSS sekmesine gidin ve aşağıdaki kodları ekleyin:

/* Sepeti Boşalt butonu için temel stil */
.button.sepeti-bosalt {
    background-color: #ff4444; /* Dikkat çekici kırmızı bir arka plan */
    color: #ffffff; /* Kontrastı artırmak için beyaz yazı rengi */
    padding: 10px 20px; /* Butona iç boşluk ekleyerek boyutlandırma */
    border: none; /* Varsayılan tarayıcı kenarlıklarını kaldırma */
    border-radius: 5px; /* Yumuşatılmış köşeler */
    font-size: 14px; /* Yazı boyutu */
    font-weight: bold; /* Yazıyı kalın yaparak okunabilirliği artırma */
    text-transform: uppercase; /* Yazıyı büyük harfe çevirme */
    text-decoration: none; /* Alt çizgi kaldırma */
    cursor: pointer; /* Kullanıcıya tıklanabilir olduğunu gösterme */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Geçiş animasyonu */
}

/* Hover (Üzerine gelindiğinde) efekti */
.button.sepeti-bosalt:hover {
    background-color: #cc0000; /* Daha koyu kırmızı bir ton */
    color: #ffffff; /* Yazı rengini koruma */
    transform: scale(1.05); /* Hafif büyüme efekti */
}

/* Mobil cihazlar için buton boyutlandırma */
@media (max-width: 768px) {
    .button.sepeti-bosalt {
        padding: 8px 15px; /* Daha küçük cihazlarda iç boşlukları azaltma */
        font-size: 12px; /* Yazı boyutunu küçültme */
    }
}

Sonuç:

• Daha profesyonel bir görünüm elde edersiniz.
• Kullanıcıların dikkatini çeker.

Sepeti Boşalt Butonunu Kullanırken Dikkat Edilmesi Gerekenler

1. Onay Mesajı Ekleyin: Kullanıcıların yanlışlıkla butona tıklamasını önlemek için bir onay mesajı eklemek faydalı olacaktır.
2. Mobil Uyumlu Tasarım: Butonun mobil cihazlarda düzgün göründüğünden ve çalıştığından emin olun.
3. Yerleşimi Doğru Belirleyin: Butonun sepet sayfasında görünür bir yerde olması önemlidir.

Sıkça Sorulan Sorular (FAQ)

1. Sepeti Boşalt butonuna tıklanınca onay mesajını nasıl değiştirebilirim?

Kodda yer alan onclick parametresiyle butona tıklanınca bir onay mesajı gösteriliyor. Bu mesajı değiştirmek için şu kısmı düzenleyebilirsiniz:

onclick="return confirm('Sepeti boşaltmak istediğinizden emin misiniz?')"

Örneğin:

onclick="return confirm('Bu işlem sepetinizdeki tüm ürünleri kaldıracaktır. Devam etmek istiyor musunuz?')"

2. Kullanıcı yanlışlıkla “Sepeti Boşalt” butonuna tıkladığında geri almak mümkün mü?

Ne yazık ki, WooCommerce’in varsayılan özellikleri arasında geri alma özelliği bulunmaz. Ancak bir eklenti kullanarak “geri al” işlevi ekleyebilirsiniz veya kodla bir özellik geliştirebilirsiniz.

Öneri:

Kullanıcıya bir bilgilendirme mesajı gösterip, işlemi tamamlamadan önce “Sepeti Geri Yükle” seçeneği sunabilirsiniz.

3. Sepeti boşaltıldığında kullanıcıya bilgi mesajını nasıl özelleştirebilirim?

Kullanıcılara gösterilen bilgi mesajını şu kodda bulunan metni değiştirerek özelleştirebilirsiniz:

wc_add_notice('Sepet başarıyla boşaltıldı.', 'success');

Örneğin:

wc_add_notice('Sepetiniz temizlendi! Alışverişe devam etmek için ürünlere göz atabilirsiniz.', 'success');

4. Sepeti boşalt butonunu sepette ürün yokken gizlemek mümkün mü?

Sepet boşken butonun görünmesini engellemek için bir koşul ekleyebilirsiniz. Kodunuz şu şekilde düzenlenebilir:

if (WC()->cart->get_cart_contents_count() > 0) {
echo '<a href="' . esc_url( add_query_arg('empty-cart', '1', wc_get_cart_url() ) ) . '" class="button sepeti-bosalt" onclick="return confirm(\'Sepeti boşaltmak istediğinizden emin misiniz?\')"> Sepeti Boşalt </a>';
}

Boran Karadeniz’den Tavsiyeler

Sepeti boşalt butonu eklerken kullanıcı deneyimini daha iyi hale getirmek için şu noktalara dikkat etmenizi öneririm:

1. Doğru Yerleşim: Butonu sepetin en görünür yerine koyun. Genellikle ürünlerin alt kısmı veya sepet toplamı bölgesi idealdir.
2. Onay Sistemi Ekleyin: Kullanıcıların yanlışlıkla tıklama ihtimaline karşı bir onay mesajı veya pop-up penceresi ekleyebilirsiniz.
3. Tasarımı Çekici Hale Getirin: Özellikle renk seçimi ve yazı boyutuyla butonu kullanıcıların kolayca fark edebileceği bir hale getirin.
4. Performansı Test Edin: Sepeti boşaltma işleminin farklı tarayıcılar ve cihazlarda sorunsuz çalıştığından emin olun.

Eğer WooCommerce sitenizi daha kullanıcı dostu hale getirmek ve detaylı özelleştirmeler yapmak istiyorsanız, bana her zaman [email protected] adresinden veya 0 (539) 219 79 78 numaralı WhatsApp hattından ulaşabilirsiniz. 😊

Hayallerinizdeki e-ticaret sitesini birlikte hayata geçirelim! 👋

Hemen İletişime Geçin

📞 Telefon: 0539 219 79 78
💬 WhatsApp: Buradan mesaj gönderin
📧 E-posta: [email protected]
🌐 Fiyat teklifi almak için: Fiyat Teklifi Al