آموزش نمایش محصولات مرتبط در بالای محصول ناموجود در ووکامرس

آموزش نمایش محصولات مرتبط در بالای محصول ناموجود در ووکامرس

آیا تا به حال برای شما پیش آمده که یک کاربر به صفحه محصولی در فروشگاه شما مراجعه کند، اما متوجه شود که محصول مورد نظر ناموجود است و سپس بدون هیچ راهنمایی، سایت شما را ترک کند؟ این یکی از بزرگ‌ترین چالش‌های فروشگاه‌های اینترنتی است که می‌تواند به افزایش نرخ پرش و کاهش فروش منجر شود. ووکامرس به طور پیش‌فرض، محصولات مرتبط را در پایین صفحه محصول (پس از خلاصه محصول) نمایش می‌دهد. اما وقتی محصولی ناموجود است، نمایش محصولات مرتبط در پایین صفحه، کاربر را مجبور می‌کند برای پیدا کردن جایگزین‌های مناسب، صفحه را به پایین اسکرول کند. این موضوع به ویژه در فروشگاه‌های با محصولات زیاد، می‌تواند تجربه کاربری را به شدت کاهش دهد. در این مقاله از مجموعه مقالات آموزشی وردپرس، یک کد کاربردی و استاندارد برای انتقال محصولات مرتبط به بالای صفحه محصول ناموجود در ووکامرس ارائه می‌دهیم. با استفاده از این کد، در صورت ناموجود بودن محصول، بخش محصولات مرتبط به بالای صفحه (قبل از خلاصه محصول) منتقل می‌شود تا کاربران به‌سرعت گزینه‌های جایگزین را مشاهده کنند. این کار به کاهش نرخ پرش، افزایش فرصت‌های فروش و بهبود تجربه کاربری کمک می‌کند.

چالش نمایش محصولات مرتبط در پایین صفحه برای محصولات ناموجود

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

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

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

راهکار انتقال محصولات مرتبط به بالای صفحه با کد اختصاصی

برای انتقال محصولات مرتبط به بالای صفحه محصول ناموجود، از هوک‌های ووکامرس و رویداد wp استفاده می‌کنیم. منطق این کد بسیار ساده اما هوشمندانه است:

1. بررسی وضعیت موجودی محصول: ابتدا بررسی می‌شود که آیا محصول فعلی در انبار موجود است یا خیر.
2. حذف محصولات مرتبط از مکان پیش‌فرض: اگر محصول ناموجود باشد، اکشن woocommerce_output_related_products که به طور پیش‌فرض در پایین صفحه (با اولویت ۲۰) قرار دارد، حذف می‌شود.
3. افزودن محصولات مرتبط به مکان جدید: سپس همان اکشن با اولویت ۲۵ به هوک woocommerce_before_single_product اضافه می‌شود که در بالای صفحه محصول اجرا می‌شود.

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

کد کامل انتقال محصولات مرتبط به بالای صفحه محصول ناموجود

در زیر کد کامل و استاندارد برای انتقال محصولات مرتبط به بالای صفحه محصول ناموجود در ووکامرس آورده شده است. این کد را در انتهای فایل functions.php قالب فرزند خود قرار دهید.

/*
 * Move Related Products to Top of Out of Stock Product Page
 * When a product is out of stock, moves related products section above the product summary
 * Mahdi Jafarzadeh
 * https://www.wpwm.ir/
 */

function move_related_products_for_out_of_stock() {
    global $post;
    
    // Get the product object
    $product = wc_get_product($post->ID);
    
    // If product doesn't exist, exit early
    if (!$product) {
        return;
    }
    
    // Check if product is out of stock
    if (!$product->is_in_stock()) {
        // Remove related products from default location (bottom)
        remove_action('woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20);
        
        // Add related products to new location (top of page)
        add_action('woocommerce_before_single_product', 'woocommerce_output_related_products', 25);
    }
}
add_action('wp', 'move_related_products_for_out_of_stock');

نحوه عملکرد کد به صورت گام به گام

در این بخش، هر بخش از کد را به صورت دقیق بررسی می‌کنیم و نحوه عملکرد آن را توضیح می‌دهیم:

1. خط ۸ – تعریف تابع: تابع move_related_products_for_out_of_stock تعریف می‌شود که حاوی منطق اصلی انتقال محصولات مرتبط است.
2. خط ۹ – دسترسی به شیء پست: با استفاده از global $post; به شیء پست فعلی دسترسی پیدا می‌کنیم.
3. خط ۱۲ – دریافت شیء محصول: با استفاده از wc_get_product($post->ID)، شیء محصول مربوط به صفحه جاری را دریافت می‌کنیم.
4. خطوط ۱۵ تا ۱۷ – بررسی وجود محصول: اگر محصول وجود نداشته باشد، تابع با return خاتمه می‌یابد تا از بروز خطا جلوگیری شود.
5. خط ۲۰ – بررسی موجودی محصول: با استفاده از $product->is_in_stock() بررسی می‌شود که آیا محصول در انبار موجود است یا خیر. اگر محصول ناموجود باشد (!$product->is_in_stock())، شرط برقرار می‌شود.
6. خط ۲۲ – حذف از مکان پیش‌فرض: با استفاده از remove_action('woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20)، اکشن پیش‌فرض نمایش محصولات مرتبط که با اولویت ۲۰ در پایین صفحه قرار دارد، حذف می‌شود.
7. خط ۲۵ – افزودن به مکان جدید: با استفاده از add_action('woocommerce_before_single_product', 'woocommerce_output_related_products', 25)، همان اکشن با اولویت ۲۵ به هوک woocommerce_before_single_product اضافه می‌شود که در بالای صفحه محصول اجرا می‌شود.
8. خط ۲۸ – اتصال به رویداد wp: با استفاده از add_action('wp', 'move_related_products_for_out_of_stock')، تابع ما به رویداد wp متصل می‌شود. این رویداد پس از بارگذاری کامل وردپرس و قبل از نمایش قالب اجرا می‌شود و زمان مناسبی برای اعمال تغییرات در هوک‌ها است.

نکات مهم

در این بخش به نکات کلیدی برای استفاده صحیح از این کد اشاره می‌کنیم که باید به آن‌ها توجه ویژه‌ای داشته باشید:

• استفاده از قالب فرزند: کد را در فایل functions.php قالب فرزند قرار دهید تا با بروزرسانی قالب اصلی، تغییرات شما از بین نرود.
• تأثیر بر سایر محصولات: این کد فقط برای محصولات ناموجود اعمال می‌شود و ترتیب نمایش محصولات مرتبط در محصولات موجود را تغییر نمی‌دهد.
• اولویت هوک‌ها: عدد ۲۰ اولویت پیش‌فرض ووکامرس برای نمایش محصولات مرتبط است و عدد ۲۵ برای اطمینان از اجرای صحیح در مکان جدید انتخاب شده است. در صورت تداخل با سایر اکشن‌ها، می‌توانید این اعداد را تنظیم کنید.
• تست پس از اعمال کد: پس از افزودن کد، حتماً یک محصول ناموجود را در فروشگاه باز کنید و از نمایش محصولات مرتبط در بالای صفحه اطمینان حاصل کنید.
• سازگاری با تم‌های مختلف: این کد با تم‌های استاندارد ووکامرس به خوبی کار می‌کند. برخی تم‌ها ممکن است هوک‌های متفاوتی داشته باشند، در این صورت ممکن است نیاز به تنظیمات اضافی داشته باشید.
• هشدار درباره محصولات مرتبط: محصولات مرتبط در ووکامرس بر اساس دسته‌بندی و برچسب‌های مشترک با محصول فعلی تعیین می‌شوند. اگر محصولی دسته‌بندی یا برچسب مشترکی با سایر محصولات نداشته باشد، بخش محصولات مرتبط خالی خواهد بود.

جمع‌بندی

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

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