حذف دکمه سبد خرید محصولات فایل ناموجود میباشد در ووکامرس (با کد تست شده)
آموزش مخفی کردن دکمه افزودن به سبد خرید برای کالاهای تمام شده (بدون افزونه)
آیا تا به حال وارد یک فروشگاه اینترنتی شده اید که با دیدن دکمه “افزودن به سبد خرید” خوشحال شوید، اما بعد از کلیک بفهمید کالا فایل ناموجود میباشد است؟ این بدترین تجربه کاربری (UX) ممکن است که می تواند نرخ پرش سایت شما را افزایش دهد. اگر صاحب یک فروشگاه ووکامرسی هستید، نمایش دکمه خرید برای محصولاتی که در انبار ندارید، نه تنها غیرحرفه ای است، بلکه مشتریان وفادار شما را دلسرد می کند.
راه حل چیست؟ نگران نباشید! در این مقاله از اپیک پیکسل، ما یک تکه کد جادویی (Snippet) و بسیار سبک را به شما معرفی می کنیم که به طور خودکار دکمه خرید را برای محصولات فایل ناموجود میباشد، هم در صفحه تکی محصول و هم در صفحات آرشیو و فروشگاه مخفی می کند. با این روش، بدون نصب افزونه های سنگین، فروشگاه خود را حرفه ای تر مدیریت کنید.
چرا باید دکمه خرید کالاهای فایل ناموجود میباشد را حذف کنیم؟
قبل از اینکه سراغ کد برویم، بیایید ببینیم چرا این کار از نظر سئو و فروش حیاتی است:
- بهبود تجربه کاربری (UX): جلوگیری از سردرگمی مشتری.
- کاهش نرخ بازگشت (Bounce Rate): کاربران در سایت می مانند تا محصولات موجود را پیدا کنند.
- جلوگیری از خطاهای سیستمی: کاهش کلیک های بیهوده روی دکمه هایی که عملکردی ندارند.
کالبدشکافی کد: این اسکریپت دقیقاً چه کار می کند؟
کدی که در اختیار داریم از دو بخش اصلی تشکیل شده است. بیایید با هم جزئیات فنی آن را بررسی کنیم تا با اطمینان کامل از آن استفاده کنید.
// مخفی کردن دکمه در صفحه تکی محصول
add_action( 'woocommerce_single_product_summary', 'epicpixel_hide_add_to_cart_single_oos', 1 );
function epicpixel_hide_add_to_cart_single_oos() {
global $product;
// بررسی شرط: اگر محصول در انبار موجود نبود
if ( ! $product->is_in_stock() ) {
// حذف اکشن نمایش دکمه افزودن به سبد خرید
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
}
}
// مخفی کردن دکمه در صفحات فروشگاه و آرشیو (Loop)
add_filter( 'woocommerce_loop_add_to_cart_link', 'epicpixel_hide_add_to_cart_loop_oos', 10, 2 );
function epicpixel_hide_add_to_cart_loop_oos( $button, $product ) {
// اگر محصول موجود نبود، هیچ چیزی (رشته خالی) برگردانده نشود
if ( ! $product->is_in_stock() ) {
return '';
}
return $button; // در غیر این صورت، دکمه را نمایش بده
}
افزونه WooCommerce PDF Vouchers کدتخفیف پی دی اف ووکامرس 4.7.4
دانلودبخش اول: مخفی سازی در صفحه تکی محصول (Single Product Page)
در این بخش، ما از هوک (Hook) woocommerce_single_product_summary استفاده می کنیم.
تحلیل:
- تابع
is_in_stock()وضعیت موجودی را چک می کند. - اگر کالا موجود نباشد، دستور
remove_actionاجرا شده و دکمه پیش فرض ووکامرس (woocommerce_template_single_add_to_cart) را از صفحه حذف می کند. اولویت (Priority) روی ۳۰ تنظیم شده تا دقیقاً همان دکمه اصلی را هدف بگیرد.
بخش دوم: مخفی سازی در صفحات فروشگاه و دسته بندی (Loop / Archive)
این بخش بسیار مهم است، زیرا مشتریان معمولاً در صفحات آرشیو با دکمه های “افزودن به سبد” مواجه می شوند.
تحلیل:
- اینجا از
add_filterرویwoocommerce_loop_add_to_cart_linkاستفاده شده است. - برخلاف بخش قبلی که یک اکشن را حذف می کردیم، اینجا محتوای لینک دکمه را تغییر می دهیم. اگر کالا فایل ناموجود میباشد باشد، تابع
return ''یک رشته خالی برمی گرداند (یعنی هیچ چیز نمایش داده نمی شود).
آموزش گام به گام استفاده از کد در سایت
برای اعمال این تغییرات، شما دو روش اصلی و ایمن پیش رو دارید. لطفاً قبل از هر تغییری، حتماً یک بکاپ کامل از سایت خود بگیرید.
روش اول: استفاده از افزونه Code Snippets (پیشنهاد ما)
این امن ترین روش برای کسانی است که نمی خواهند فایل های قالب را مستقیماً ویرایش کنند.
- افزونه رایگان Code Snippets را نصب و فعال کنید.
- به منوی Snippets > Add New بروید.
- یک نام برای کد انتخاب کنید (مثلاً: “حذف دکمه فایل ناموجود میباشدها”).
- کل کد بالا را در بخش کد کپی کنید.
- گزینه “Run snippet everywhere” را انتخاب کرده و دکمه Save Changes and Activate را بزنید.
روش دوم: قرار دادن در فایل Functions.php
اگر با کدنویسی راحت هستید:
افزونه Visitor Traffic Real Time Statistics pro آمار لحظهای بازدیدکنندگان سایت وردپرس 10.5
دانلود- وارد پیشخوان وردپرس شوید و به مسیر نمایش > ویرایشگر پرونده پوسته بروید.
- فایل
functions.php(توابع پوسته) مربوط به چایلد تم (Child Theme) خود را باز کنید. - کد را به انتهای این فایل اضافه کنید و ذخیره نمایید.
نکته مهم: هرگز کد را در قالب اصلی (Parent Theme) نریزید، زیرا با آپدیت قالب، کدهای شما پاک می شوند.
نکات تکمیلی برای حرفه ای ها
۱. نمایش متن جایگزین
اگر دوست ندارید جای دکمه خالی بماند و می خواهید پیامی مثل “به زودی” نمایش دهید، می توانید در بخش دوم کد، به جای return ''; از کد زیر استفاده کنید:
سپس با کمی CSS در بخش سفارش سازی قالب، به آن استایل بدهید
return '<span class="out-of-stock-badge">فایل ناموجود میباشد</span>';
۲. سازگاری با قالب ها
این کد از هوک های استاندارد ووکامرس استفاده می کند و روی ۹۹٪ قالب های استاندارد (مثل Hello Elementor، Astra، WoodMart و…) به درستی کار می کند. اگر قالب شما از هوک های اختصاصی استفاده می کند، ممکن است نیاز به بررسی مستندات قالب داشته باشید.
پیشنهادات ویژه اپیک پیکسل
مدیریت موجودی فقط شروع کار است! اگر می خواهید فروشگاه ووکامرسی خود را به یک سطح بالاتر ببرید و ظاهری خیره کننده به آن ببخشید، پیشنهاد می کنیم نگاهی به سایر منابع ما بیندازید:
- ابزارهای UI/UX: برای طراحی دکمه های خرید جذاب تر و بنرهای “اتمام موجودی” حرفه ای، از بخش فایل های لایه باز و گرافیکی اپیک پیکسل دیدن کنید.
- افزونه های کاربردی: اگر به دنبال امکانات پیشرفته تری مثل “خبرم کن وقتی موجود شد” هستید، بخش معرفی افزونه های وردپرس در بلاگ ما را از دست ندهید.
ما در اپیک پیکسل متعهد هستیم که بهترین ابزارها و آموزش ها را برای موفقیت کسب وکارهای آنلاین شما فراهم کنیم. اگر سوالی درباره این کد دارید، حتماً در بخش نظرات بپرسید!
