WooCommerce Ücretsiz Kargo Eşiği Mesajı Ekleme

Tarafındankomut
0 Comments

E-ticaret sitelerinde sepet terk oranını düşürmenin en etkili yollarından biri, müşterilere ücretsiz kargoya ne kadar yakın olduklarını göstermektir. WooCommerce bu özelliği varsayılan olarak sunmaz, ancak functions.php dosyasına ekleyeceğimiz birkaç fonksiyonla bunu kolayca hayata geçirebilirsiniz. Bu yazıda, sepet sayfasından checkout’a kadar her noktada çalışan dinamik ücretsiz kargo mesajları nasıl eklenir, adım adım inceleyeceğiz.

Neden Ücretsiz Kargo Eşiği Mesajı Önemli?

Bir düşünün: Müşteri sepetine 180 TL’lik ürün eklemiş, ücretsiz kargo eşiğiniz 200 TL. Müşteri bunu bilmiyorsa ve kargo ücreti görünce sepeti terk ediyorsa, siz sadece 20 TL’lik satış kaçırdınız ama aslında potansiyel bir müşteriyi kaybettiniz.

Araştırmalar, ücretsiz kargo eşiği göstergesi olan sitelerde ortalama sepet değerinin yüzde 30’a kadar arttığını ortaya koyuyor. Müşteri “20 TL daha eklesem kargo bedava oluyor” diye düşündüğünde, çoğunlukla o 20 TL’yi buluyor.

WooCommerce’in kendi yapısında bu mesajı otomatik gösteren bir mekanizma yok. Her şeyi biz yazacağız.

Temel Yapı: Basit Eşik Mesajı

İlk olarak en temel versiyonla başlayalım. Bu fonksiyon, sepet ve checkout sayfalarında ücretsiz kargoya ne kadar kaldığını gösterir.

// functions.php dosyasına ekleyin
function ucretsiz_kargo_esik_mesaji() {
    // Ücretsiz kargo eşiğini buradan ayarlayın
    $ucretsiz_kargo_esigi = 250;
    
    // Sepet toplamını al (vergi dahil)
    $sepet_toplami = WC()->cart->get_subtotal();
    
    // Kalan miktarı hesapla
    $kalan = $ucretsiz_kargo_esigi - $sepet_toplami;
    
    if ( $sepet_toplami == 0 ) {
        return; // Sepet boşsa hiçbir şey gösterme
    }
    
    if ( $kalan > 0 ) {
        $mesaj = sprintf(
            '<p class="ucretsiz-kargo-mesaj kargo-devam">
                <span class="kargo-ikon">🚚</span> 
                Ücretsiz kargoya <strong>%s</strong> kaldı!
            </p>',
            wc_price( $kalan )
        );
    } else {
        $mesaj = '<p class="ucretsiz-kargo-mesaj kargo-tamam">
            <span class="kargo-ikon">✅</span> 
            <strong>Tebrikler!</strong> Ücretsiz kargo kazandınız!
        </p>';
    }
    
    echo $mesaj;
}

// Sepet sayfasına ekle
add_action( 'woocommerce_before_cart', 'ucretsiz_kargo_esik_mesaji' );

// Checkout sayfasına da ekle
add_action( 'woocommerce_before_checkout_form', 'ucretsiz_kargo_esik_mesaji' );

Bu kod çalışır ama pek estetik değil. Biraz stil ekleyelim.

CSS ile Mesajı Güzelleştirme

Fonksiyonu yazdıktan sonra görsel tasarımı da functions.php üzerinden ekleyebilirsiniz.

function ucretsiz_kargo_css_ekle() {
    if ( is_cart() || is_checkout() ) {
        ?>
        <style>
        .ucretsiz-kargo-mesaj {
            padding: 12px 18px;
            border-radius: 6px;
            font-size: 15px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .kargo-devam {
            background-color: #fff3cd;
            border: 1px solid #ffc107;
            color: #856404;
        }
        
        .kargo-tamam {
            background-color: #d1e7dd;
            border: 1px solid #0f5132;
            color: #0f5132;
        }
        
        .kargo-ikon {
            font-size: 20px;
        }
        
        .kargo-progress-bar {
            width: 100%;
            background-color: #e9ecef;
            border-radius: 10px;
            height: 10px;
            margin-top: 8px;
        }
        
        .kargo-progress-dolgu {
            height: 10px;
            border-radius: 10px;
            background-color: #28a745;
            transition: width 0.3s ease;
        }
        </style>
        <?php
    }
}

add_action( 'wp_head', 'ucretsiz_kargo_css_ekle' );

Progress Bar ile Gelişmiş Versiyon

Müşteriye görsel bir ilerleme çubuğu göstermek, mesajın etkisini çok daha artırır. İşte progress bar dahil gelişmiş versiyon:

function ucretsiz_kargo_progress_bar() {
    $ucretsiz_kargo_esigi = 250; // TL cinsinden eşik değer
    $sepet_toplami        = WC()->cart->get_subtotal();
    
    if ( $sepet_toplami == 0 ) {
        return;
    }
    
    // Yüzde hesapla, maksimum 100
    $yuzde = min( 100, ( $sepet_toplami / $ucretsiz_kargo_esigi ) * 100 );
    $kalan = $ucretsiz_kargo_esigi - $sepet_toplami;
    
    // Progress bar rengi: yeşile yaklaştıkça değişsin
    if ( $yuzde < 40 ) {
        $renk = '#dc3545'; // Kırmızı
    } elseif ( $yuzde < 75 ) {
        $renk = '#ffc107'; // Sarı
    } else {
        $renk = '#28a745'; // Yeşil
    }
    
    echo '<div class="ucretsiz-kargo-sarici">';
    
    if ( $kalan > 0 ) {
        printf(
            '<p class="ucretsiz-kargo-mesaj kargo-devam">
                🚚 Ücretsiz kargo için <strong>%s</strong> daha ekle!
            </p>',
            wc_price( $kalan )
        );
        
        // Progress bar
        printf(
            '<div class="kargo-progress-bar">
                <div class="kargo-progress-dolgu" 
                     style="width: %.1f%%; background-color: %s;">
                </div>
            </div>
            <p class="kargo-yuzde-text" style="font-size:12px; color:#666; margin-top:5px;">
                %.0f%% tamamlandı
            </p>',
            $yuzde,
            $renk,
            $yuzde
        );
    } else {
        echo '<p class="ucretsiz-kargo-mesaj kargo-tamam">
            ✅ <strong>Harika!</strong> Ücretsiz kargo kazandınız!
        </p>';
        
        // Dolu progress bar
        printf(
            '<div class="kargo-progress-bar">
                <div class="kargo-progress-dolgu" style="width: 100%%; background-color: #28a745;"></div>
            </div>',
        );
    }
    
    echo '</div>';
}

add_action( 'woocommerce_before_cart_totals', 'ucretsiz_kargo_progress_bar' );
add_action( 'woocommerce_before_checkout_form', 'ucretsiz_kargo_progress_bar' );

WooCommerce Ayarlarından Eşiği Dinamik Çekme

Yukarıdaki örneklerde eşik değerini elle yazdık. Ama ya WooCommerce’in kargo ayarlarında zaten ücretsiz kargo tanımladıysanız? Bu durumda iki yerden yönetmek hem zahmetli hem de hata yaratır. Eşiği doğrudan WooCommerce ayarlarından çekelim.

function wc_ucretsiz_kargo_esigini_al() {
    $ucretsiz_kargo_esigi = 0;
    
    // Tüm kargo bölgelerini dolaş
    $kargo_bolgeler = WC_Shipping_Zones::get_zones();
    
    // "Bölge dışı" için de kontrol et
    $kargo_bolgeler[] = array(
        'zone_id'           => 0,
        'shipping_methods'  => WC()->shipping()->get_shipping_methods(),
    );
    
    foreach ( $kargo_bolgeler as $bolge ) {
        if ( isset( $bolge['shipping_methods'] ) ) {
            foreach ( $bolge['shipping_methods'] as $metod ) {
                // Ücretsiz kargo metodu mu kontrol et
                if ( $metod instanceof WC_Shipping_Free_Shipping ) {
                    // Minimum sipariş tutarını al
                    if ( isset( $metod->min_amount ) && $metod->min_amount > 0 ) {
                        $ucretsiz_kargo_esigi = $metod->min_amount;
                        break 2; // İç içe döngüden çık
                    }
                }
            }
        }
    }
    
    return floatval( $ucretsiz_kargo_esigi );
}

function dinamik_ucretsiz_kargo_mesaji() {
    $esik = wc_ucretsiz_kargo_esigini_al();
    
    // Eşik bulunamazsa varsayılan kullan
    if ( $esik <= 0 ) {
        $esik = 250;
    }
    
    $sepet_toplami = WC()->cart->get_subtotal();
    
    if ( $sepet_toplami == 0 ) {
        return;
    }
    
    $kalan = $esik - $sepet_toplami;
    
    if ( $kalan > 0 ) {
        printf(
            '<div class="ucretsiz-kargo-mesaj kargo-devam">
                🚚 Ücretsiz kargo için sepetine <strong>%s</strong> değerinde ürün daha ekle!
            </div>',
            wc_price( $kalan )
        );
    } else {
        echo '<div class="ucretsiz-kargo-mesaj kargo-tamam">
            ✅ Tebrikler, ücretsiz kargo hakkı kazandınız!
        </div>';
    }
}

add_action( 'woocommerce_before_cart', 'dinamik_ucretsiz_kargo_mesaji' );

Mini Sepet’e de Ekleme

Müşteriler çoğunlukla sayfanın üst kısmındaki mini sepet ikonunu kullanır. Oraya da mesaj ekleyelim.

function mini_sepet_kargo_mesaji() {
    $esik          = 250; // Ya da wc_ucretsiz_kargo_esigini_al() fonksiyonunu kullan
    $sepet_toplami = WC()->cart->get_subtotal();
    
    if ( $sepet_toplami <= 0 ) {
        return;
    }
    
    $kalan = $esik - $sepet_toplami;
    $yuzde = min( 100, ( $sepet_toplami / $esik ) * 100 );
    
    echo '<div class="mini-sepet-kargo-mesaj" style="
        padding: 10px;
        margin: 10px 0;
        background: #f8f9fa;
        border-radius: 4px;
        font-size: 13px;
        text-align: center;
    ">';
    
    if ( $kalan > 0 ) {
        printf(
            '<span>🚚 Ücretsiz kargoya <strong>%s</strong> kaldı</span>
            <div style="
                background: #e9ecef;
                border-radius: 10px;
                height: 6px;
                margin-top: 6px;
            ">
                <div style="
                    width: %.0f%%;
                    height: 6px;
                    background: #28a745;
                    border-radius: 10px;
                "></div>
            </div>',
            wc_price( $kalan ),
            $yuzde
        );
    } else {
        echo '<span style="color: #28a745;">✅ Ücretsiz kargo kazandınız!</span>';
    }
    
    echo '</div>';
}

add_action( 'woocommerce_widget_shopping_cart_before_buttons', 'mini_sepet_kargo_mesaji' );

Kupon Kodunu Hesaba Katma

Önemli bir detay: Müşteri kupon kodu kullandığında sepet toplamı düşer ve bu mesajı etkileyebilir. Kupon indirimini hesaba katan versiyon şöyle yazılır:

function kupon_dahil_kargo_mesaji() {
    $esik = 250;
    
    $sepet = WC()->cart;
    
    // Kupon indirimi düşülmüş net toplam
    $ara_toplam    = $sepet->get_subtotal();
    $kupon_indirimi = $sepet->get_discount_total();
    $net_toplam    = $ara_toplam - $kupon_indirimi;
    
    if ( $net_toplam <= 0 ) {
        return;
    }
    
    $kalan = $esik - $net_toplam;
    
    // Kupon uygulanmışsa bunu belirt
    $kupon_notu = '';
    if ( $kupon_indirimi > 0 ) {
        $kupon_notu = sprintf(
            ' <small style="color: #666;">(Kupon indirimi uygulandı: %s)</small>',
            wc_price( $kupon_indirimi )
        );
    }
    
    if ( $kalan > 0 ) {
        printf(
            '<div class="ucretsiz-kargo-mesaj kargo-devam">
                🚚 Ücretsiz kargo için <strong>%s</strong> daha ekle!%s
            </div>',
            wc_price( $kalan ),
            $kupon_notu
        );
    } else {
        echo '<div class="ucretsiz-kargo-mesaj kargo-tamam">
            ✅ Ücretsiz kargo kazandınız!
        </div>';
    }
}

add_action( 'woocommerce_before_cart_totals', 'kupon_dahil_kargo_mesaji' );

AJAX ile Gerçek Zamanlı Güncelleme

Müşteri sepete ürün eklediğinde sayfa yenilenmeden mesajın güncellenmesi gerekir. Bunun için küçük bir JavaScript ve AJAX endpoint yazalım.

// AJAX handler
function kargo_mesaji_ajax_guncelle() {
    // Nonce kontrolü (güvenlik)
    if ( ! wp_verify_nonce( $_POST['nonce'], 'kargo_mesaji_nonce' ) ) {
        wp_die( 'Güvenlik hatası!' );
    }
    
    $esik          = 250;
    $sepet_toplami = WC()->cart->get_subtotal();
    $kalan         = $esik - $sepet_toplami;
    $yuzde         = min( 100, ( $sepet_toplami / $esik ) * 100 );
    
    $yanit = array(
        'yuzde'   => round( $yuzde, 1 ),
        'kalan'   => wc_price( max( 0, $kalan ) ),
        'tamam'   => $kalan <= 0,
        'toplam'  => wc_price( $sepet_toplami ),
    );
    
    wp_send_json_success( $yanit );
}

add_action( 'wp_ajax_kargo_mesaji_guncelle', 'kargo_mesaji_ajax_guncelle' );
add_action( 'wp_ajax_nopriv_kargo_mesaji_guncelle', 'kargo_mesaji_ajax_guncelle' );

// JavaScript ve nonce ekle
function kargo_mesaji_js_ekle() {
    if ( ! is_cart() && ! is_checkout() ) {
        return;
    }
    ?>
    <script>
    jQuery(document).ready(function($) {
        var nonce = '<?php echo wp_create_nonce( "kargo_mesaji_nonce" ); ?>';
        
        // Sepet güncellendiğinde mesajı yenile
        $(document.body).on('wc_fragments_refreshed updated_cart_totals', function() {
            $.ajax({
                url: '<?php echo admin_url( "admin-ajax.php" ); ?>',
                type: 'POST',
                data: {
                    action: 'kargo_mesaji_guncelle',
                    nonce: nonce
                },
                success: function(yanit) {
                    if ( yanit.success ) {
                        var veri = yanit.data;
                        
                        if ( veri.tamam ) {
                            $('.ucretsiz-kargo-mesaj').removeClass('kargo-devam')
                                .addClass('kargo-tamam')
                                .html('✅ <strong>Harika!</strong> Ücretsiz kargo kazandınız!');
                        } else {
                            $('.ucretsiz-kargo-mesaj').removeClass('kargo-tamam')
                                .addClass('kargo-devam')
                                .html('🚚 Ücretsiz kargo için <strong>' + veri.kalan + '</strong> daha ekle!');
                        }
                        
                        // Progress bar güncelle
                        $('.kargo-progress-dolgu').css('width', veri.yuzde + '%');
                    }
                }
            });
        });
    });
    </script>
    <?php
}

add_action( 'wp_footer', 'kargo_mesaji_js_ekle' );

Ürün Sayfasına Mesaj Ekleme

Bazı mağazalarda ürün sayfasında da “Bu ürünü ekle, ücretsiz kargo kazan!” gibi mesajlar görmüşsünüzdür. Bunu da ekleyelim.

function urun_sayfasi_kargo_mesaji() {
    global $product;
    
    $esik          = 250;
    $sepet_toplami = WC()->cart->get_subtotal();
    $urun_fiyati   = $product->get_price();
    
    // Sepet boş ve ürün fiyatı eşiğin altındaysa
    if ( $sepet_toplami + $urun_fiyati < $esik ) {
        $kalan_bu_urunden_sonra = $esik - ( $sepet_toplami + $urun_fiyati );
        
        printf(
            '<div class="urun-kargo-mesaj" style="
                padding: 10px 15px;
                background: #e8f5e9;
                border-left: 4px solid #4caf50;
                margin: 15px 0;
                font-size: 14px;
                border-radius: 0 4px 4px 0;
            ">
                🚚 Bu ürünü ekle, ücretsiz kargoya <strong>%s</strong> kalsın!
            </div>',
            wc_price( $kalan_bu_urunden_sonra )
        );
    } elseif ( $sepet_toplami < $esik && $sepet_toplami + $urun_fiyati >= $esik ) {
        // Bu ürün eklenirse ücretsiz kargo kazanılacak
        echo '<div class="urun-kargo-mesaj" style="
            padding: 10px 15px;
            background: #fff8e1;
            border-left: 4px solid #ffc107;
            margin: 15px 0;
            font-size: 14px;
            border-radius: 0 4px 4px 0;
        ">
            🎉 Bu ürünü sepete ekle ve <strong>ücretsiz kargo</strong> kazan!
        </div>';
    } else {
        // Zaten ücretsiz kargo hakkı var
        echo '<div class="urun-kargo-mesaj" style="
            padding: 10px 15px;
            background: #e8f5e9;
            border-left: 4px solid #4caf50;
            margin: 15px 0;
            font-size: 14px;
        ">
            ✅ Sepetinizde zaten ücretsiz kargo var!
        </div>';
    }
}

add_action( 'woocommerce_single_product_summary', 'urun_sayfasi_kargo_mesaji', 25 );

Tüm Kodu Bir Arada Kullanmak

Tüm bu fonksiyonları birbirleriyle çakışmadan kullanmak istiyorsanız, bir class yapısına almak daha düzenli olur.

if ( ! class_exists( 'Ucretsiz_Kargo_Mesaji' ) ) {
    
    class Ucretsiz_Kargo_Mesaji {
        
        private $esik;
        
        public function __construct( $esik = 250 ) {
            $this->esik = $esik;
            $this->hook_ekle();
        }
        
        private function hook_ekle() {
            add_action( 'woocommerce_before_cart_totals', array( $this, 'sepet_mesaji' ) );
            add_action( 'woocommerce_before_checkout_form', array( $this, 'sepet_mesaji' ) );
            add_action( 'woocommerce_widget_shopping_cart_before_buttons', array( $this, 'mini_sepet_mesaji' ) );
            add_action( 'woocommerce_single_product_summary', array( $this, 'urun_mesaji' ), 25 );
            add_action( 'wp_head', array( $this, 'css_ekle' ) );
        }
        
        private function kalan_hesapla() {
            $sepet_toplami = WC()->cart->get_subtotal();
            return $this->esik - $sepet_toplami;
        }
        
        public function sepet_mesaji() {
            $kalan = $this->kalan_hesapla();
            $yuzde = min( 100, ( WC()->cart->get_subtotal() / $this->esik ) * 100 );
            
            if ( WC()->cart->get_subtotal() <= 0 ) return;
            
            echo '<div class="ucretsiz-kargo-sarici">';
            
            if ( $kalan > 0 ) {
                printf(
                    '<p class="ucretsiz-kargo-mesaj kargo-devam">
                        🚚 Ücretsiz kargoya <strong>%s</strong> kaldı!
                    </p>
                    <div class="kargo-progress-bar">
                        <div class="kargo-progress-dolgu" style="width: %.1f%%"></div>
                    </div>',
                    wc_price( $kalan ),
                    $yuzde
                );
            } else {
                echo '<p class="ucretsiz-kargo-mesaj kargo-tamam">✅ Ücretsiz kargo kazandınız!</p>';
            }
            
            echo '</div>';
        }
        
        public function mini_sepet_mesaji() {
            $kalan = $this->kalan_hesapla();
            if ( WC()->cart->get_subtotal() <= 0 ) return;
            
            if ( $kalan > 0 ) {
                printf( '<p style="text-align:center; font-size:13px; padding:8px;">
                    🚚 Ücretsiz kargoya <strong>%s</strong> kaldı
                </p>', wc_price( $kalan ) );
            } else {
                echo '<p style="text-align:center; color:#28a745; font-size:13px; padding:8px;">
                    ✅ Ücretsiz kargo kazandınız!
                </p>';
            }
        }
        
        public function urun_mesaji() {
            global $product;
            $kalan = $this->kalan_hesapla();
            $fiyat = $product->get_price();
            
            if ( $kalan > 0 && $fiyat >= $kalan ) {
                echo '<p class="urun-kargo-bilgi" style="color:#e65100; font-size:14px;">
                    🎉 Bu ürünü ekle, ücretsiz kargo kazan!
                </p>';
            }
        }
        
        public function css_ekle() {
            if ( ! is_cart() && ! is_checkout() ) return;
            echo '<style>
                .ucretsiz-kargo-mesaj { padding: 10px 15px; border-radius: 5px; margin: 10px 0; }
                .kargo-devam { background: #fff3cd; border: 1px solid #ffc107; }
                .kargo-tamam { background: #d1e7dd; border: 1px solid #28a745; }
                .kargo-progress-bar { height: 8px; background: #eee; border-radius: 10px; }
                .kargo-progress-dolgu { height: 8px; background: #28a745; border-radius: 10px; transition: width .3s; }
            </style>';
        }
    }
    
    // Başlat: eşik değerini buradan ayarla
    new Ucretsiz_Kargo_Mesaji( 250 );
}

Dikkat Edilmesi Gereken Noktalar

  • Eşik değerini tek yerden yönet: Class versiyonunda sadece new Ucretsiz_Kargo_Mesaji( 250 ) satırındaki sayıyı değiştirmen yeterli.
  • Çoklu para birimi uyumluluğu: WPML veya MultiCurrency eklentisi kullanıyorsanız, $esik değerini de dönüştürmeniz gerekir. Bunun için ilgili eklentinin kur API’sini kullanın.
  • Kargo bölgesi farkları: Bazı mağazalarda İstanbul ile Doğu Anadolu’ya farklı kargo ücreti uygulanır. Dinamik eşik çekme fonksiyonunu bu duruma göre geliştirin.
  • Cache sorunları: Sayfa cache’leyicisi kullanıyorsanız (WP Rocket, LiteSpeed Cache vb.) AJAX versiyonu zorunlu olur. Statik HTML olarak gömülü mesajlar cache’den yanlış gösterilir.
  • WooCommerce güncelleme uyumluluğu: WC_Shipping_Zones ve WC_Shipping_Free_Shipping sınıfları WooCommerce 3.0 sonrasında bu şekilde çalışır. Daha eski versiyon kullananlar için ek kontrol ekleyin.
  • Vergi dahil/hariç tutarlar: get_subtotal() vergi hariç verir, get_displayed_subtotal() tema ayarına göre davranır. Mağazanızın vergi gösterim ayarını göz önünde bulundurun.

Sonuç

Ücretsiz kargo eşiği mesajı, görünürde küçük bir detay gibi görünse de dönüşüm oranına etkisi çok somut. Bu yazıda anlattıklarımızı özetleyecek olursak: Basit metin mesajından progress bar’a, mini sepetten ürün sayfasına, kupon hesabından AJAX gerçek zamanlı güncellemeye kadar birçok senaryoyu ele aldık. Class tabanlı yapı hem bu çözümleri temiz tutar hem de ileride bakım yapmayı kolaylaştırır.

Başlangıç için sadece ilk iki kod bloğunu functions.php dosyanıza ekleyip test edin. Müşterilerinizin sepet davranışlarını izleyin, çoğunun mesajı gördükten sonra sepetini artırdığını kısa sürede fark edeceksiniz. Daha sonra ihtiyaç duydukça AJAX versiyonuna veya class yapısına geçiş yapabilirsiniz.

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir