چسبندگی دکمه سبد خرید صفحه محصول ووکامرس

چسبندگی دکمه سبد خرید صفحه محصول ووکامرس

نویسنده : امیرمحمد معلمی
8 دیدگاه
آخرین بروزرسانی : 12 اردیبهشت, 1400

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

آنچه در این مطلب می خوانید

تکثیر از دکمه سبد خرید

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

بیشتر بخوانید: بهینه کردن صفحات در نمایشگر موبایل و تبلت

تغییر موقعیت دکمه در حالت موبایل

برای اینکه بتوانیم دکمه سبد خرید را در حالت موبایل به صورت ثابت نگاه داریم. ابتدا دکمه را انتخاب کرده و از ثب پیشرفته > موقعیت یابی جایگاه آن را برابر ثابت قرار می دهیم. همچنین جهت عمودی دکمه را به سمت پایین انتخاب می کنیم.

بیشتر بخوانید: موقعیت یابی المان ها در المنتور

اقدامات مفید

برای اینکه دکمه سبد خرید در حالت موبایل بهتر دیده شود. بهتر است برای آن یک پس زمینه، یک سایه نرم ایجاد و کمی ساختار فوتر سایت را در حالت موبایل تغییر دهیم. تمامی این موارد را می توانید در ویدئو آموزشی این مقاله مشاهده بفرمایید.

از بین بردن فیلد تعداد محصول

برای اینکه دیگر تعداد محصول در کنار دکمه سبد خرید مشاهده نشود می توانید قطعه کد زیر را از مسیر پیشخوان وردپرس > نمایش > سفارشی سازی و بخش CSS اضافه وارد نمایید.

.woocommerce div.product.elementor .quantity .qty {
    display: none;
}
Share on twitter
Share on linkedin
Share on pinterest
Share on telegram
Share on whatsapp
Share on email