Amaç:
WooCommercede her ürün varyantını (örneğin, farklı renklerdeki bir ceketi)
site içinde ayrı bir ürün gibi göstermek istiyorsunuz. Yani, varyantlar hem kategori sayfalarında hem de arama sonuçlarında
tekil ürünler olarak listelenecek. Ancak kullanıcı o varyanta tıkladığında,
ana ürün sayfasına yönlendirilecek ve o varyant otomatik olarak seçili olacak.
Bunu başarmak için functions.php dosyanıza ekleyeceğiniz bazı özel kodlarla bu işlemi gerçekleştirebiliriz.
Adım 1: Hazırlık
Öncelikle, WordPress sitenizin
child theme (çocuk tema) kullanıyor olmasına dikkat edin. Aksi takdirde, functions.php dosyasına yaptığınız değişiklikler tema güncellenince kaybolur. Eğer bir child theme kullanmıyorsanız, bir tane oluşturmanızı öneririm.
Adım 2: Varyantları Arama Sonuçlarında ve Kategori Sayfalarında Listeleme
WooCommerce varsayılan olarak varyantları, tek bir ana ürün altında toplar. Ancak, varyantların ayrı ürünler gibi görünmesini istiyorsanız, aşağıdaki kodları kullanabilirsiniz.
Bu kod, WooCommerce ürün sorgusunu değiştirecek ve varyantları ayrı ürünler gibi listeleyecektir:
php
Kodu kopyala
// Varyantları ayrı ürün olarak göster
add_filter('woocommerce_product_query', 'show_variations_as_individual_products');
function show_variations_as_individual_products($query) { if (is_admin() || !$query->is_main_query()) { return; } // Yalnızca kategori ve arama sonuçları sayfalarında çalıştır if (is_product_category() || is_search()) { $query->set('post_type', array('product', 'product_variation')); } }
Ne yapar bu kod?
- woocommerce_product_query filtresi kullanılarak, ürün sorgusu değiştiriliyor.
- Arama sonuçlarında ve kategori sayfalarında product_variation (ürün varyantları) da dahil ediliyor.
- Bu sayede varyantlar, ana ürün gibi listeleniyor.
Adım 3: Varyanta Tıklandığında Ana Ürün Sayfasına Yönlendirme
Şimdi, arama sonuçlarında veya kategori sayfalarında bir varyanta tıkladığınızda, kullanıcıyı ana ürün sayfasına yönlendirmemiz gerekiyor. Ancak bu sayfaya yönlendiğinde, tıklanan varyantın
otomatik olarak seçili olmasını sağlamalıyız.
Bunu yapmak için şu kodları ekleyebilirsiniz:
php
Kodu kopyala
// Varyanta tıklandığında ana ürüne yönlendir ve varyantı seçili yap
add_action('template_redirect', 'redirect_variation_to_parent_product');
function redirect_variation_to_parent_product() { if (is_singular('product_variation')) { global $post; // Varyantın ana ürününü bul $parent_product_id = wp_get_post_parent_id($post->ID); $variation_id = $post->ID; if ($parent_product_id) { // Varyant ID'sini query parametre olarak ekle ve yönlendir $redirect_url = get_permalink($parent_product_id) . '?attribute_pa_' . get_variation_attribute_name($variation_id) . '=' . get_variation_attribute_value($variation_id); wp_safe_redirect($redirect_url); exit; } } }
Ne yapar bu kod?
- Kullanıcı bir varyant sayfasına eriştiğinde, kod otomatik olarak ana ürüne yönlendirir.
- Ancak yönlendirme sırasında, varyant bilgisi de URLye eklenir. Bu sayede, kullanıcı ana ürün sayfasına geldiğinde, o varyant otomatik olarak seçili olur.
Adım 4: Varyantların URL Parametreleri
Kodların düzgün çalışması için varyantların URL'lerinde doğru parametrelerin kullanılması gerekiyor. WooCommerce, ürün varyantlarını attribute_pa_{özellik_adı}={değer} şeklinde URL parametreleri ile yönetir. Örneğin:
ruby
Kodu kopyala
https://siteadiniz.com/urun/ceket/?a..._pa_renk=siyah
Bu URL, ürün sayfasını açtığında
siyah renk varyantını otomatik olarak seçili yapar.
Adım 5: CSS Düzenlemeleri (Opsiyonel)
Eğer varyantların ayrı ayrı görünmesi nedeniyle sayfanızda stil bozulmaları yaşanıyorsa, style.css dosyanızda bazı CSS düzenlemeleri yapabilirsiniz.
Özet
Bu yöntemle:
- Ürün varyantlarınızı sitede ayrı ürünler gibi gösterebilir,
- Ancak tıkladığınızda kullanıcıyı ana ürün sayfasına yönlendirip, doğru varyantın seçili olmasını sağlayabilirsiniz.
