WooCommerce Ürün Sayfası Neden Önemli?
Bir e-ticaret sitesinde en çok ziyaret alan sayfa, ürün sayfasıdır. Müşteri bir ürünü inceler, açıklamayı okur, görselleri gezdirir ve satın alma kararını bu sayfada verir. WooCommerce varsayılan ürün sayfası tasarımı işlevseldir ama markanıza özgü değildir. Küçük dokunuşlarla hem kullanıcı deneyimini iyileştirebilir hem de dönüşüm oranlarını artırabilirsiniz.
Bu yazıda, hiçbir eklenti kullanmadan, çocuk tema üzerinden kod snippet’leriyle WooCommerce ürün sayfanızı nasıl özelleştireceğinizi adım adım anlatıyorum. Tüm kodları WordPress çocuk tema içinde kullanmanızı öneririm; böylece güncellemelerde kodlarınız kaybolmaz.
WooCommerce Ürün Sayfası Özelleştirme Yöntemleri
Ürün sayfasını özelleştirmek için iki yol var: eklenti kullanmak ya da kod yazmak. Eklentiler hızlı çözüm sunar ama site hızını etkileyebilir. Kod ile yapılan özelleştirmeler daha hafiftir ve tam kontrol sağlar. Bu rehberde ikinci yolu tercih ediyoruz. Kodları functions.php dosyasına eklemeden önce mutlaka yedek alın.
1. Ürün Sayfası Sekme Düzenini Değiştirme
WooCommerce varsayılan olarak ürün sayfasında üç sekme gösterir: Açıklama, Ek Bilgiler (özellikler) ve Yorumlar. Sıralamayı değiştirebilir, sekmeleri yeniden adlandırabilir ya da tamamen kaldırabilirsiniz.
Aşağıdaki kod, sekmelerin sırasını değiştirir ve “Ek Bilgiler” sekmesini “Ürün Özellikleri” olarak yeniden adlandırır:
/**
* WooCommerce ürün sekme sırasını ve adlarını değiştir
*/
add_filter( 'woocommerce_product_tabs', 'cagri_urun_sekme_duzenle', 98 );
function cagri_urun_sekme_duzenle( $tabs ) {
// Sıralamayı değiştir: özellikler önce, sonra açıklama, en son yorumlar
$tabs['additional_information']['priority'] = 5;
$tabs['description']['priority'] = 10;
$tabs['reviews']['priority'] = 15;
// Sekme adını değiştir
$tabs['additional_information']['title'] = 'Ürün Özellikleri';
return $tabs;
}Bu kodu çocuk temanızın functions.php dosyasına ekleyin. Değişiklik hemen geçerli olur.
2. Ürün Sayfasına Özel İçerik Alanı Ekleme
Bazen ürün açıklamasının üstüne ya da altına ek bir bilgi kutusu, garanti metni veya teslimat notu eklemek istersiniz. Bunun için WooCommerce hook’larını kullanabilirsiniz.
Örneğin sepete ekle butonundan önce bir teslimat bilgisi kutusu ekleyelim:
/**
* Ürün sayfasında sepete ekle butonundan önce teslimat bilgisi göster
*/
add_action( 'woocommerce_before_add_to_cart_button', 'cagri_teslimat_bilgisi_kutusu' );
function cagri_teslimat_bilgisi_kutusu() {
echo '<div class="teslimat-bilgisi" style="background:#f0f9ff; padding:15px; border-radius:8px; margin-bottom:20px;">
<p style="margin:0;">📦 <strong>Aynı Gün Kargo</strong>: 16:00\'a kadar verilen siparişlerde.</p>
<p style="margin:5px 0 0;">🛡️ <strong>Güvenli Alışveriş</strong>: 256-bit SSL ile korunuyor.</p>
</div>';
}Bu yöntemi kullanarak ürün sayfanıza güven rozetleri, kampanya banner’ları veya garanti metinleri ekleyebilirsiniz. Daha karmaşık düzenlemeler için WooCommerce’nin kendi checkout alan kaldırma rehberindeki mantığı ürün sayfasına uyarlayabilirsiniz.
3. Ürün Galerisini Özelleştirme
WooCommerce ürün galerisi varsayılan olarak lightbox, zoom ve slider desteği sunar. Tema ayarlarınızdan bu özellikleri açmak için functions.php‘e şu satırları ekleyin:
/**
* WooCommerce ürün galerisi özelliklerini etkinleştir
*/
add_action( 'after_setup_theme', 'cagri_urun_galerisi_destegi' );
function cagri_urun_galerisi_destegi() {
add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' );
}Galeri görsellerinin boyutlarını değiştirmek için WooCommerce ayarlarından “Görsel” sekmesine gidebilir ya da kodla özelleştirebilirsiniz:
/**
* Ürün galerisi görsel boyutlarını değiştir
*/
add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function( $size ) {
return array(
'width' => 150,
'height' => 150,
'crop' => 1,
);
} );
add_filter( 'woocommerce_get_image_size_single', function( $size ) {
return array(
'width' => 600,
'height' => 600,
'crop' => 1,
);
} );4. Ürün Sayfası Düzenini Hook’larla Değiştirme
WooCommerce, ürün sayfasındaki her öğenin yerini değiştirmenize izin veren hook’lar sunar. Örneğin fiyatı başlığın altına değil de sepete ekle butonunun yanına taşımak isterseniz:
/**
* Fiyatı sepete ekle butonunun altına taşı
*/
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
add_action( 'woocommerce_after_add_to_cart_button', 'woocommerce_template_single_price', 5 );Benzer şekilde ürün özetini (woocommerce_template_single_excerpt), stok durumunu (woocommerce_template_single_stock) ve kategori bilgisini (woocommerce_template_single_meta) istediğiniz sıraya koyabilirsiniz.
5. İlgili Ürünler Sayısını ve Düzenini Değiştirme
Varsayılan olarak WooCommerce, ürün sayfasının altında 4 ilgili ürün gösterir. Bu sayıyı ve sütun sayısını değiştirebilirsiniz:
/**
* İlgili ürün sayısını ve sütun sayısını değiştir
*/
add_filter( 'woocommerce_output_related_products_args', 'cagri_ilgili_urun_ayarla' );
function cagri_ilgili_urun_ayarla( $args ) {
$args['posts_per_page'] = 6; // Gösterilecek ürün sayısı
$args['columns'] = 3; // Sütun sayısı (3, 4 veya 6)
return $args;
}6. Özel CSS ile Ürün Sayfası Tasarımı
Kod kadar CSS de ürün sayfasının görünümünü tamamen değiştirebilir. Kendi temanızın style.css dosyasına veya WordPress Özelleştirici’ye ekleyebileceğiniz bazı pratik CSS örnekleri:
/* Ürün başlığı boyutunu büyüt */
.single-product .product .product_title {
font-size: 28px;
font-weight: 700;
margin-bottom: 10px;
}
/* Sepete ekle butonunu belirginleştir */
.single-product .product .single_add_to_cart_button {
background: #e50914;
border-radius: 50px;
padding: 14px 40px;
font-size: 16px;
font-weight: 600;
text-transform: none;
}
/* Fiyatı vurgula */
.single-product .product .price {
font-size: 24px;
font-weight: 700;
color: #e50914;
}
/* Sekmeleri modernleştir */
.woocommerce-tabs .wc-tabs li a {
border-radius: 8px 8px 0 0;
padding: 12px 20px;
font-weight: 500;
}
/* Mobil uyumluluk */
@media (max-width: 768px) {
.single-product .product .product_title {
font-size: 22px;
}
.single-product .product .single_add_to_cart_button {
width: 100%;
text-align: center;
}
}Sık Sorulan Sorular
WooCommerce ürün sayfası özelleştirme için hangi eklentiyi önerirsiniz?
Kod bilginiz yoksa Elementor (WooCommerce Builder ile) veya Divi Builder gibi sayfa oluşturucular iş görür. Ancak hafif ve kalıcı bir çözüm için çocuk tema + functions.php kodları her zaman daha iyidir. Web tasarım paketi sayfamızdan profesyonel destek de alabilirsiniz.
Kodları nereye eklemeliyim?
Tüm kodları çocuk tema içindeki functions.php dosyasına ekleyin. Ana temaya eklemeyin, yoksa güncellemelerde silinir. Çocuk tema oluşturmayı bilmiyorsanız WordPress child theme oluşturma rehberimize göz atın.
Bu kodlar site hızını etkiler mi?
Hayır. Kod tabanlı özelleştirmeler eklentilere göre çok daha hafiftir. Her snippet yalnızca ihtiyaç anında çalışır ve veritabanına ek yük getirmez. Site hızını korumak için gereksiz eklentileri kaldırmanızı ve WordPress site hızlandırma rehberimizi uygulamanızı öneririm.
Sonuç
WooCommerce ürün sayfası özelleştirme işlemi, doğru kod snippet’leriyle birkaç dakika içinde yapılabilecek kadar basittir. Burada paylaştığım yöntemlerle ürün sayfanızı markanıza uygun hale getirebilir, müşteri deneyimini iyileştirebilir ve dönüşüm oranlarınızı artırabilirsiniz. Önemli olan tüm değişiklikleri çocuk tema üzerinden yapmak ve her ekleme öncesi yedek almaktır.
Fatura ve muhasebe süreçleriniz için WooCommerce Bireysel Kurumsal Fatura eklentimize de göz atmayı unutmayın. Spam koruması için Bolcal Anti Spam eklentimiz de sitemizde ücretsiz olarak sunuluyor.