WooCommerce Ödeme Sayfasına Kargo Logosu Eklemek

WooCommerce Ödeme Sayfasına Kargo Firması Logoları Eklemek: Detaylı Rehber

WooCommerce mağazanızda ödeme sayfasına kargo firmalarının logolarını eklemek, müşterilerinize profesyonel bir deneyim sunmanın en basit ama etkili yollarından biridir. Bu işlem, kullanıcılarınızın hangi kargo şirketiyle çalıştığınızı açıkça görmesini sağlar ve alışveriş sürecine güven katar. Bu makalede, WooCommerce ödeme sayfasına kargo logolarını nasıl ekleyeceğinizi adım adım öğreneceksiniz. Ayrıca, bu işlemi kolaylaştıracak bir PHP kodu da paylaşacağım.

Eğer bu işlemler sırasında desteğe ihtiyacınız olursa, bana her zaman ulaşabilirsiniz. WhatsApp üzerinden 0 (539) 219 79 78 numarasından veya [email protected] e-posta adresinden iletişim kurabilirsiniz. Şimdi detaylara geçelim!

WooCommerce Ödeme Sayfasına Kargo Logosu Eklemenin Faydaları

Müşterilerinizin alışveriş deneyimini iyileştirmek için ödeme sayfasına kargo firması logoları eklemek oldukça etkili bir yöntemdir. İşte bu adımın öne çıkan faydaları:

Müşteri Güveni: Kargo logosu, müşterilerinize şeffaf bir bilgi sunar. Bu da alışveriş sırasında güvenlerini artırır.
Profesyonellik: Ödeme sayfasında logoların görünmesi, mağazanızın profesyonel bir izlenim yaratmasını sağlar.
Daha Kolay Karar Verme: Müşteriler, tercih ettikleri kargo firmasını görünce siparişlerini daha hızlı tamamlar.
Estetik ve Kullanıcı Deneyimi: Görsel eklemeler, ödeme sayfasını daha ilgi çekici hale getirerek kullanıcı deneyimini iyileştirir.

WooCommerce Ödeme Sayfasına Kargo Logosu Eklemek için Gerekenler

Kargo logolarını ödeme sayfasına ekleyebilmek için aşağıdaki işlemleri tamamlamanız gereklidir:

Gönderim Bölgesi ve Kargo Yöntemleri Eklemek:
Öncelikle WooCommerce mağazanızda gönderim bölgesi ve gönderim yöntemlerini yapılandırmanız gerekiyor. Bunu yapmak için:
- WooCommerce > Ayarlar > Gönderim bölümüne gidin.
- Yeni bir gönderim bölgesi oluşturun (örneğin, “Türkiye”).
- Bu bölgeye Sabit Ücret (Flat Rate) kargo yöntemleri ekleyin ve her biri için farklı isimler belirleyin (örneğin, “Aras Kargo” veya “MNG Kargo”).
- Gönderim Bölgesi ve Kargo Yöntemleri Eklemek
  Kargo Yöntemleri
Kargo Firması Logolarını Hazırlamak:
- Kullanmak istediğiniz kargo logolarını Google’dan veya ilgili kargo firmasının resmi web sitesinden temin edin.
- Logoların boyutunu optimize edin (örneğin, 90×40 piksel).
Kod Eklemek:
WooCommerce ödeme sayfasına kargo logolarını eklemek için PHP kodu kullanacağız. Kod, functions.php dosyasına eklenecek.

WooCommerce Ödeme Sayfasına Kargo Logosu Eklemek için PHP Kodu

Aşağıdaki kod, WooCommerce ödeme sayfasına kargo logolarını eklemek için kullanabileceğiniz basit bir snippet’tir:

<?php
// WooCommerce kargo yöntemlerinin tam etiketine müdahale eden filtre ekleniyor
add_filter('woocommerce_cart_shipping_method_full_label', 'filter_woocommerce_cart_shipping_method_full_label', 10, 2);

/**
 * WooCommerce kargo yöntemlerinin yanına görsel logo ekleme fonksiyonu
 *
 * @param string $label - Kargo yöntemi etiketi (mevcut metin).
 * @param object $method - Kargo yöntemi nesnesi.
 * @return string - Güncellenmiş kargo yöntemi etiketi (logo ile birlikte).
 */
function filter_woocommerce_cart_shipping_method_full_label($label, $method) {
    // Kargo yöntemi logolarını tanımlıyoruz
    $shipping_logos = [
        'flat_rate:1' => [
            'src' => 'https://siteniz.com/kargo-logosu1.png',
            'alt' => 'Aras Kargo'
        ],
        'flat_rate:2' => [
            'src' => 'https://siteniz.com/kargo-logosu2.png',
            'alt' => 'MNG Kargo'
        ],
    ];

    // Belirli bir kargo yöntemi için logo ekleniyor
    if (array_key_exists($method->id, $shipping_logos)) {
        $logo = $shipping_logos[$method->id];
        $label = generate_shipping_logo_html($logo['src'], $logo['alt']) . $label;
    }

    // Güncellenmiş etiket döndürülüyor
    return $label;
}

/**
 * Kargo yöntemi logosu için HTML kodu oluşturan yardımcı fonksiyon
 *
 * @param string $src - Logo URL'si.
 * @param string $alt - Logo için alternatif metin.
 * @return string - Logo için HTML kodu.
 */
function generate_shipping_logo_html($src, $alt) {
    return "<img src='" . esc_url($src) . "' alt='" . esc_attr($alt) . "' 
        style='height: 40px; width: 90px; margin-right: 10px; vertical-align: middle;' />";
}

Adım Adım Uygulama:

functions.php Dosyasını Bulun:
- WordPress yönetim panelinizde Görünüm > Tema Düzenleyici sekmesine gidin.
- Sağ tarafta, aktif temanızın altında yer alan functions.php dosyasını açın.
Kodunuzu Yapıştırın:
Yukarıdaki kodu functions.php dosyanızın en altına yapıştırın.
Logoların URL’lerini Güncelleyin:
Kodda yer alan https://siteniz.com/kargo-logosu1.png ve https://siteniz.com/kargo-logosu2.png kısımlarını, kargo logolarınızın gerçek URL’leriyle değiştirin.
Değişiklikleri Kaydedin:
Dosyayı kaydedin ve WooCommerce ödeme sayfanızı yenileyin.

Kodun Çalışma Prensibi

Kod, WooCommerce ödeme sayfasında kargo seçeneklerinin bulunduğu alana müdahale eder.
flat_rate:1 ve flat_rate:2, WooCommerce gönderim yöntemlerinin ID’leridir. Bu ID’ler, hangi logonun hangi kargo yöntemine eklenmesi gerektiğini belirtir.
Her gönderim yöntemi için uygun logolar eklenir ve görseller, ödeme sayfasında kargo yöntemlerinin yanında görüntülenir.

Dikkat Edilmesi Gerekenler

Logoların Boyutları: Logoların boyutlarını optimize edin ve dosya boyutunu küçük tutun. Büyük dosyalar, ödeme sayfasının yavaşlamasına neden olabilir.
ID Doğruluğu: Kargo yöntemlerinizin ID’lerinin doğru olduğundan emin olun. Yanlış bir ID girerseniz, logolar ödeme sayfasında görünmez.
Snippets Kullanımı: Eğer functions.php dosyasını düzenlemek konusunda endişeleriniz varsa, Code Snippets adlı eklentiyi kullanarak kodu daha güvenli bir şekilde ekleyebilirsiniz.

Sıkça Sorulan Sorular (FAQ)

1. Birden Fazla Kargo Firması için Logo Ekleyebilir miyim?

Evet, kodda her gönderim yöntemi için farklı bir logo belirleyebilirsiniz. Bunun için koddaki if bloklarını çoğaltarak her kargo firmasına özel logolar ekleyebilirsiniz.

2. Kargo Logolarını Mobil Uyumlu Hale Getirebilir miyim?

Evet. CSS kodlarıyla logolarınızı mobil cihazlarda da düzgün bir şekilde görüntüleyebilirsiniz. Örneğin:

.shipping-logo img {
max-width: 100%;
height: auto;
}

3. functions.php dosyasını düzenlerken hata yaparsam ne olur?

functions.php dosyasını yanlış düzenlerseniz, sitenizde bir hata oluşabilir. Bu yüzden düzenleme yapmadan önce bir yedek almanızı veya Code Snippets eklentisini kullanmanızı öneririm.

Boran Karadeniz’den Tavsiyeler

Test Yapın: Kargo logolarını ekledikten sonra, ödeme sayfanızın hem masaüstü hem de mobil cihazlarda düzgün çalıştığından emin olun.
Logoların Kalitesini Optimize Edin: Görsel boyutlarını optimize ederek sayfa hızını koruyabilirsiniz.
Kullanıcı Deneyimini İzleyin: Kargo logolarının eklenmesinden sonra dönüşüm oranlarını takip edin. Bu değişikliğin müşteri davranışlarına etkisini anlamak için Google Analytics’i kullanabilirsiniz.
Yedek Almayı Unutmayın: functions.php dosyasını düzenlemeden önce her zaman tam bir site yedeği alın.

WooCommerce mağazanızda kargo logolarını eklerken herhangi bir sorunla karşılaşırsanız, size yardımcı olmaktan mutluluk duyarım! Bana 0 (539) 219 79 78 numarasından ulaşabilir ya da [email protected] adresine yazabilirsiniz. 😊