Merhaba arkadaşlar, e-ticaret dünyasında rekabet artarken, WooCommerce kullanıcı deneyimini geliştirmek için basit ve etkili stratejilerle öne çıkmak önemlidir. Bu yazıda, WooCommerce e-ticaret sitenizde uygulayabileceğiniz küçük dokunuşlar ve pratik fonksiyonlar hakkında keyifli bilgiler bulacaksınız. Küçük ve orta ölçekli işletmeler için tasarlanmış bu pratik çözümlerle müşterilerinizi elde tutun ve unutulmaz bir alışveriş deneyimi sunun. İyi okumalar!
Sepeti Temizle Butonu
Bu özel kod parçacığı, WooCommerce alışveriş sepetinde bulunan tüm ürünleri temizlemek için bir “Sepeti Boşalt” butonu ekler. Bu buton, müşterilere kolaylık sağlayarak istenmeyen ürünleri sepetten kaldırmalarına olanak tanır.

add_action("woocommerce_cart_actions", "woo_empty_cart_button");
function woocommerce_empty_cart_button()
{
echo '<a href="' .
esc_url(add_query_arg("empty_cart", "yes")) .
'" class="button" title="' .
esc_attr("Sepeti boşalt", "woocommerce") .
'"> <center>' .
esc_html("Sepeti boşalt", "woocommerce") .
"</center></a>";
}
// empty the cart and refresh the page (redirects to the cart page)
add_action("wp_loaded", "woo_empty_cart_action", 20);
function woocommerce_empty_cart_action()
{
if (isset($_GET["empty_cart"]) && "yes" === esc_html($_GET["empty_cart"])) {
WC()->cart->empty_cart();
$referer = wc_get_cart_url();
wp_safe_redirect($referer);
}
}
Sepet Toplam Kazancı Göster
Bu fonksiyon, müşterilere alışveriş sepetlerindeki toplam kazancı gösterir. Sepet içerisindeki ürünlerden kaynaklanan indirimleri ve vergi miktarını toplam kazanca ekleyerek kullanıcıların tasarruf ettikleri tutarı gösterir.

function vono_total_earnings()
{
global $woocommerce;
$subtotal = $woocommerce->cart->get_subtotal();
$allTotal = $woocommerce->cart->total;
$totalTax = $woocommerce->cart->get_total_tax();
$totalEarningsCal =
$subtotal > $allTotal ? $subtotal - $allTotal + $totalTax : false;
$totalEarnings = wc_price($totalEarningsCal);
if ($totalEarningsCal > 0) {
echo <<<HTML
<table cellspacing="0" class="shop_table shop_table_responsive">
<tbody>
<tr class="total_winning">
<th>Toplam Kazancın</th>
<td data-title="Toplam Kazancın" style="color: var(--wc-green); font-weight: 700;">{$totalEarnings}</td>
</tr>
</tbody>
</table>
HTML;
}
}
add_action("woocommerce_proceed_to_checkout", "vono_total_earnings", 0);
WooCommerce’de Kuponu Otomatik Olarak Uygulama
Bu kod, belirli bir kupon kodunu URL üzerinden otomatik olarak sepete uygular. Müşteriler, özel bir URL kullanarak belirli bir kupon avantajından otomatik olarak yararlanabilirler.
function coupon_code_to_session()
{
if (isset($_GET["coupon_code"])) {
// Ensure that customer session is started
if (!WC()->session->has_session()) {
WC()->session->set_customer_session_cookie(true);
}
// Check and register coupon code in a custom session variable
$coupon_code = WC()->session->get("coupon_code");
if (empty($coupon_code) && isset($_GET["coupon_code"])) {
$coupon_code = esc_attr($_GET["coupon_code"]);
WC()->session->set("coupon_code", $coupon_code); // Set the coupon code in session
}
}
}
add_action("init", "coupon_code_to_session");
function apply_discount()
{
// Set coupon code
$coupon_code = WC()->session->get("coupon_code");
if (!empty($coupon_code) && !WC()->cart->has_discount($coupon_code)) {
WC()->cart->add_discount($coupon_code); // apply the coupon discount
WC()->session->__unset("coupon_code"); // remove coupon code from session
}
}
add_action("woocommerce_before_cart_table", "apply_discount", 10, 0);
//https://example.com/?coupon_code=10OFF
Woocommerce Ürünlere Kademeli Yıldız Rozeti Ekleme
Kademeli Yıldız Rozeti Nedir? Kademeli yıldız rozeti, ürünlerin değerlendirildiği bir liste veya platformda sıkça kullanılan bir özelliktir. Bu rozet, ürünlerin aldığı puanlara dayalı olarak görüntülenen bir işarettir. Her yıldız rozeti, ürünün aldığı puanı temsil eder. Örneğin, bir ürün 5 yıldız puan aldıysa, ürünün yanında 3 yıldızlı bir rozet resmi görüntülenir. Benzer şekilde, 4 yıldız puan alan bir ürün için 2 yıldızlı bir rozet resmi ve 3 yıldız puan alan bir ürün için 1 yıldızlı bir rozet resmi kullanılır.

add_action("woocommerce_before_shop_loop_item_title", "star_badge_badge_shop_page", 10);
function star_badge_badge_shop_page()
{
global $product;
$average = $product->get_average_rating();
if (5 == $average) {
echo '<img class="onsale" src="https://localhost/trywordpress/wp-content/uploads/2023/08/3yildiz.png" style="width:65px; height:65px; transform: translateY(70px);"> ';
} elseif (4 <= $average && $average < 5) {
echo '<img class="onsale" src="https://localhost/trywordpress/wp-content/uploads/2023/08/2yildiz.png" style="width:65px; height:65px; transform: translateY(70px);"> ';
} elseif (3 <= $average && $average < 4) {
echo '<img class="onsale" src="https://localhost/trywordpress/wp-content/uploads/2023/08/1yildiz.png" style="width:65px; height:65px; transform: translateY(70px);"> ';
}
}
WooCommerce Mağaza Sayfasında Kayan Sepet Tutarı Gösterimi
Bu özel fonksiyon, WooCommerce mağaza sayfalarını daha etkileşimli ve kullanıcı dostu hale getirmek için tasarlanmıştır. Sayfanın alt kısmına eklenen kayan sepet tutarı göstergesi, müşterilere anlık bilgiler sunarak alışveriş deneyimini daha şeffaf ve kullanıcı odaklı hale getirir.

Örnek: Show floating cart amount with woocommerce ajax
<?php
// örnek: https://fpexper.com/urun-listeleme/
add_action('woocommerce_after_shop_loop', 'vono_output_content_wrapper_end', 10);
function vono_output_content_wrapper_end()
{
$cartTotal = WC()->cart->get_cart();
$cartAmount = WC()->cart->get_cart_contents_total();
$cartUrl = wc_get_cart_url();
$display = (count($cartTotal) > 0) ? "display: flex; opacity: 1;" : "display: none; opacity: 0;";
// if (count($cartTotal) > 0) {
?>
<style>
.floating-cart {
background-color: #4CAF50;
border: 3px solid rgba(0, 0, 0, .1);
color: #fff;
opacity: 0;
flex-flow: row nowrap;
justify-content: space-between;
padding: .7rem 3rem;
align-items: center;
position: fixed;
bottom: 2.3em;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
gap: 150px;
transition: all 0.6s linear 0.4s;
}
.vono-cart {
padding: .618em 1em !important;
}
.floating-cart-info::before {
content: "\e016";
font-family: 'WooCommerce';
margin-right: .6em;
}
.vono-cart::after {
content: "\e029";
font-family: 'WooCommerce';
margin-left: .6em;
}
@media only screen and (max-width: 600px) {
.floating-cart {
width: 100%;
bottom: 0;
padding: .7rem;
gap: 50px;
}
}
</style>
<div class="floating-cart woocommerce" id="floating-cart" style="<?= $display ?>;">
<div>
<strong><?= count($cartTotal) . ' Ürün | ' . wc_price($cartAmount) ?></strong><br>
<small class="floating-cart-info">Ek ücretler ve indirimler sepette hesaplanmaktadır.</small>
</div>
<div><a class="vono-cart wp-block-button wp-block-button__link no-border-radius" href="<?= $cartUrl ?>">Sepet</a></div>
</div>
<?php
}
//ürün sepete eklendikten sonra sayfa yenilemeden fiyat güncelleme
add_filter('woocommerce_add_to_cart_fragments', 'wc_refresh_mini_cart_count');
function wc_refresh_mini_cart_count($fragments)
{
ob_start();
$cartTotal = WC()->cart->get_cart();
$cartAmount = WC()->cart->get_cart_contents_total();
$cartUrl = wc_get_cart_url();
?>
<div class="floating-cart woocommerce" id="floating-cart" style="display: flex; opacity: 1;">
<div>
<strong><?= count($cartTotal) . ' Ürün | ' . wc_price($cartAmount) ?></strong><br>
<small>Ek ücretler ve indirimler sepette hesaplanmaktadır.</small>
</div>
<div><a class="vono-cart button" href="<?= $cartUrl ?>">Sepet</a></div>
</div>
<?php
$fragments['#floating-cart'] = ob_get_clean();
return $fragments;
}
BKZ: https://rudrastyh.com/woocommerce/get-number-of-items-in-cart.html
WooCommerce Sayfa Yapısını Özelleştirme
Kod parçası, sayfalama slug’ını değiştirmek ve URL’yi optimize etmek için gerekli ayarları günceller. $newSlug değişkeni, sayfalama slug’ını belirlemek için kullanılır ve bu sayede sayfaların daha anlaşılır ve kullanıcı dostu bir yapıda olmasını sağlar.
Standart Sayfalama Yapısı: siteadi.com/magaza/page/2/
Özelleştirilmiş Sayfalama Yapısı: siteadi.com/magaza/sayfa/2/
add_action('init', 'woocommerce_shop_page_change');
function woocommerce_shop_page_change()
{
global $wp_rewrite;
$newSlug = "sayfa"; #yeni URL parçası
$shopPageSlug = get_page_uri(get_option('woocommerce_shop_page_id'));
$wp_rewrite->pagination_base = $newSlug; //where new-slug is the slug you want to use ;)
unset($wp_rewrite->extra_rules_top[$shopPageSlug. "/page/([0-9]{1,})/?$"]);
$wp_rewrite->extra_rules_top[$shopPageSlug. '/' . $newSlug . '/([0-9]{1,})/?$'] = 'index.php?post_type=product&paged=$matches[1]';
}
Ürün Varyasyonlarını URL ile Senkronize Etme
Bu kod, WooCommerce ile geliştirilen bir WordPress web sitesindeki ürün sayfalarında yer alan varyasyon seçeneklerini, kullanıcıların seçtikleri değerleri URL üzerinden görüntülemelerini ve paylaşmalarını sağlar. Bu sayede, kullanıcılar belirli bir ürünün belirli varyasyonlarını seçtiklerinde, sayfanın URL’si otomatik olarak güncellenir, böylece seçilen varyasyonlar paylaşılabilecek ve daha sonra tekrar ziyaret edildiğinde önceden seçilmiş olarak görüntülenebilecektir.
<?php
add_action('wp_footer', 'product_variation_url_change');
function product_variation_url_change()
{
?>
<script>
jQuery(document).ready(function($) {
// Seçilen seçeneklere bağlı olarak URL'yi güncelleme işlevi
function updateURL(select) {
var currentURL = window.location.href;
var selectedValue = select.val();
var attributeName = select.data('attribute_name');
var newAttributeName = attributeName.replace('attribute_', 'v_');
// URL'den parametreleri al
var url = new URL(currentURL);
var searchParams = new URLSearchParams(url.search);
// Parametreyi yeni öznitelik adıyla güncelle veya ekle
searchParams.set(newAttributeName, selectedValue);
// Eski parametreyi sil, eğer varsa
searchParams.delete(attributeName);
// Güncellenmiş parametrelerle URL'yi yeniden oluştur
url.search = searchParams.toString();
var newURL = url.toString();
// Sayfayı yeni URL kullanarak güncelle
window.history.replaceState({}, document.title, newURL);
}
// URL parametrelerine bağlı olarak seçili seçenekleri ayarlamak için
$('.variations select').each(function() {
var attributeName = $(this).data('attribute_name');
var newAttributeName = attributeName.replace('attribute_', 'v_');
var paramValue = new URLSearchParams(window.location.search).get(newAttributeName);
if (paramValue) {
$(this).val(paramValue);
updateURL($(this)); // Sayfa yüklendiğinde URL'yi güncelleyin
}
});
// Diğer seçeneklerdeki değişiklikleri dinle
$('.variations select').on('change', function() {
updateURL($(this)); // Seçenek değişikliklerinde URL'yi güncelleyin
});
});
</script>
<?php
}
Sevgili Okuyucularımız, Sizlere bilgi, eğlence ve ilham dolu içerikler sunabildiysek ne mutlu bize. Eğer yazımızda herhangi bir düzeltme veya öneri sunmak isterseniz, lütfen yorum yapmaktan çekinmeyin. Sizden gelen geri bildirimler, içeriklerimizi daha da geliştirmemiz için bize büyük bir yardımcı olacaktır. Teşekkür ederiz!
Unutmayın! Paylaşmak; kazanmanın en hızlı ve kolay yoludur. Bir sonraki makalede görüşmek dileğiyle esen kalın.
Yine her zamanki gibi muhteşem içerik.
Üstadım çok teşekkür ederim, birbirinden değerli özellikleri bizimle palaştığınız için.
Değerli yorumun için teşekkür ederim. Woocommerce ilgili daha fazla makale gelecek beklemede kalın 🙂