تغییر برچسب حراج ووکامرس روی محصولات

روی محصولات تخفیف‌خورده‌ی فروشگاه ووکامرسی، به‌صورت پیش‌فرض یه برچسب کوچیک با متن «حراج!» نمایش داده می‌شه. این متن سال‌هاست ثابت مونده و در تقریباً همه‌ی فروشگاه‌های ووکامرسی دنیا یکیه.

و همین باعث می‌شه دیده نشه. مخاطبی که ده‌ها فروشگاه رو گشته، این برچسب رو به‌عنوان بخشی از رابط کاربری می‌بینه، نه به‌عنوان یه پیام. خبر خوب اینه که تغییرش ساده‌ست. می‌تونید به‌جاش «تخفیف ویژه» بذارید، یا کاری بهتر انجام بدید و درصد واقعی تخفیف هر محصول رو به‌صورت خودکار نمایش بدید.

در این مقاله سه روش استاندارد رو کامل بررسی می‌کنیم، کدهای آماده و بدون باگ می‌ذاریم (چون کدی که در اکثر آموزش‌ها منتشر شده روی محصولات متغیر درست کار نمی‌کنه)، و در نهایت می‌بینیم اگه بعد از تغییر نتیجه رو ندیدید، مشکل از کجاست.

اول ببینیم این برچسب کجاها نمایش داده می‌شود

قبل از تغییر، بد نیست بدونید با چی طرفید. برچسب حراج در سه جا ظاهر می‌شه. در صفحه‌ی فروشگاه و آرشیو دسته‌بندی‌ها روی کارت هر محصول. در صفحه‌ی خود محصول روی تصویر اصلی. و در بخش‌هایی مثل محصولات مرتبط و پیشنهادی.

در ووکامرس، هر سه‌ی این‌ها از یه قالب واحد استفاده می‌کنن. یعنی وقتی تغییرش می‌دید، همه‌جا اعمال می‌شه. اگه بخواید فقط در یه بخش خاص متفاوت باشه، باید شرط بذارید که در ادامه می‌بینیم چطور.

یک نکته درباره‌ی ادعاهای آماری

در مطالب این حوزه اعداد دقیقی نقل می‌شه، مثل اینکه تغییر برچسب فلان درصد نرخ کلیک رو بالا می‌بره. این اعداد معمولاً منبع مشخصی ندارن و نباید مبنای انتظار شما باشن. چیزی که با اطمینان می‌شه گفت اینه که نمایش درصد تخفیف معمولاً از یه برچسب متنی ساده مؤثرتره، چون اطلاعات واقعی به مخاطب می‌ده. «۴۰٪ تخفیف» یه عدد قابل ارزیابیه؛ «حراج» فقط یه ادعاست.

اما اندازه‌ی این تفاوت برای فروشگاه شما رو فقط با تست خودتون می‌فهمید. اگه ترافیک کافی دارید، یه ماه با برچسب فعلی و یه ماه با برچسب جدید کار کنید و نرخ تبدیل رو مقایسه کنید.

روش اول؛ تغییر از طریق ترجمه

ووکامرس متن این برچسب رو از فایل‌های ترجمه می‌خونه. پس ساده‌ترین راه اینه که ترجمه‌ش رو عوض کنیم. قبل از هر چیز یه نکته‌ی مهم. هیچ‌وقت فایل‌های داخل پوشه‌ی خود افزونه‌ی ووکامرس رو ویرایش نکنید. با اولین به‌روزرسانی، همه‌ی تغییراتتون پاک می‌شه.

با افزونه‌ی Loco Translate

این افزونه رایگانه و کار رو خیلی ساده می‌کنه.

بعد از نصب و فعال‌سازی، از منوی Loco Translate به بخش افزونه‌ها برید و ووکامرس رو انتخاب کنید. زبان فارسی رو باز کنید و اگه وجود نداره، با گزینه‌ی زبان جدید بسازیدش. در کادر جستجو عبارت Sale! رو تایپ کنید. دقت کنید که علامت تعجب هم بخشی از عبارته. متن ترجمه‌ی دلخواهتون رو در کادر پایین وارد کنید و ذخیره بزنید.

مهم‌ترین نکته‌ی این روش

موقع ساخت زبان جدید یا ذخیره‌ی ترجمه، Loco Translate از شما می‌پرسه فایل ترجمه کجا ذخیره بشه. این انتخاب حیاتیه.

اگه محل ذخیره رو روی پوشه‌ی زبان سیستم بذارید، ترجمه‌ی شما با اولین به‌روزرسانی خودکار فایل‌های زبان وردپرس بازنویسی می‌شه. وردپرس به‌صورت دوره‌ای ترجمه‌های افزونه‌ها رو از مخزن رسمی به‌روز می‌کنه و هر تغییری که اونجا داده باشید از بین می‌ره.

پس حتماً گزینه‌ی Custom یا محل سفارشی رو انتخاب کنید. با این کار فایل در پوشه‌ی مخصوص خود افزونه ذخیره می‌شه و به‌روزرسانی‌های وردپرس بهش دست نمی‌زنن. این نکته دلیل اصلیه که خیلی‌ها می‌گن ترجمه‌شون بعد از مدتی برگشته به حالت قبل.

روش دستی بدون افزونه

اگه نمی‌خواید افزونه نصب کنید، می‌تونید فایل ترجمه رو با نرم‌افزار رایگان Poedit ویرایش کنید و نسخه‌ی نهایی رو در پوشه‌ی wp-content/languages/plugins/ قرار بدید.

اما همون هشدار بالا اینجا هم صدق می‌کنه. فایل‌های این پوشه در به‌روزرسانی‌های خودکار ترجمه بازنویسی می‌شن. برای همین برای اکثر کاربران، افزونه با محل ذخیره‌ی سفارشی گزینه‌ی امن‌تریه.

روش دوم؛ تغییر با کد

اگه نمی‌خواید درگیر فایل‌های ترجمه بشید، ووکامرس یه فیلتر مخصوص برای همین کار داره. کد رو باید در فایل functions.phpقالب فرزند قرار بدید، نه قالب اصلی. اگه قالب فرزند ندارید، بهتره از افزونه‌های مدیریت کد سفارشی استفاده کنید تا با به‌روزرسانی قالب کدتون پاک نشه.

تغییر ساده‌ی متن

add_filter( 'woocommerce_sale_flash', 'mihan_change_sale_flash' );
function mihan_change_sale_flash( $html ) {
    return '<span class="onsale">تخفیف ویژه</span>';
}

با ذخیره‌ی این کد، متن برچسب در همه‌ی بخش‌های فروشگاه عوض می‌شه.

کلاس onsale رو حفظ کنید، چون استایل‌های قالب شما به همین کلاس وصلن. اگه حذفش کنید، برچسب ظاهر درستش رو از دست می‌ده.

نمایش درصد تخفیف

این گزینه‌ی بهتریه چون اطلاعات واقعی به مشتری می‌ده. اما اینجا باید یه هشدار جدی بدم.

کدی که در اکثر آموزش‌های این حوزه منتشر شده، فقط قیمت اصلی و قیمت حراج خود محصول رو می‌خونه. برای محصولات ساده مشکلی نداره، اما برای محصولات متغیر درست کار نمی‌کنه؛ چون قیمت در سطح متغیرها تعریف شده نه در سطح محصول اصلی. نتیجه‌ش یا نمایش نشدن برچسبه یا نمایش عدد اشتباه مثل صد درصد.

کد زیر این مشکل رو حل می‌کنه و برای هر دو نوع محصول کار می‌کنه.

add_filter( 'woocommerce_sale_flash', 'mihan_sale_percentage', 10, 3 );
function mihan_sale_percentage( $html, $post, $product ) {

    if ( ! $product || ! $product->is_on_sale() ) {
        return $html;
    }

    $percentages = array();

    if ( $product->is_type( 'variable' ) ) {

        foreach ( $product->get_children() as $child_id ) {
            $variation = wc_get_product( $child_id );

            if ( ! $variation || ! $variation->is_on_sale() ) {
                continue;
            }

            $regular = (float) $variation->get_regular_price();
            $sale    = (float) $variation->get_sale_price();

            if ( $regular > 0 && $sale > 0 ) {
                $percentages[] = round( ( ( $regular - $sale ) / $regular ) * 100 );
            }
        }

    } else {

        $regular = (float) $product->get_regular_price();
        $sale    = (float) $product->get_sale_price();

        if ( $regular > 0 && $sale > 0 ) {
            $percentages[] = round( ( ( $regular - $sale ) / $regular ) * 100 );
        }
    }

    if ( empty( $percentages ) ) {
        return $html;
    }

    $percent = max( $percentages );

    return '<span class="onsale">' . esc_html( $percent ) . '٪ تخفیف</span>';
}

این کد برای محصول متغیر، بیشترین درصد تخفیف بین متغیرها رو نمایش می‌ده. اگه ترجیح می‌دید کمترین درصد نمایش داده بشه، کافیه max رو به min تغییر بدید. و اگه در هر شرایطی درصد قابل محاسبه نبود، کد به‌جای خطا دادن، برچسب پیش‌فرض رو برمی‌گردونه.

متفاوت کردن برچسب در صفحه‌ی محصول

اگه بخواید در صفحه‌ی فروشگاه یه متن و در صفحه‌ی خود محصول متن دیگه‌ای نمایش داده بشه، کافیه شرط بذارید.

add_filter( 'woocommerce_sale_flash', 'mihan_conditional_sale_flash', 10, 3 );
function mihan_conditional_sale_flash( $html, $post, $product ) {

    if ( is_product() ) {
        return '<span class="onsale">پیشنهاد ویژه امروز</span>';
    }

    return '<span class="onsale">تخفیف</span>';
}

روش سوم؛ ویرایش قالب

اگه بخواید ساختار HTML برچسب رو کاملاً تغییر بدید، مثلاً چند عنصر جدا داخلش بذارید، باید فایل قالب رو بازنویسی کنید. فایل اصلی در این مسیر قرار داره.

wp-content/plugins/woocommerce/templates/loop/sale-flash.php

برای بازنویسی، این فایل رو کپی کنید و در قالب خودتون با این ساختار قرار بدید.

wp-content/themes/your-child-theme/woocommerce/loop/sale-flash.php

به‌جای your-child-theme نام پوشه‌ی قالب فرزندتون رو بذارید. دقت کنید که ساختار پوشه‌ها باید دقیقاً همین باشه، یعنی یه پوشه به اسم woocommerce و داخلش پوشه‌ی loop.

محتوای پیش‌فرض این فایل تقریباً این شکلیه.

<?php
defined( 'ABSPATH' ) || exit;

global $post, $product;

if ( $product->is_on_sale() ) {
    echo apply_filters(
        'woocommerce_sale_flash',
        '<span class="onsale">' . esc_html__( 'Sale!', 'woocommerce' ) . '</span>',
        $post,
        $product
    );
}

و شما می‌تونید محتواش رو به هر شکلی که می‌خواید تغییر بدید.

یه توصیه‌ی مهم. این روش رو فقط وقتی انتخاب کنید که واقعاً به ساختار HTML متفاوتی نیاز دارید. بازنویسی قالب یعنی اگه ووکامرس در نسخه‌های بعدی این فایل رو تغییر بده، نسخه‌ی شما قدیمی می‌مونه و ممکنه مشکل ایجاد کنه. برای تغییر متن ساده، روش دوم به‌مراتب تمیزتره.

یک نکته‌ی مهم درباره‌ی قالب‌های بلوکی

این بخش رو اضافه می‌کنم چون در آموزش‌های قدیمی‌تر نیست و ممکنه باعث سردرگمی بشه. اگه فروشگاه شما از بلوک‌های جدید ووکامرس برای نمایش محصولات استفاده می‌کنه، برچسب حراج در بعضی بخش‌ها توسط بلوک مخصوص خودش رندر می‌شه، نه از طریق همون قالب PHP قدیمی. در این حالت ممکنه فیلتر بالا در همه‌جا اعمال نشه.

راه تشخیصش ساده‌ست. بعد از اعمال تغییر، هم صفحه‌ی فروشگاه و هم صفحه‌ی محصول و هم هر بخشی که با بلوک ساخته شده رو بررسی کنید. اگه در بعضی جاها متن عوض شده و در بعضی جاها نه، دلیلش همینه. در این حالت، روش ترجمه معمولاً پوشش کامل‌تری می‌ده، چون متن رو در سطح رشته عوض می‌کنه نه در سطح قالب.

زیباتر کردن برچسب با CSS

بعد از تغییر متن، می‌تونید ظاهرش رو هم بهتر کنید. کد زیر رو در بخش افزودن CSS سفارشی قالبتون قرار بدید.

.onsale {
    background-color: #e74c3c;
    color: #fff;
    border-radius: 50px;
    padding: 6px 14px;
    font-weight: bold;
    font-size: 13px;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.25);
}

اگه خواستید یه انیمیشن ملایم هم اضافه کنید، این کد رو بهش اضافه کنید.

@keyframes mihan-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.onsale {
    animation: mihan-pulse 2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .onsale { animation: none; }
}

اون بخش آخر رو حذف نکنید. بعضی کاربران در تنظیمات سیستمشون کاهش انیمیشن رو فعال کردن، معمولاً به دلایل پزشکی مثل سرگیجه یا حساسیت به حرکت. این چند خط باعث می‌شه انیمیشن برای اون‌ها اجرا نشه.

و یه توصیه‌ی عمومی. انیمیشن ملایم توجه جلب می‌کنه اما انیمیشن تند و پرتکرار آزاردهنده‌ست و حس تبلیغات مزاحم می‌ده. اگه ده تا محصول در یه صفحه همگی چشمک بزنن، نتیجه برعکس می‌شه.

یه نکته‌ی فنی هم هست. سعی کنید از !important استفاده نکنید مگر اینکه مجبور باشید. اگه استایل شما اعمال نمی‌شه، معمولاً یعنی انتخابگر قالب اولویت بیشتری داره و راه‌حل بهتر، دقیق‌تر کردن انتخابگره نه اجبار.

عیب‌یابی؛ چرا تغییرات را نمی‌بینم؟

اگه بعد از اعمال تغییر باز هم برچسب قدیمی رو می‌بینید، به ترتیب این‌ها رو بررسی کنید.

کش. شایع‌ترین دلیل. اول کش افزونه‌ی سایتتون رو کامل پاک کنید، بعد کش مرورگر رو با کلیدهای ترکیبی رفرش اجباری. و بعد یه بار در حالت ناشناس مرورگر تست کنید تا مطمئن بشید نسخه‌ی تازه رو می‌بینید. اگه از افزونه‌ی رخش استفاده می‌کنید، پاکسازی کش از داشبورد انجام می‌شه و گرم‌سازی خودکار هم باعث می‌شه صفحات بلافاصله با نسخه‌ی جدید ساخته بشن.

محل قرار دادن کد. اگه کد رو در functions.phpقالب اصلی گذاشتید و قالب به‌روزرسانی شده، کدتون پاک شده. کد باید در قالب فرزند یا افزونه‌ی مدیریت کد باشه.

تداخل با قالب یا افزونه. بعضی قالب‌های فروشگاهی و افزونه‌های تخفیف، برچسب حراج رو با سیستم خودشون جایگزین می‌کنن و اون فیلتر رو نادیده می‌گیرن. برای تشخیص، موقتاً به یکی از قالب‌های پیش‌فرض وردپرس سوئیچ کنید و ببینید تغییر اعمال می‌شه یا نه.

اگه با قالب پیش‌فرض کار کرد، مشکل از قالبتونه و باید ببینید تنظیمات خودش برای برچسب تخفیف داره یا نه. خیلی از قالب‌های حرفه‌ای این گزینه رو در تنظیماتشون دارن و اصلاً نیازی به کد نیست.

ترجمه‌ی بازنویسی‌شده. اگه از روش ترجمه استفاده کردید و بعد از مدتی برگشته به حالت قبل، محل ذخیره‌ی فایل ترجمه رو بررسی کنید و روی حالت سفارشی بذارید.

خطای PHP. اگه بعد از افزودن کد سایت سفید شد، یعنی خطای نحوی وجود داره. از طریق فایل‌منیجر هاست کد رو حذف کنید تا سایت برگرده و بعد با دقت بیشتری دوباره اضافه‌ش کنید.

کدام روش برای شما مناسب است؟

سوالات متداول

جمع‌بندی

تغییر برچسب حراج یکی از اون تغییرات کوچیکیه که چند دقیقه وقت می‌بره اما در ظاهر فروشگاه تفاوت ایجاد می‌کنه.

اگه فقط می‌خواید متن رو عوض کنید و با کد راحت نیستید، روش ترجمه رو انتخاب کنید و حتماً محل ذخیره رو روی حالت سفارشی بذارید. اگه می‌خواید درصد تخفیف نمایش داده بشه، از کد این مقاله استفاده کنید که برای محصولات متغیر هم درست کار می‌کنه.

قبل از هر کاری، یه بار تنظیمات خود قالبتون رو نگاه کنید. خیلی وقت‌ها این قابلیت از قبل وجود داره و اصلاً نیازی به کد و ترجمه نیست. موفق و پیروز باشید. 🙂

تیم تولید محتوا

ما در تیم تولید محتوای میهن وردپرس در تلاش هستیم تا بهترین مقالات آموزشی در زمینه وردپرس و کسب‌و‌کارهای اینترنتی را تهیه کنیم. صحت محتوای این صفحه توسط رضا راد بررسی خواهد شد.