آموزش نمایش تصویر کوچک محصول در سبد خرید و پرداخت ووکامرس
آیا تا به حال برای شما پیش آمده که در صفحه پرداخت ووکامرس، مشتریان محصولات مشابه را با یکدیگر اشتباه بگیرند؟ یا اینکه پس از افزودن چندین محصول به سبد خرید، نتوانند به راحتی تشخیص دهند که هر آیتم مربوط به کدام محصول است؟ به طور پیشفرض، ووکامرس در بخش مرور سفارش (Order Review) صفحه تسویه حساب، فقط نام محصول، تعداد و قیمت را نمایش میدهد و تصویری از محصول نشان نمیدهد. این موضوع به ویژه برای فروشگاههایی که محصولات مشابه با تفاوتهای جزئی دارند، میتواند باعث سردرگمی کاربر و کاهش تجربه کاربری شود. در این مقاله از مجموعه مقالات آموزشی وردپرس، یک کد کاربردی و استاندارد برای نمایش تصویر کوچک محصول در سبد خرید و صفحه پرداخت ووکامرس ارائه میدهیم که با استفاده از آن میتوانید تصویر شاخص هر محصول را در کنار نام آن در بخش مرور سفارش نمایش دهید. این کار به کاربران کمک میکند تا تأیید بصری سریعی از محصولات انتخابشده داشته باشند و تجربه خرید روانتری را تجربه کنند.
چرا نمایش تصویر محصول در صفحه پرداخت اهمیت دارد؟
افزودن تصویر کوچک محصول به صفحه سبد خرید و پرداخت، مزایای متعددی برای فروشگاه شما دارد:
- بهبود تجربه کاربری: کاربران با مشاهده تصویر محصول، سریعتر و دقیقتر متوجه میشوند که چه محصولی را خریداری میکنند و این موضوع اعتماد آنها را به فرآیند خرید افزایش میدهد.
- کاهش اشتباهات: در فروشگاههایی که محصولات مشابه با تفاوتهای جزئی (مانند رنگ یا سایز) دارند، نمایش تصویر به کاربران کمک میکند تا انتخاب خود را تأیید کنند و از اشتباه جلوگیری شود.
- افزایش نرخ تبدیل: نمایش تصاویر محصول در مراحل پایانی خرید، تجربه بصری جذابتری ایجاد میکند و میتواند نرخ تکمیل خرید را افزایش دهد.
- کاهش پشتیبانی: با نمایش تصویر، احتمال اینکه کاربران پس از خرید با سوال “آیا محصول درستی را خریداری کردهام؟” به پشتیبانی مراجعه کنند، کاهش مییابد.
راهکار نمایش تصویر محصول در سبد خرید و پرداخت با کد اختصاصی
برای نمایش تصویر کوچک محصول در سبد خرید و صفحه پرداخت، از فیلتر woocommerce_cart_item_name استفاده میکنیم. این فیلتر یکی از ابزارهای قدرتمند ووکامرس برای دستکاری عنوان هر آیتم در سبد خرید و صفحه تسویه حساب است. کد ارائه شده در این مقاله، با استفاده از تابع $product->get_image() که به صورت پیشفرض در ووکامرس وجود دارد، تصویر شاخص محصول را با اندازه دلخواه (۵۰ در ۵۰ پیکسل) دریافت کرده و آن را در کنار نام محصول نمایش میدهد. همچنین با استفاده از شرط is_checkout()، اطمینان حاصل میشود که این تغییر فقط در صفحه پرداخت اعمال شود و سایر بخشهای سایت تحت تأثیر قرار نگیرند. این روش کاملاً استاندارد، سبک و بدون نیاز به نصب افزونه است و با تمامی نسخههای ووکامرس سازگاری دارد.
کد کامل نمایش تصویر کوچک محصول در سبد خرید و پرداخت ووکامرس
در زیر کد کامل و استاندارد برای نمایش تصویر کوچک محصول در سبد خرید و صفحه پرداخت ووکامرس آورده شده است. این کد را در انتهای فایل functions.php قالب فرزند خود قرار دهید.
/*
* Show Product Thumbnail in WooCommerce Cart & Checkout
* Displays product featured image next to product name in order review section
* Mahdi Jafarzadeh
* https://www.wpwm.ir/
*/
add_filter('woocommerce_cart_item_name', 'add_product_image_to_checkout', 9999, 3);
function add_product_image_to_checkout($product_name, $cart_item, $cart_item_key) {
// Only apply on checkout page
if (!is_checkout()) {
return $product_name;
}
// Get product object from cart item
$product = $cart_item['data'];
// Get product thumbnail with 50x50 size and left alignment class
$thumbnail = $product->get_image(
array('50', '50'),
array('class' => 'alignleft')
);
// Return thumbnail followed by product name
return $thumbnail . $product_name;
}نحوه عملکرد کد به صورت گام به گام
در این بخش، هر بخش از کد را به صورت دقیق بررسی میکنیم و نحوه عملکرد آن را توضیح میدهیم:
- خط ۶ – افزودن فیلتر با اولویت بالا: با استفاده از
add_filter('woocommerce_cart_item_name', 'add_product_image_to_checkout', 9999, 3)، یک فیلتر به هوکwoocommerce_cart_item_nameاضافه میکنیم. عدد ۹۹۹۹ به عنوان اولویت، تضمین میکند که این فیلتر پس از سایر فیلترها اجرا شود و تغییرات ما بر روی خروجی نهایی اعمال گردد. سه پارامتر$product_name(نام محصول)،$cart_item(آیتم سبد خرید) و$cart_item_key(کلید آیتم سبد خرید) به تابع ارسال میشوند. - خط ۸ – تعریف تابع: تابع
add_product_image_to_checkoutبا سه پارامتر ورودی تعریف میشود.$product_nameشامل نام نمایش داده شده محصول،$cart_itemشامل اطلاعات کامل آیتم سبد خرید و$cart_item_keyشامل کلید یکتای آیتم در سبد خرید است. - خطوط ۱۰ تا ۱۲ – بررسی شرط: با استفاده از
!is_checkout()بررسی میشود که آیا صفحه فعلی صفحه پرداخت است یا خیر. اگر کاربر در صفحه پرداخت نباشد، تابع بدون تغییر، نام محصول را بازمیگرداند و از اعمال تغییرات در سایر صفحات جلوگیری میکند. - خط ۱۵ – دریافت شیء محصول: با استفاده از
$product = $cart_item['data'];، شیء محصول مورد نظر را از آیتم سبد خرید استخراج میکنیم. - خطوط ۱۸ تا ۲۰ – تولید تصویر کوچک: با استفاده از
$product->get_image(array('50', '50'), array('class' => 'alignleft'))، تصویر شاخص محصول را با اندازه ۵۰ در ۵۰ پیکسل و کلاسalignleftبرای چیدمان درست در کنار متن دریافت میکنیم. - خط ۲۳ – بازگشت نتیجه: در نهایت، با ترکیب تصویر کوچک و نام محصول، متن نهایی برای نمایش هر آیتم سبد خرید در صفحه پرداخت تولید میشود.
نکات مهم
در این بخش به نکات کلیدی برای استفاده صحیح از این کد اشاره میکنیم که باید به آنها توجه ویژهای داشته باشید:
- استفاده از قالب فرزند: کد را در فایل
functions.phpقالب فرزند قرار دهید تا با بروزرسانی قالب اصلی، تغییرات شما از بین نرود. - تغییر اندازه تصویر: میتوانید اعداد ۵۰ و ۵۰ را در تابع
get_image()به هر اندازهای که میخواهید تغییر دهید. ابعاد بزرگتر مانند ۸۰ در ۸۰ پیکسل نیز قابل استفاده هستند. - تغییر چیدمان تصویر: برای تغییر موقعیت تصویر نسبت به نام محصول، میتوانید کلاس
alignleftرا بهalignrightتغییر دهید یا از CSS سفارشی برای تنظیم دقیقتر استفاده کنید. - تست پس از اعمال کد: پس از افزودن کد، حتماً یک محصول را به سبد خرید اضافه کرده و به صفحه پرداخت بروید تا از نمایش صحیح تصاویر اطمینان حاصل کنید.
- سازگاری با بلاکهای ووکامرس: توجه داشته باشید که این کد ممکن است با بلاکهای جدید ووکامرس (Checkout Blocks) به درستی کار نکند. در صورت استفاده از بلاکها، ممکن است نیاز به روشهای جایگزین داشته باشید.
- سفارشیسازی بیشتر: اگر میخواهید علاوه بر تصویر، لینک به صفحه محصول نیز به نام یا تصویر اضافه شود، میتوانید کد را با استفاده از
$product->get_permalink()توسعه دهید.
جمعبندی
در این مقاله از سری مقالات آموزشی وردپرس، به بررسی روش نمایش تصویر کوچک محصول در سبد خرید و صفحه پرداخت ووکامرس پرداختیم. با استفاده از کد ساده و استانداردی که ارائه شد، میتوانید تصویر شاخص هر محصول را در کنار نام آن در بخش مرور سفارش صفحه تسویه حساب نمایش دهید. این تغییر کوچک اما تأثیرگذار، تجربه کاربری را بهبود میبخشد، اشتباهات را کاهش میدهد و نرخ تکمیل خرید را افزایش میدهد.
امیدواریم این آموزش برای شما مفید بوده باشد. اگر سوالی درباره نمایش تصویر محصول در سبد خرید و پرداخت، نحوه استفاده از کد یا هر بخش دیگری از این آموزش دارید، لطفاً در بخش نظرات مطرح کنید. همچنین اگر تجربهای در سفارشیسازی صفحات ووکامرس دارید، خوشحال میشویم آن را با ما و سایر کاربران به اشتراک بگذارید.
