WooCommerce’te Sepete Ekle Butonunu Yeni Pencerede Açmak

Merhaba! Ben Boran Karadeniz. WooCommerce mağazanızın işlevselliğini artırmak ve kullanıcı deneyimini geliştirmek için sürekli yeni yollar arıyorsanız, doğru yerdesiniz! Bu yazıda, WooCommerce’te Sepete Ekle butonunu yeni bir pencerede açmayı nasıl gerçekleştireceğinizi adım adım göstereceğim. Hem teknik detayları hem de bu işlemin avantajlarını detaylıca ele alacağız. Hazırsanız başlayalım! 😊

Sepete Ekle Butonunu Yeni Pencerede Açmak Neden Gerekli Olabilir?

WooCommerce mağazanızda kullanıcı deneyimini optimize etmek için bazı özel durumlarda Sepete Ekle butonunun yeni bir pencerede açılması faydalı olabilir. İşte bazı nedenler:

1. Kullanıcıların Sitede Kalmasını Sağlamak: Müşteriler, ürün eklerken mevcut sayfadan ayrılmak zorunda kalmazlar. Yeni sekmede açılan sayfa sayesinde alışverişlerine devam edebilirler.
2. Dönüşüm Oranlarını Artırmak: Alışveriş sürecini bölmeden, kullanıcıların daha fazla ürün incelemesini sağlarsınız.
3. Çapraz Satış Stratejisi: Sepete ürün eklerken kullanıcıya farklı ürün önerileri sunabileceğiniz bir fırsat yaratabilirsiniz.

WooCommerce’te Sepete Ekle Butonunu Yeni Pencerede Açmanın Yolları

1. Kod Ekleyerek Sepete Ekle Butonunu Düzenlemek

WooCommerce’de buton davranışını değiştirmek için temanızın functions.php dosyasına bir kod ekleyebilirsiniz. Aşağıdaki adımları izleyin:

Adım 1: WordPress Yönetim Paneline Giriş Yapın

1. WordPress kontrol panelinize giriş yapın.
2. Görünüm > Tema Düzenleyici seçeneğine gidin.

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

1. Sağ taraftaki dosya listesinde functions.php dosyasını bulun.
2. Dosyanın en altına aşağıdaki kodu ekleyin:

/**
 * Harici WooCommerce ürünleri için "Sepete Ekle" butonunu oluşturur.
 *
 * Bu fonksiyon, WooCommerce üzerindeki harici ürün tipleri için bir HTML bağlantısı oluşturur.
 * Butonun uygun şekilde stillendirilmesini ve yeni bir sekmede açılmasını sağlar.
 *
 * @global WC_Product $product Mevcut WooCommerce ürün nesnesi.
 * @return void
 */
function render_external_add_to_cart_button() {
    global $product;

    // Ürün nesnesinin tanımlı olup olmadığını ve geçerli bir "add-to-cart" URL'si olup olmadığını kontrol eder.
    if ( ! isset( $product ) || ! $product->is_type( 'external' ) || ! $product->add_to_cart_url() ) {
        return; // Geçerli değilse hiçbir şey yapmadan fonksiyonu sonlandır.
    }

    // URL ve buton metnini güvenli bir şekilde hazırlar.
    $add_to_cart_url = esc_url( $product->add_to_cart_url() ); // URL'yi temizler ve güvenli hâle getirir.
    $button_text     = esc_html( $product->single_add_to_cart_text() ); // Buton metnini temizler ve HTML enjeksiyonlarını önler.

    // Harici ürün "Sepete Ekle" butonunu çıktı olarak yazdırır.
    printf(
        '<p><a href="%1$s" class="single_add_to_cart_button button alt" target="_blank" rel="noopener noreferrer">%2$s</a></p>',
        $add_to_cart_url, // Güvenli URL.
        $button_text      // Güvenli buton metni.
    );
}

Adım 3: Değişiklikleri Kaydedin

Dosyayı kaydedin ve sitenizi yenileyin. Artık Sepete Ekle butonları yeni bir sekmede açılacaktır.

2. Eklenti Kullanarak Buton Davranışını Değiştirmek

Eğer kod yazmak sizin için zorsa veya manuel değişiklikler yapmak istemiyorsanız, bir eklenti kullanarak bu işlemi gerçekleştirebilirsiniz.

Yararlı Eklentiler

1. WooCommerce Customizer: WooCommerce buton davranışlarını özelleştirmek için kullanabilirsiniz.
2. Customize WooCommerce Add to Cart Button: Sepete Ekle butonunu yeni sekmede açma gibi özellikler sunar.

Eklenti Kurulum Adımları

1. WordPress panelinde Eklentiler > Yeni Ekle sekmesine gidin.
2. Yukarıdaki eklentilerden birini arayın ve yükleyin.
3. Eklentiyi etkinleştirin ve ayarlar kısmında gerekli düzenlemeyi yapın.

3. HTML ve JavaScript Kullanarak Hızlı Çözüm

Bir diğer alternatif yöntem, HTML ve JavaScript kullanarak butonlara yeni sekme davranışı eklemektir.

Adım 1: Temanızın Footer.php Dosyasını Düzenleyin

1. WordPress panelinden Görünüm > Tema Düzenleyici bölümüne gidin.
2. footer.php dosyasını bulun ve aşağıdaki kodu ekleyin:

/**
 * Sayfa yüklendikten sonra "add_to_cart_button" sınıfına sahip tüm butonlara target="_blank" özelliği ekler.
 */
document.addEventListener('DOMContentLoaded', () => {
    // ".add_to_cart_button" sınıfına sahip tüm butonları seç.
    const buttons = document.querySelectorAll('.add_to_cart_button');

    // Her buton için target="_blank" özelliğini ayarla.
    buttons.forEach((button) => {
        if (button instanceof HTMLAnchorElement) { // Sadece bağlantılar için uygula.
            button.setAttribute('target', '_blank');
        }
    });
});