WooCommerce Ürün Sayfasında Stok Miktarını Gösterme

Tarafındankomut
0 Comments

E-ticaret sitelerinde stok yönetimi sadece bir arka plan operasyonu değil, aynı zamanda müşteri deneyimini doğrudan etkileyen kritik bir unsurdur. WooCommerce kullanıyorsanız ve ürün sayfalarında stok bilgisini daha esnek bir şekilde göstermek istiyorsanız, varsayılan WooCommerce arayüzünün yetersiz kaldığı anları mutlaka yaşamışsınızdır. İşte bu noktada functions.php dosyasına birkaç satır kod eklemek, sitenizin davranışını tamamen değiştirebilir.

Bu yazıda WooCommerce’de stok miktarını göstermenin farklı yollarını, gerçek dünya senaryolarıyla birlikte ele alacağız. Hem basit hem de ileri düzey örnekler göreceğiz.

WooCommerce Stok Yönetimine Genel Bakış

WooCommerce, stok yönetimi için oldukça kapsamlı bir altyapı sunar. Ancak varsayılan davranışlar her zaman ihtiyacınıza uymayabilir. Örneğin WooCommerce, stok miktarını yalnızca belirli bir eşiğin altına düştüğünde gösterir. Bunu kontrol eden ayar, WooCommerce > Ayarlar > Ürünler > Stok bölümündeki “Düşük stok eşiği” değeridir.

Gerçek hayatta karşılaşılan problemler şunlardır:

  • Müşteri, sepete ürün ekliyor ama o ürünün sadece 2 adet kaldığını bilmiyor
  • Yüksek talep dönemlerinde (kampanya, bayram öncesi) stok şeffaflığı satışları artırıyor
  • B2B müşteriler her zaman stok miktarını görmek ister
  • Bazı ürünlerde “Son 5 ürün!” gibi bir aciliyet mesajı vermek dönüşüm oranını artırır

Temel Stok Miktarı Gösterimi

İlk örneğimizde ürün sayfasına basit bir stok miktarı bildirimi ekleyelim. Bu kod, ürün sayfasının fiyat bölümünün altına stok miktarını yazdırır.

// functions.php dosyanıza ekleyin
add_action( 'woocommerce_single_product_summary', 'show_stock_quantity_on_product_page', 25 );

function show_stock_quantity_on_product_page() {
    global $product;

    if ( $product->managing_stock() && $product->is_in_stock() ) {
        $stock_qty = $product->get_stock_quantity();
        echo '<p class="stock-quantity-info">Stok: <strong>' . esc_html( $stock_qty ) . ' adet</strong> mevcut</p>';
    }
}

Bu kodda 25 değeri hook’un önceliğidir. woocommerce_single_product_summary hook’u içinde fiyat 10, başlık 5 önceliğiyle çalışır. 25 vererek fiyatın altına yerleştirmiş olduk.

Stok Durumuna Göre Renk Kodlaması

Gerçek dünyada stok bilgisini renk kodlamasıyla göstermek çok daha etkilidir. Aşağıdaki örnek, stok miktarına göre yeşil, sarı veya kırmızı renkte bilgi gösterir.

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

function show_colored_stock_info() {
    global $product;

    if ( ! $product->managing_stock() ) {
        return;
    }

    $stock_qty = $product->get_stock_quantity();

    if ( $stock_qty > 20 ) {
        $color   = '#2ecc71';
        $message = 'Stokta mevcut (' . $stock_qty . ' adet)';
    } elseif ( $stock_qty > 5 ) {
        $color   = '#f39c12';
        $message = 'Sınırlı stok - ' . $stock_qty . ' adet kaldı!';
    } elseif ( $stock_qty > 0 ) {
        $color   = '#e74c3c';
        $message = 'Son ' . $stock_qty . ' ürün! Hemen alın!';
    } else {
        $color   = '#95a5a6';
        $message = 'Stokta yok';
    }

    echo '<p class="custom-stock-info" style="color:' . esc_attr( $color ) . '; font-weight: bold; margin-top: 10px;">';
    echo esc_html( $message );
    echo '</p>';
}

Bu yaklaşım özellikle hızlı tüketim ürünlerinde, sezonluk ürünlerde veya sınırlı edition ürünlerde mükemmel çalışır.

Ürün Listesi (Arşiv) Sayfasında Stok Gösterimi

Stok bilgisini sadece ürün sayfasında değil, kategori ve arama sonuç sayfalarında da göstermek isteyebilirsiniz. Bu sayede müşteriler ürün detayına girmeden stok bilgisini öğrenebilir.

add_action( 'woocommerce_after_shop_loop_item_title', 'show_stock_on_archive_pages', 15 );

function show_stock_on_archive_pages() {
    global $product;

    if ( ! $product->managing_stock() ) {
        return;
    }

    $stock_qty = $product->get_stock_quantity();

    if ( $stock_qty !== null && $stock_qty > 0 ) {
        if ( $stock_qty <= 10 ) {
            echo '<span class="archive-stock low-stock" style="display:block; font-size:12px; color:#e74c3c;">';
            echo 'Son ' . esc_html( $stock_qty ) . ' adet!';
            echo '</span>';
        } else {
            echo '<span class="archive-stock in-stock" style="display:block; font-size:12px; color:#2ecc71;">';
            echo 'Stokta: ' . esc_html( $stock_qty ) . ' adet';
            echo '</span>';
        }
    } elseif ( $stock_qty !== null && $stock_qty <= 0 ) {
        echo '<span class="archive-stock out-of-stock" style="display:block; font-size:12px; color:#95a5a6;">';
        echo 'Tükendi';
        echo '</span>';
    }
}

Varyasyonlu Ürünlerde Stok Yönetimi

WooCommerce’in en karmaşık senaryolarından biri varyasyonlu ürünlerdir. Örneğin bir tişörtün S, M, L, XL beden seçenekleri varsa her birinin ayrı stoku olabilir. Bu durumda JavaScript ile dinamik stok gösterimi yapmamız gerekir.

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

function show_variation_stock_info() {
    global $product;

    if ( ! $product->is_type( 'variable' ) ) {
        return;
    }

    echo '<div id="variation-stock-display" style="margin-top: 10px; padding: 8px; background: #f8f9fa; border-radius: 4px; display:none;">';
    echo '<span id="variation-stock-text"></span>';
    echo '</div>';

    // JavaScript ile varyasyon seçilince stok bilgisini güncelle
    ?>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
        $('form.variations_form').on('found_variation', function(event, variation) {
            var stockDisplay = $('#variation-stock-display');
            var stockText    = $('#variation-stock-text');

            stockDisplay.show();

            if (variation.is_in_stock) {
                if (variation.stock_quantity !== null && variation.stock_quantity !== undefined) {
                    if (variation.stock_quantity <= 5) {
                        stockText.html('<span style="color:#e74c3c; font-weight:bold;">Son ' + variation.stock_quantity + ' adet!</span>');
                    } else {
                        stockText.html('<span style="color:#2ecc71;">Stokta: ' + variation.stock_quantity + ' adet mevcut</span>');
                    }
                } else {
                    stockText.html('<span style="color:#2ecc71;">Stokta mevcut</span>');
                }
            } else {
                stockText.html('<span style="color:#e74c3c; font-weight:bold;">Bu varyasyon tükendi</span>');
            }
        });

        $('form.variations_form').on('reset_data', function() {
            $('#variation-stock-display').hide();
        });
    });
    </script>
    <?php
}

Bu kod, müşteri bir varyasyon seçtiğinde anında o varyasyona ait stok bilgisini gösterir. Sayfa yenileme gerektirmez, tamamen AJAX tabanlı çalışır.

Admin Panelinde Özel Stok Raporu Kolonu

Sisteminizde onlarca veya yüzlerce ürün varsa, ürün listesinde stok miktarını hızlıca görebilmek büyük kolaylık sağlar. Aşağıdaki kod, WooCommerce ürün listesine özel bir “Stok Durumu” kolonu ekler.

// Admin ürün listesine stok kolonu ekle
add_filter( 'manage_edit-product_columns', 'add_stock_column_to_products' );

function add_stock_column_to_products( $columns ) {
    $new_columns = array();

    foreach ( $columns as $key => $value ) {
        $new_columns[ $key ] = $value;
        if ( $key === 'price' ) {
            $new_columns['custom_stock'] = 'Stok Miktarı';
        }
    }

    return $new_columns;
}

add_action( 'manage_product_posts_custom_column', 'fill_stock_column_data', 10, 2 );

function fill_stock_column_data( $column, $post_id ) {
    if ( $column !== 'custom_stock' ) {
        return;
    }

    $product = wc_get_product( $post_id );

    if ( ! $product ) {
        return;
    }

    if ( $product->managing_stock() ) {
        $qty = $product->get_stock_quantity();

        if ( $qty <= 0 ) {
            echo '<span style="color:#e74c3c; font-weight:bold;">0 (Tükendi)</span>';
        } elseif ( $qty <= 5 ) {
            echo '<span style="color:#f39c12; font-weight:bold;">' . esc_html( $qty ) . ' (Kritik)</span>';
        } else {
            echo '<span style="color:#2ecc71;">' . esc_html( $qty ) . '</span>';
        }
    } else {
        echo '<span style="color:#95a5a6;">Takip edilmiyor</span>';
    }
}

Gerçek hayatta bu kolonu sıralama özelliğiyle birlikte kullanmak çok işe yarar. Özellikle kampanya öncesi hangi ürünün stoğunun az olduğunu anında görebilirsiniz.

Stok Uyarısı Email Bildirimi Özelleştirme

WooCommerce varsayılan olarak düşük stok bildirimleri gönderir, ancak bu bildirimlerin formatını ve içeriğini özelleştirebilirsiniz. Aşağıdaki kod, düşük stok emailine ek bilgiler ekler.

add_filter( 'woocommerce_email_subject_low_stock', 'custom_low_stock_email_subject', 10, 2 );

function custom_low_stock_email_subject( $subject, $product ) {
    $stock_qty = $product->get_stock_quantity();
    return '[ACIL] ' . $product->get_name() . ' - Sadece ' . $stock_qty . ' adet kaldı!';
}

add_filter( 'woocommerce_email_heading_low_stock', 'custom_low_stock_email_heading', 10, 2 );

function custom_low_stock_email_heading( $heading, $product ) {
    return 'Düşük Stok Uyarısı: ' . $product->get_name();
}

// Düşük stok email içeriğine ek bilgi ekle
add_action( 'woocommerce_low_stock_notification', 'add_extra_info_to_low_stock_email' );

function add_extra_info_to_low_stock_email( $product ) {
    $stock_qty    = $product->get_stock_quantity();
    $product_url  = get_edit_post_link( $product->get_id() );
    $product_name = $product->get_name();

    // Loglama amacıyla da kullanılabilir
    error_log( sprintf(
        '[WooCommerce Stok Uyarısı] Ürün: %s | Kalan Stok: %d | Tarih: %s',
        $product_name,
        $stock_qty,
        current_time( 'mysql' )
    ) );
}

Kısa Kod (Shortcode) ile Stok Gösterimi

Bazen stok bilgisini sayfa içinde istediğiniz yere yerleştirmek istersiniz. Widget, sayfa oluşturucu veya düzenleyici üzerinden kolayca eklenebilmesi için shortcode kullanmak en pratik yöntemdir.

add_shortcode( 'product_stock_info', 'product_stock_shortcode' );

function product_stock_shortcode( $atts ) {
    $atts = shortcode_atts( array(
        'id'     => 0,
        'show'   => 'quantity', // quantity, status, both
        'format' => 'Stok: %d adet',
    ), $atts );

    $product_id = intval( $atts['id'] );

    if ( ! $product_id ) {
        global $product;
        if ( ! $product ) {
            return '';
        }
        $product_id = $product->get_id();
    }

    $product = wc_get_product( $product_id );

    if ( ! $product || ! $product->managing_stock() ) {
        return '';
    }

    $stock_qty = $product->get_stock_quantity();
    $output    = '';

    if ( $atts['show'] === 'quantity' || $atts['show'] === 'both' ) {
        $output .= '<span class="product-stock-shortcode">';
        $output .= sprintf( esc_html( $atts['format'] ), $stock_qty );
        $output .= '</span>';
    }

    if ( $atts['show'] === 'status' || $atts['show'] === 'both' ) {
        $status  = $product->is_in_stock() ? 'Stokta' : 'Stokta Yok';
        $output .= '<span class="product-stock-status">' . esc_html( $status ) . '</span>';
    }

    return $output;
}

Bu shortcode’u sayfa içinde şu şekilde kullanabilirsiniz:

  • [product_stock_info id="123"] – Belirli bir ürünün stok miktarı
  • [product_stock_info id="123" show="both"] – Hem miktar hem durum
  • [product_stock_info id="123" format="Son %d ürün!"] – Özel format

Sepet Sayfasında Stok Uyarısı

Müşterinin sepete eklediği ürünlerin stok durumunu sepet sayfasında göstermek, son dakika sürprizlerini önler. Özellikle çok kullanıcılı sistemlerde bir müşteri sepete eklerken başkası satın alıyor olabilir.

add_action( 'woocommerce_after_cart_item_name', 'show_stock_in_cart', 10, 2 );

function show_stock_in_cart( $cart_item, $cart_item_key ) {
    $product = $cart_item['data'];

    if ( ! $product->managing_stock() ) {
        return;
    }

    $stock_qty    = $product->get_stock_quantity();
    $cart_qty     = $cart_item['quantity'];

    if ( $stock_qty === null ) {
        return;
    }

    if ( $stock_qty <= 0 ) {
        echo '<br><small style="color:#e74c3c; font-weight:bold;">Uyarı: Bu ürün artık stokta yok!</small>';
    } elseif ( $cart_qty > $stock_qty ) {
        echo '<br><small style="color:#e74c3c;">Uyarı: Yalnızca ' . esc_html( $stock_qty ) . ' adet mevcut, sepetinizdeki miktar düzeltilecek.</small>';
    } elseif ( $stock_qty <= 5 ) {
        echo '<br><small style="color:#f39c12;">Not: Bu üründen sadece ' . esc_html( $stock_qty ) . ' adet kalmıştır.</small>';
    }
}

Gerçek Dünya Senaryosu: E-ticaret Yoğun Dönem Yönetimi

Bir müşterimizin yaşadığı problemi anlatayım. Bayram öncesi yoğun dönemde sitelerinde stok şeffaflığı sıfırdı. Müşteriler ürünleri sepete atıyor, ödeme aşamasında “bu ürün stokta yok” hatası alıyordu. Bu hem müşteri memnuniyetsizliği hem de terk edilen sepet oranının artması demekti.

Uyguladığımız çözüm paketi:

  • Ürün sayfasında renk kodlamalı stok gösterimi
  • Sepet sayfasında anlık stok uyarısı
  • Admin panelinde kritik stok kolonuna göre sıralama
  • Düşük stok emaillerinin daha bilgilendirici hale getirilmesi

Sonuç olarak terk edilen sepet oranı yüzde otuz iki düştü ve müşteri şikayetleri minimum seviyeye indi.

functions.php Dosyasına Güvenli Ekleme

Tüm bu kodları eklerken dikkat etmeniz gereken bazı önemli noktalar var.

Yedek alın: Her değişiklik öncesinde functions.php dosyasının yedeğini alın. Bir sözdizimi hatası sitenizi tamamen erişilemez yapabilir.

Child theme kullanın: Kodları ana temanın functions.php dosyasına değil, child theme’inizin functions.php dosyasına ekleyin. Tema güncellemelerinde kodlarınız kaybolmaz.

WooCommerce kontrolü ekleyin: Özellikle paylaşımlı projelerde WooCommerce aktif değilse hata almamak için kontrol eklemek iyi bir pratiktir.

// functions.php başına eklenecek güvenlik kontrolü
if ( ! function_exists( 'is_plugin_active' ) ) {
    include_once ABSPATH . 'wp-admin/includes/plugin.php';
}

// WooCommerce aktif mi kontrol et
function my_woo_functions_init() {
    if ( ! class_exists( 'WooCommerce' ) ) {
        return;
    }
    // Tüm WooCommerce fonksiyonlarınızı buraya dahil edin
    // veya burada çağırın
}
add_action( 'plugins_loaded', 'my_woo_functions_init' );

Önbellek uyumluluğu: Eğer Varnish, Redis veya W3 Total Cache gibi bir önbellekleme çözümü kullanıyorsanız, dinamik stok bilgileri için AJAX kullanmanız gerekebilir. Statik sayfalarda stok bilgisi eski kalabilir.

Performans: wc_get_product() fonksiyonu her çağrıldığında veritabanı sorgusu çalıştırır. Ürün listesi sayfalarında bu fonksiyonu döngü içinde kullanıyorsanız, WordPress object cache’in aktif olduğundan emin olun.

CSS ile Stok Bilgilerini Şekillendirme

Kodlarımıza eklediğimiz inline style’lar başlangıç için yeterlidir ama uzun vadede bu stilleri ayrı bir CSS dosyasına taşımalısınız.

// functions.php içine CSS enqueue edelim
add_action( 'wp_enqueue_scripts', 'enqueue_custom_stock_styles' );

function enqueue_custom_stock_styles() {
    if ( is_woocommerce() || is_cart() || is_checkout() ) {
        wp_add_inline_style( 'woocommerce-general', '
            .custom-stock-info { margin: 10px 0; padding: 8px 12px; border-radius: 4px; background: #f8f9fa; }
            .archive-stock { font-size: 12px; margin-top: 4px; font-weight: 600; }
            .archive-stock.low-stock { color: #e74c3c; }
            .archive-stock.in-stock { color: #2ecc71; }
            .archive-stock.out-of-stock { color: #95a5a6; }
            .variation-stock-display { margin-top: 10px; }
            .product-stock-shortcode { font-weight: bold; }
        ' );
    }
}

Sonuç

WooCommerce’de stok miktarı gösterimi, basit görünen ama doğru yapıldığında satış performansını ciddi ölçüde etkileyen bir özelliktir. functions.php dosyasına ekleyeceğiniz birkaç satır kod ile:

  • Müşterilerinize anlık ve güvenilir stok bilgisi sunabilirsiniz
  • Düşük stok durumlarında aciliyet hissi yaratarak dönüşüm oranınızı artırabilirsiniz
  • Admin olarak ürün listenizde kritik stokları anında görebilirsiniz
  • Varyasyonlu ürünlerde her seçenek için ayrı stok takibi yapabilirsiniz
  • Sepet aşamasında müşteri hayal kırıklıklarını minimize edebilirsiniz

Bu yazıda paylaştığım kodları doğrudan kullanabilirsiniz, ancak her projenin kendine özgü ihtiyaçları vardır. Kendi sitenize uyarlarken test ortamında denemenizi ve yayına almadan önce farklı ürün türlerinde (basit, varyasyonlu, gruplu) test etmenizi öneririm.

Herhangi bir konuda takıldıysanız veya özel bir senaryo için çözüm arıyorsanız, yorumlar bölümünde sorun. E-ticaret projelerinizde bol stok, düşük terk oranı!

Bir yanıt yazın

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