نمایش ۴ محصول از هر دسته در صفحه خالی فروشگاه ووکامرس
Slug پیشنهادی: show-4-products-per-category-empty-woocommerce-shop
آیا صفحه فروشگاه ووکامرس شما خالی است و پیام ”No products were found“ را نمایش میدهد؟ آیا میخواهید به جای این پیام خستهکننده، ۴ محصول از هر دستهبندی را به صورت مرتب و جذاب به کاربران نشان دهید؟ در این مقاله از مجموعه مقالات آموزشی وردپرس، یک کد کاربردی و استاندارد برای نمایش ۴ محصول از هر دسته در صفحه خالی فروشگاه ووکامرس ارائه میدهیم که با استفاده از آن میتوانید تجربه کاربری فروشگاه خود را به طور چشمگیری بهبود بخشید و نرخ پرش را کاهش دهید. این کد با حذف محصولات پیشفرض از صفحه فروشگاه و جایگزینی آن با بخشهای مجزای دستهبندی که هر کدام شامل ۴ محصول هستند، یک چیدمان منحصربهفرد برای فروشگاه شما ایجاد میکند.
چالش صفحه خالی فروشگاه و تأثیر آن بر تجربه کاربری و فروش
در فروشگاههای ووکامرس، زمانی که صفحه فروشگاه (Shop Page) به دلایل مختلف مانند فیلترهای اعمالشده، عدم تطابق محصولات با معیارهای جستجو، یا مشکلات کش خالی میشود، پیام پیشفرض ”No products were found matching your selection“ به کاربر نمایش داده میشود. این پیام نه تنها تجربه کاربری را به شدت کاهش میدهد، بلکه میتواند باعث افزایش نرخ پرش و کاهش فروش شود. کاربرانی که با صفحه خالی مواجه میشوند، احتمالاً فروشگاه شما را ترک کرده و به سراغ رقبا میروند. با استفاده از کدی که در این مقاله ارائه میشود، به جای نمایش این پیام خالی، ۴ محصول از هر دستهبندی را به کاربران نشان میدهید و آنها را به کاوش در دستهبندیهای مختلف تشویق میکنید. همچنین با افزودن لینک ”مشاهده همه محصولات“ برای هر دسته، مسیری آسان برای مرور کامل هر دستهبندی فراهم میکنید.
راهکار نمایش ۴ محصول از هر دسته با کد اختصاصی
برای نمایش ۴ محصول از هر دسته در صفحه خالی فروشگاه، از ترکیب چندین هوک و فیلتر ووکامرس استفاده میکنیم. این راهکار شامل سه مرحله اصلی است:
- حذف محصولات پیشفرض از صفحه فروشگاه: با استفاده از هوک
pre_get_posts، محصولات پیشفرض ووکامرس را از صفحه فروشگاه حذف میکنیم تا صفحه خالی شود. - حذف پیام ”No products were found“: با استفاده از
remove_action، پیام پیشفرض ووکامرس را که در صورت خالی بودن صفحه نمایش داده میشود، حذف میکنیم. - نمایش ۴ محصول از هر دسته: با استفاده از هوک
woocommerce_no_products_found، یک تابع سفارشی جایگزین میکنیم که دستهبندیهای والد را دریافت کرده و برای هر کدام، ۴ محصول را با استفاده از شورتکدنمایش میدهد.
این روش کاملاً استاندارد، سبک و بدون نیاز به نصب افزونه است و با تمامی نسخههای ووکامرس سازگاری دارد.
کد کامل نمایش ۴ محصول از هر دسته در صفحه خالی فروشگاه
در زیر کد کامل و استاندارد برای نمایش ۴ محصول از هر دسته در صفحه خالی فروشگاه ووکامرس آورده شده است. این کد را در انتهای فایل functions.php قالب فرزند خود قرار دهید.
/*
* Show 4 Products from Each Category on Empty WooCommerce Shop Page
* Replaces the "No products found" message with category sections showing 4 products each
* Mahdi Jafarzadeh
* https://www.wpwm.ir/
*/
// Step 1: Remove all products from the shop page query
add_action('pre_get_posts', 'remove_products_from_shop_page_query');
function remove_products_from_shop_page_query($query) {
// Only apply to main query, shop page, and not in admin
if (!$query->is_main_query()) return;
if (!is_shop()) return;
if (is_admin()) return;
// Force the query to return no products
$query->set('post__in', array(0));
}
// Step 2: Remove the default "No products found" message
remove_action('woocommerce_no_products_found', 'wc_no_products_found');
// Step 3: Add custom content - 4 products from each category
add_action('woocommerce_no_products_found', 'show_4_products_per_category');
function show_4_products_per_category() {
// Get all top-level categories
$args = array(
'parent' => 0,
'hide_empty' => true,
'taxonomy' => 'product_cat',
'fields' => 'slugs',
);
$categories = get_categories($args);
// Loop through each category and display 4 products
foreach ($categories as $category_slug) {
$term_object = get_term_by('slug', $category_slug, 'product_cat');
if (!$term_object) continue;
echo '<hr><h2>' . esc_html($term_object->name) . '</h2>';
// Display 4 products from this category using WooCommerce shortcode
echo do_shortcode('');
// Add a "View all" link for the category
echo '<p><a href="' . esc_url(get_term_link($category_slug, 'product_cat')) . '">مشاهده همه محصولات ' . esc_html($term_object->name) . ' →</a></p>';
}
}نحوه عملکرد کد به صورت گام به گام
در این بخش، هر بخش از کد را به صورت دقیق بررسی میکنیم و نحوه عملکرد آن را توضیح میدهیم:
- خطوط ۶ تا ۱۲ – افزودن هوک pre_get_posts: با استفاده از
add_action('pre_get_posts', 'remove_products_from_shop_page_query')، یک عملکرد به هوکpre_get_postsاضافه میکنیم. این هوک قبل از اجرای کوئری اصلی وردپرس فراخوانی میشود و زمان مناسبی برای تغییر کوئری است. - خطوط ۸ تا ۱۰ – اعتبارسنجی: با استفاده از
$query->is_main_query()، مطمئن میشویم فقط کوئری اصلی صفحه را تغییر میدهیم. با!is_shop()از اعمال تغییرات در صفحات دیگر جلوگیری میکنیم و با!is_admin()از اعمال تغییرات در بخش مدیریت جلوگیری میکنیم. - خط ۱۳ – خالی کردن کوئری: با استفاده از
$query->set('post__in', array(0))، کوئری را به گونهای تنظیم میکنیم که هیچ محصولی بازگردانده نشود. این کار باعث میشود صفحه فروشگاه به صورت خالی نمایش داده شود. - خط ۱۶ – حذف پیام پیشفرض: با استفاده از
remove_action('woocommerce_no_products_found', 'wc_no_products_found')، عملکرد پیشفرض ووکامرس که پیام ”No products were found“ را نمایش میداد، حذف میشود. - خط ۱۹ – افزودن محتوای سفارشی: با استفاده از
add_action('woocommerce_no_products_found', 'show_4_products_per_category')، هوکwoocommerce_no_products_foundرا به تابع سفارشی خود متصل میکنیم. - خطوط ۲۱ تا ۴۰ – نمایش ۴ محصول از هر دسته: در تابع
show_4_products_per_category():- خطوط ۲۳ تا ۲۹: با استفاده از
get_categories()، تمام دستهبندیهای والد (سطح اول) را دریافت میکنیم. - خطوط ۳۲ تا ۳۴: با استفاده از
get_term_by()، اطلاعات کامل هر دستهبندی را دریافت میکنیم. - خط ۳۶: نام دستهبندی را به صورت یک تیتر
h2نمایش میدهیم. - خط ۳۹: با استفاده از
do_shortcode('')، ۴ محصول از هر دسته را در ۴ ستون نمایش میدهیم. - خط ۴۲: یک لینک ”مشاهده همه محصولات“ برای هر دسته اضافه میکنیم تا کاربران بتوانند به صفحه کامل آن دسته مراجعه کنند.
- خطوط ۲۳ تا ۲۹: با استفاده از
نکات مهم
در این بخش به نکات کلیدی برای استفاده صحیح از این کد اشاره میکنیم که باید به آنها توجه ویژهای داشته باشید:
- استفاده از قالب فرزند: کد را در فایل
functions.phpقالب فرزند قرار دهید تا با بروزرسانی قالب اصلی، تغییرات شما از بین نرود. - تأثیر بر سایر صفحات: این کد فقط بر روی صفحه فروشگاه (Shop Page) تأثیر میگذارد و صفحات دیگر مانند دستهبندیها و برچسبها را تحت تأثیر قرار نمیدهد.
- تست پس از اعمال کد: پس از افزودن کد، حتماً صفحه فروشگاه را باز کنید و از نمایش ۴ محصول از هر دسته اطمینان حاصل کنید.
- سفارشیسازی تعداد محصولات: میتوانید عدد ۴ را در شورتکد
limit="4"به هر تعداد که میخواهید تغییر دهید. - سفارشیسازی تعداد ستونها: میتوانید عدد ۴ را در
columns="4"به تعداد ستونهای مورد نظر خود تغییر دهید. - سازگاری با تمهای مختلف: این کد با تمهای استاندارد ووکامرس به خوبی کار میکند. در صورت عدم عملکرد صحیح با تم شما، ممکن است نیاز به تنظیمات اضافی داشته باشید.
- هشدار درباره کدهای مشابه: برخی از سایتها این قطعه کد را به صورت افزونه یا آموزش پولی با قیمتهای بالا به فروش میرسانند، در حالی که این کد کاملاً رایگان و در دسترس است.
جمعبندی
در این مقاله از سری مقالات آموزشی وردپرس، به بررسی روش نمایش ۴ محصول از هر دسته در صفحه خالی فروشگاه ووکامرس پرداختیم. با استفاده از کد ارائه شده، میتوانید به جای پیام خستهکننده ”No products were found“، ۴ محصول از هر دستهبندی را به صورت مرتب و جذاب به کاربران نمایش دهید. این تغییر ساده اما تأثیرگذار، تجربه کاربری را بهبود میبخشد، نرخ پرش را کاهش میدهد و کشف محصولات را برای کاربران آسانتر میکند. همچنین با افزودن لینک ”مشاهده همه محصولات“ برای هر دسته، کاربران را به مرور کامل هر دستهبندی تشویق میکنید. این راهکار کاملاً استاندارد و بدون نیاز به نصب افزونه است.
امیدواریم این آموزش برای شما مفید بوده باشد. اگر سوالی درباره نمایش محصولات از هر دسته در صفحه فروشگاه، نحوه استفاده از کد یا هر بخش دیگری از این آموزش دارید، لطفاً در بخش نظرات مطرح کنید. همچنین اگر تجربهای در بهبود چیدمان صفحه فروشگاه ووکامرس دارید، خوشحال میشویم آن را با ما و سایر کاربران به اشتراک بگذارید.
پرامپت هوش مصنوعی برای تولید تصویر شاخص مقاله
پرامپت: “A 3D glassmorphism minimalist illustration representing a WooCommerce shop page layout with 4 products displayed per category in horizontal rows. Show multiple category sections each with 4 product cards in a row, with a ‘View All’ link at the end of each section. Include a shopping cart icon, WooCommerce logo, and a clean grid layout. Gradient background from #2b7fff to #00bba7, modern and clean design, abstract tech art style with transparent glass layers, subtle reflections, and soft shadows, highly detailed, 8k resolution, professional and elegant.”
