نحوه نمایش درصد تخفیف در ووکامرس
نمایش درصد تخفیف در ووکامرس یکی از راهکارهای کاربردی برای جلب توجه مشتریان و افزایش فروش محصولات است. این قابلیت به کاربران نشان میدهد که چه مقدار در خرید خود صرفهجویی میکنند و آنها را ترغیب به خرید میکند. در این مقاله، با دو روش ساده برای نمایش درصد تخفیف در فروشگاه ووکامرسی آشنا میشوید: استفاده از افزونههای آماده و کدنویسی سفارشی که امکان شخصی سازی دقیقتر را فراهم میکند.
هر روش مزایا و ویژگیهای خاص خود را دارد که با توجه به نیاز شما میتوانند انتخاب شوند. با ما در شرکت طراحی سایت در کرمان اسمارتن، همراه باشید تا به شما نشان دهیم چگونه اعمال تخفیف روی محصولات در ووکامرس را در فروشگاه خود پیادهسازی کنید.
2 راهکار برای نمایش درصد تخفیف در ووکامرس
در این بخش دو راهکار اصلی برای نمایش درصد تخفیف در ووکامرس بررسی میشود. که هر کدام مزایا و ویژگیهای خاص خود را دارند. این روشها عبارتند از:
۱٫ افزونه نمایش کد تخفیف ووکامرس
یکی از افزونههای بسیار کاربردی برای نمایش درصد تخفیف در ووکامرس، افزونه “WooCommerce Smart Sale Badge” است. این افزونه به شما این امکان را میدهد که به طور خودکار مقدار تخفیف محصولات را کنار تصویر محصول نمایش دهید. نصب و راهاندازی این افزونه بسیار ساده است و به راحتی میتوانید آن را در چند دقیقه روی سایت خود پیاده سازی کنید. افزونه “WooCommerce Smart Sale Badge” به صورت رایگان در مخزن وردپرس موجود است و تاکنون در بیش از ۲ هزار سایت وردپرس نصب شده است. که نشان دهنده محبوبیت و کارایی آن در بین کاربران وردپرس است.
نحوه عملکرد افزونه
برای استفاده از افزونه ” WooCommerce Smart Sale Badge “ ابتدا باید آن را روی وب سایت خود نصب و فعال کنید. برای این کار وارد پنل مدیریت وردپرس شوید. به بخش افزونهها بروید و این پلاگین را از مخزن وردپرس دریافت و نصب کنید. اگر با نحوه نصب افزونه آشنایی ندارید. میتوانید راهنمای ما در مورد نصب افزونهها در وردپرس را مطالعه کنید.
پس از فعال سازی افزونه هیچ تنظیمات جدیدی به پنل مدیریت وردپرس شما اضافه نمیشود و نیازی به تنظیمات خاصی برای استفاده از آن نیست. برای استفاده از این افزونه کافی است که وارد صفحه محصول مورد نظر شوید و در بخش اطلاعات محصول، در کادر مربوط به قیمت فروش فوق العاده مقدر تخفیف را وارد کنید. سپس با کلیک بر روی دکمه به روزرسانی محصول، تخفیف شما بر روی تصویر محصول در صفحه فروشگاه نمایش داده خواهد شد.
این افزونه همچنین از محصولات متغیر پشتیبانی میکند. به این معنا که میتوانید برای هر ویژگی محصول قیمت ویژه تعیین کرده و آن را نمایش دهید.
اگر بعد از انجام این مراحل تخفیف به درستی نمایش داده نشد. احتمالاً افزونه با قالب شما سازگار نیست. برای حل این مشکل کافی است قالب وردپرس خود را تغییر دهید تا افزونه به درستی کار کند.
۲٫ کد نویسی سفارشی برای نمایش درصد تخفیف در صفحات
برای کسانی که با کدنویسی آشنا هستند، افزودن کدهای سفارشی میتواند گزینه مناسبی باشد.
هنگامی که برای محصولات خود تخفیف تعیین میکنید؛ به طور پیش فرض معمولا عبارت حراج در کنار محصول نمایش داده میشود.
اما اگر بخواهید حرفهایتر عمل کنید برای اعمال تخفیف روی محصولات در ووکامرس، درصد تخفیف را نمایش میدهید.
بهتر از قبل از انجام راهکارهای زیر و پیش از اعمال تغییرات:
- از فایل functions.php نسخه پشتیبان تهیه کنید.
- تست کد را در یک محیط آزمایشی انجام دهید.
نمایش در فروشگاه و دستهبندیها و محصولات مرتبط
برای اعمال درصد تخفیف در صفحات مختلف فروشگاه، مانند صفحه فروشگاه و دستهبندیها، کافی است که زیر را در فایل function.php قالب خود قرار دهید.
add_action( 'woocommerce_before_shop_loop_item_title', 'mt_show_sale_percentage_loop', 25 );
function mt_show_sale_percentage_loop() {
global $product;
if ( $product->is_on_sale() ) {
if ( ! $product->is_type( 'variable' ) ) {
$max_percentage = ( ( $product->get_regular_price() - $product->get_sale_price() ) / $product->get_regular_price() ) * 100;
} else {
$max_percentage = 0;
foreach ( $product->get_children() as $child_id ) {
$variation = wc_get_product( $child_id );
$price = $variation->get_regular_price();
$sale = $variation->get_sale_price();
if ( $price != 0 && ! empty( $sale ) ) $percentage = ( $price - $sale ) / $price * 100;
if ( $percentage > $max_percentage ) {
$max_percentage = $percentage;
}
}
}
echo "-" . round($max_percentage) . "%";
}
}
نمایش در صفحه محصول
برای اعمال درصد تخفیف در صفحه محصول، کافی است کدهای زیر را به فایل functions.php قالب خود اضافه کنید. پیش از اعمال تغییرات، از فایل مورد نظر یک نسخه پشتیبانی تهیه کنید. سپس کدها را در انتهای فایل قرار دهید.
add_filter( 'woocommerce_available_variation', 'mt_product_saving_percentage', 10, 3 );
function mt_product_saving_percentage( $data, $product, $variation ) {
if( $variation->is_on_sale() ) {
$saved_amount = $data['display_regular_price'] - $data['display_price'];
$percentage = round( $saved_amount / $data['display_regular_price'] * 100 );
$data['price_html'] .= ''. __("تخفیف شما") .': '.$percentage.'%
'; }
return $data;
}
نمایش محصول متغییر
برای نمایش درصد تخفیف در صفحه محصول، کافی است کدهای زیر را به فایل functions. Php قالب خود اضافه کنید.
add_filter( 'woocommerce_available_variation', 'mt_product_saving_percentage', 10, 3 );
function mt_product_saving_percentage( $data, $product, $variation ) {
if( $variation->is_on_sale() ) {
$saved_amount = $data['display_regular_price'] - $data['display_price'];
$percentage = round( $saved_amount / $data['display_regular_price'] * 100 );
$data['price_html'] .= ''. __("تخفیف شما") .': '.$percentage.'%
'; }
return $data;
}
برای تغییر اندازه فونت ، رنگ یا ظاهر نوار درصد تخفیف میتوانید کلاس sale-perc را ویرایش کنید. کدهای مربوط به این کلاس در ادامه ارائه شده است و باید آنها را در فایل style. Css یا بخش تنظیمات css سفارشی قالب خود قرار دهید.
.sale-perc {
background-color: #ff5050;
display: inline;
font-weight: 700;
border-radius: 20px;
color: #fff;
font-size: 12px;
line-height: 25px !important;
padding: 0 15px !important;
}
پس از ذخیره تغییرات به صفحه فروشگاه خود مراجعه کنید و مشاهد خواهید کرد که میزان درصد تخفیف به محصولات شما اضافه شده است و نمایش محصولات تخفیف دار ووکامرس به شکل زیر خواهد بود.
جمع بندی
نمایش درصد تخفیف در فروشگاههای ووکامرس، راهی ساده و موثر برای افزایش جذابیت بصری فروشگاه و ترغیب کاربران به خرید است. شما میتوانید با نصب افزونههای کاربردی یا کدنویسی، این ویژگی را به فروشگاه خود اضافه کنید. هر روش مزایا خاص خود را دارد و انتخاب آن بستگی به نیاز و سطح دانش فنی شما دارد.
با این روشها فروشگاه خود را حرفهایتر و تجربه خرید مشتریانتان را لذت بخشتر کنید. حالا وقت آن است که این قابلیت را به فروشگاه خود اضافه کرده و تاثیر مثبت آن را در فروش محصولات مشاده کنید. برای کسب اطلاعات بیشتر با ما تماس بگیرید. تا تیم طراحی سایت در کرمان به سوالات شما پاسخ دهند.