🚀 آموزش ووکامرس | غیرفعال کردن اسکرول وقتی سبد خرید ووکامرس باز است با CSS
اگر شما هم از ویجت سبد خرید کناری ووکامرس استفاده می‌کنید، حتماً متوجه شده‌اید که هنگام باز شدن سبد خرید، کاربر همچنان می‌تواند در صفحه اسکرول کند. این موضوع می‌تواند حواس کاربر را از فرآیند خرید پرت کند و حتی باعث کاهش نرخ تبدیل شود. اما نگران نباشید! در این آموزش کوتاه، یاد می‌گیریم که چگونه با یک خط کد CSS، اسکرول صفحه را هنگام باز شدن سبد خرید غیرفعال کنیم و تجربه کاربری بهتری را ارائه دهیم. 🚀🔥
🎯 مشکل کجاست؟
وقتی سبد خرید در حالت کناری (Side Cart) باز می‌شود، کاربر همچنان می‌تواند در صفحه اسکرول کند. این موضوع دو مشکل ایجاد می‌کند:
✅ توجه کاربر از خرید منحرف می‌شود.
✅ کاربر ممکن است ندانسته به بخش‌های دیگر صفحه برود و تعامل خود را با سبد خرید از دست بدهد.
پس بهترین کار این است که وقتی سبد خرید باز است، اسکرول صفحه را غیرفعال کنیم تا تمرکز کاربر روی خرید باقی بماند.
🛠 راه‌حل ساده با CSS
برای حل این مشکل، کافی است از یک انتخابگر CSS قدرتمند استفاده کنیم که وقتی سبد خرید باز است، خاصیت overflow: hidden را روی کل صفحه اعمال کند. این یعنی:
🔹 وقتی سبد خرید باز است، اسکرول صفحه غیرفعال شود
🔹 وقتی سبد خرید بسته شد، اسکرول مجدداً فعال شود
کد CSS مورد نیاز:
<!-- amirrezarahmani.ir -->
:is(html,body):has(.elementor-menu-cart__container.elementor-lightbox[aria-hidden="false"]) {
overflow:hidden;
}
🔍 توضیح کد
🔹 :is(html,body) → این قسمت مشخص می‌کند که استایل روی کل صفحه (هم html و هم body) اعمال شود.
🔹 :has(...) → این انتخابگر می‌گوید که اگر المنت سبد خرید باز باشد، به html و body یک ویژگی اضافه کن.
🔹 .elementor-menu-cart__container.elementor-lightbox[aria-hidden="false"] → این بخش، سبد خرید کناری ووکامرس را هدف قرار می‌دهد. وقتی مقدار aria-hidden="false" باشد، یعنی سبد خرید باز است.
🔹 overflow: hidden; → این خط باعث می‌شود که اسکرول صفحه غیرفعال شود.
با این تکنیک ساده، تجربه خرید کاربران را بهبود دهید و نرخ تبدیل فروشگاه خود را افزایش دهید! 🚀🔥