WooCommerce, e-ticaret sitenizde ürün çeşitliliğini yönetmenin en kolay yollarından birini sunar. Özellikle değişken ürünler (varyasyonlar) sayesinde, müşterilerinize ürün seçeneklerini (renk, beden, vb.) ve her seçeneğe özgü fiyatları sunabilirsiniz. Ancak, bazen bu varyasyonların fiyatlarının görünürlüğü ve sunumu, kullanıcı deneyimini önemli ölçüde etkileyebilir. Varyasyon fiyatlarının, müşterilerin ürünleri kolayca karşılaştırabilmesi için net ve anlaşılır bir şekilde gösterilmesi önemlidir. Bu yazıda, WooCommerce mağazanızda varyasyon seçeneklerinin yanında fiyatların nasıl görüntüleneceğini adım adım açıklayarak, satışlarınızı artıracak basit ama etkili bir özelleştirme paylaşacağız.
WooCommerce’de ürün varyasyonlarında seçim yapılırken her varyasyonun fiyatını göstermek için, aşağıdaki kodu kullanabilirsiniz. Bu kod, ürün varyasyon seçicisinin yanına ilgili fiyatı ekleyecektir.
Adımlar:
- Tema dosyanızın
functions.php
dosyasını düzenleyin: Kodunuzu temanızınfunctions.php
dosyasına ekleyin. (Child Tema kullanıyorsanız, bu dosyayı düzenlediğinizden emin olun.) - Aşağıdaki kodu ekleyin:
/* WooCommerce Varyasyonlarda Fiyat Göstermek */
add_filter('woocommerce_dropdown_variation_attribute_options_html', 'add_price_to_variation_options', 10, 2);
function add_price_to_variation_options($html, $args) {
// Mevcut ürün
global $product;
if (!$product || !is_a($product, 'WC_Product_Variable')) {
return $html;
}
// Tüm varyasyonları al
$variations = $product->get_available_variations();
// Fiyatları eşleştirmek için bir dizi oluştur
$prices = [];
foreach ($variations as $variation) {
foreach ($variation['attributes'] as $attribute_name => $attribute_value) {
if (!empty($attribute_value)) {
$regular_price = floatval($variation['display_regular_price']);
$sale_price = floatval($variation['display_price']);
// Eğer indirimli fiyat varsa, o fiyatı göster
if ($sale_price < $regular_price) {
$formatted_price = wc_price($sale_price);
preg_match('/\d+([.,]\d+)?/', $formatted_price, $matches);
$prices[sanitize_title($attribute_value)] = ' (' . $matches[0] . ' ₺)';
} else {
// İndirimli fiyat yoksa, normal fiyatı göster
$formatted_price = wc_price($regular_price);
preg_match('/\d+([.,]\d+)?/', $formatted_price, $matches);
$prices[sanitize_title($attribute_value)] = ' (' . $matches[0] . ' ₺)';
}
}
}
}
// HTML içeriğini düzenle
$dom = new DOMDocument();
@$dom->loadHTML('<?xml encoding="utf-8" ?>' . $html);
$options = $dom->getElementsByTagName('option');
foreach ($options as $option) {
$value = $option->getAttribute('value');
if (!empty($value) && isset($prices[$value])) {
$price = $prices[$value];
$option->nodeValue .= ' ' . $price;
}
}
return $dom->saveHTML();
}
Bu düzenleme sayesinde, varyasyon seçeneklerinde indirimli fiyat varsa indirimli fiyat, indirimli fiyat yoksa normal fiyat görünecektir. Artık hem indirimli hem de normal fiyatlar doğru bir şekilde gösterilecektir.
Not: Sorun yaşamamak için WooCommerce ve temanızın güncel olduğundan emin olun.
Nasıl Çalışır:
- Fiyatı Sayısal Olarak Alır:
wc_price()
fonksiyonu kullanılarak formatlanmış fiyat alınır.preg_match()
fonksiyonu ile sadece sayısal kısmı alınır, yani örneğin250 ₺
yerine250,00 ₺
yazılır.250 ₺
şeklinde göstermek isterseniz “preg_match('/\d+([.,]\d+)?/', $formatted_price, $matches);
” yerine “preg_match('/\d+/', $formatted_price, $matches); // Sadece sayısal kısmı al
” kodu ile değiştirin.
- İndirimli Fiyat Kontrolü:
- Eğer bir varyasyonun indirimli fiyatı varsa, bu fiyat parantez içinde gösterilecektir.
- Normal Fiyat Gösterimi:
- Eğer indirimli fiyat yoksa, varyasyonun normal fiyatı (yani
display_regular_price
) parantez içinde gösterilecektir.
- Eğer indirimli fiyat yoksa, varyasyonun normal fiyatı (yani
- HTML Etiketlerini Temizler:
preg_match()
ile fiyatın sadece sayısal kısmı (250
) ve para birimi (₺
) alınarak temizlenir.
- Düz Metin Olarak Fiyat:
- Artık fiyat sadece düz metin olarak Nitelik +
"Fiyat ₺"
şeklinde görünecektir.
- Artık fiyat sadece düz metin olarak Nitelik +
Çıktı:
Varyasyonlar şu şekilde görünür:
- Beyaz (250,00 ₺)