Bildiğiniz üzere dünyaca ünlü ve en çok kullanılan e-ticaret platformlarından biri olan Woocommerce bir çok kolaylık sağlayan ve özelleştirilebilir bir sisteme sahiptir.

Kancalarla oluşturulan kod bloğunun bazı yerlerde özelleştirilmesi veya yerleştirilmesi temaya ve sitenin görünümüne şıklık katacağı gibi kolaylık da sağlamaktadır. Bu yazımızda ürün stok kodunu istediğimiz yerde nasıl göstereceğimizi sizlerle paylaşmak istedik. Sizin bildiğiniz başka yöntemler de varsa burada paylaşabilirsiniz.

Diyelim ki ürün sayfasında gördüğümüz ürün stok kodunu, ürün kartındaki ürün ismi ve fiyatın altında stok kodu da gözükmesini istiyoruz. Temamızda daha önce oluÅŸturduÄŸumuz woocommerce klasöründeki content-product.php dosyasında ‘woocommerce_after_shop_loop_item_title’ kancasının hemen altına aÅŸağıdaki kodu yazıyoruz. Ãœrün kartında en alt kısımda stok kodu görünecektir.

<?php if ( wc_product_sku_enabled() && ( $product->get_sku() || $product->is_type( 'variable' ) ) ) : ?>
    <span class="sku_wrapper"><?php esc_html_e( 'SKU:', 'woocommerce' ); ?> <span class="sku"><?php echo ( $sku = $product->get_sku() ) ? $sku : esc_html__( 'N/A', 'woocommerce' ); ?></span></span>
<?php endif; ?>

Eğer kancalar içerisine yerleştirmek istiyorsanız aşağıdaki örnek yöntemi kullanabilirsiniz. Diyelim ki ürün sayfasında ürün başlığının hemen altında görünmesini istiyorsanız; ürün detayını gösteren kancayı fonksiyona dahil etmeniz gerekiyor. 5 rakamı kancadaki başlığın sıra numarasıdır. Ürün fiyatının altında ve ürün özelliklerinin üstünde görünmesini istiyorsanız; rakamı 15 yapmanız yeterlidir. Ürün detay kancası ve sıra numaraları aşağıdaki koddan hemen sonra verilmiştir.

if ( ! function_exists( 'wd_single_replace_sku' ) ) {
	function wd_single_replace_sku() {
		global $product;
		if ( wc_product_sku_enabled() && ( $product->get_sku() || $product->is_type( 'variable' ) ) ) : ?>
			<div class="product_meta product_meta_under_title">
				<span class="sku_wrapper_under_title"><?php esc_html_e( 'SKU:', 'woocommerce' ); ?> <span class="sku"><?php echo ( $sku = $product->get_sku() ) ? $sku : esc_html__( 'N/A', 'woocommerce' ); ?></span></span>
			</div>
		<?php endif;
	}
	add_action( 'woocommerce_single_product_summary', 'wd_single_replace_sku', 5 );
}

Ürün sayfasındaki ürün detay kancası ve sıra numaraları:

		<?php
/**
* Hook: woocommerce_single_product_summary.
*
* @hooked woocommerce_template_single_title - 5 //başlık
* @hooked woocommerce_template_single_rating - 10 // ürün değerlendirme
* @hooked woocommerce_template_single_price - 10 //fiyat
* @hooked woocommerce_template_single_excerpt - 20 // ürün özellikleri
* @hooked woocommerce_template_single_add_to_cart - 30 // sepete ekle
* @hooked woocommerce_template_single_meta - 40 // stok kodu-kategoriler-etiketler
* @hooked woocommerce_template_single_sharing - 50 //sosyal medya paylaşım
* @hooked WC_Structured_Data::generate_product_data() - 60
*/
do_action( 'woocommerce_single_product_summary' );
?>

Ürün detay kancası örnek resmi:

Sonra aşağıdaki css kodunu; style.css dosyasını açın, en alt satıra yapıştırın.

.product_meta .sku_wrapper{display: none !important;}

Uyarı: Geliştirici değilseniz ya da kodlama bilginiz yoksa lütfen kendi başınıza bu işlemleri yapmayınız.