ایجاد آیکونهای شخصیسازی شده برای دستهها
توضیحات:
ایجاد آیکونهای شخصیسازی شده برای دستهها در ووکامرس
یکی از روشهای مؤثر برای بهبود تجربه کاربری و زیبایی بصری فروشگاه اینترنتی، استفاده از آیکونهای اختصاصی برای دستهبندی محصولات است. آیکونها باعث میشوند کاربران درک بهتری از ساختار فروشگاه داشته باشند و سریعتر بتوانند محصولات مورد نظر خود را پیدا کنند. در این مقاله به آموزش کامل افزودن آیکونهای شخصیسازی شده برای دستهها در فروشگاه ووکامرسی میپردازیم.
چرا استفاده از آیکون برای دستهها مهم است
استفاده از آیکونهای شخصیسازیشده در فروشگاه آنلاین مزایای زیادی دارد که عبارتند از:
ایجاد رابط کاربری جذابتر
هدایت آسانتر کاربران در ساختار فروشگاه
افزایش نرخ کلیک روی دستهها
سازگاری بهتر با طراحی موبایل
تمایز برند و افزایش هویت بصری
اگر ظاهر فروشگاه حرفهایتر به نظر برسد، احتمال ماندگاری کاربران بیشتر خواهد بود و در نهایت فروش افزایش مییابد.
روشهای افزودن آیکون به دستهبندی محصولات
برای افزودن آیکون اختصاصی به دستهها در ووکامرس میتوان از چند روش مختلف استفاده کرد که در ادامه به آنها پرداخته میشود.
استفاده از فیلد تصویر دسته در ووکامرس
ووکامرس بهصورت پیشفرض برای هر دستهبندی محصول امکان بارگذاری تصویر شاخص را فراهم کرده است. با کمی شخصیسازی قالب میتوان این تصویر را بهعنوان آیکون نمایش داد.
مراحل انجام:
۱ وارد پیشخوان وردپرس شوید
۲ به بخش محصولات و سپس دستهها بروید
۳ یک دسته جدید ایجاد کنید یا یکی از دستههای موجود را ویرایش نمایید
۴ در قسمت تصویر بندانگشتی، یک آیکون یا تصویر گرافیکی مرتبط با دسته بارگذاری کنید
۵ تنظیمات را ذخیره نمایید
برای نمایش این تصویر در صفحات فروشگاه یا در سایدبار، لازم است قالب شما از این قابلیت پشتیبانی کند یا با کدنویسی کمی آن را اضافه کنید.
استفاده از افزونه برای آیکون دستهها
اگر با کدنویسی راحت نیستید یا میخواهید امکانات بیشتری داشته باشید، استفاده از افزونهها بهترین گزینه است.
برخی افزونههای محبوب در این زمینه:
افزونه دستهبندی با آیکون سفارشی
افزونههای صفحهساز مانند المنتور که امکان قرار دادن آیکون برای دستهها را دارند
افزونههای منو حرفهای که در نمایش دستهها از آیکون بهره میبرند
با این ابزارها میتوانید:
بهسادگی آیکون SVG یا PNG آپلود کنید
از آیکونهای آماده مانند فونتآسوم استفاده نمایید
تنظیمات رنگ، اندازه و موقعیت آیکون را مدیریت کنید
استفاده از فونتآیکونها مانند Font Awesome
فونتآیکونها مجموعهای از نمادها هستند که مانند فونت در سایت قرار میگیرند. برای افزودن فونتآسوم به دستهبندیها:
۱ کتابخانه Font Awesome را به قالب خود اضافه کنید
۲ هنگام ویرایش دسته، یک فیلد سفارشی برای درج کلاس آیکون اضافه نمایید
۳ در فایل قالب فروشگاه یا ابزارکها، کلاس آیکون را فراخوانی کنید
مثلاً برای دسته کیف، آیکونی مانند fa-bag-shopping قابل استفاده است.
طراحی آیکون اختصاصی برای هر دسته
اگر میخواهید برند خاصی بسازید، پیشنهاد میشود برای هر دسته محصول، یک آیکون منحصر بهفرد طراحی نمایید. این آیکونها را میتوانید با نرمافزارهای گرافیکی مانند ایلوستریتور طراحی کرده و با فرمت PNG یا SVG در سایت بارگذاری نمایید.
نکاتی برای طراحی آیکون:
سبک یکسان در تمام آیکونها
استفاده از رنگهای برند
سادگی و وضوح بالا در اندازههای کوچک
زمینه شفاف برای هماهنگی بیشتر با قالب
نمایش آیکونها در بخشهای مختلف فروشگاه
پس از افزودن آیکونها، مهم است بدانید در کدام قسمتها باید آنها را نمایش دهید تا بیشترین تأثیر را داشته باشند.
نمایش در صفحه فروشگاه
در بالای صفحه اصلی فروشگاه یا صفحات دستهبندی، میتوانید دستههای مختلف را همراه با آیکون نمایش دهید تا کاربران سریعتر دسته مورد نظر را انتخاب کنند.
نمایش در منو یا فهرست
منوهای بالای سایت محل مناسبی برای نمایش دستهها به همراه آیکون هستند. با استفاده از افزونههای منوی حرفهای یا تنظیمات قالب، میتوانید آیکون را کنار عنوان دسته نمایش دهید.
نمایش در ابزارکهای سایدبار
ابزارک دستهها در سایدبار هم میتواند آیکون داشته باشد. اگر از قالبی استفاده میکنید که ابزارک اختصاصی برای دستهبندی دارد، معمولاً پشتیبانی از آیکون نیز در آن گنجانده شده است.
نمایش در موبایل
در طراحی واکنشگرا یا نسخه موبایل، آیکونها نقش مهمتری دارند. بهجای نوشتن عنوان دسته، میتوان از آیکونهای واضح استفاده کرد تا فضای کمتری اشغال شود و رابط کاربری سادهتر باشد.
نکات کلیدی در استفاده از آیکون دستهها
برای آنکه استفاده از آیکونها باعث بهبود تجربه کاربری شود و نه برعکس، لازم است به این نکات توجه داشته باشید:
از آیکونهایی با معنی واضح و قابل درک استفاده کنید
اندازه آیکونها متناسب با طراحی سایت باشد
رنگ آیکون با طراحی کلی هماهنگ باشد
آیکونها با دستهها اشتباه گرفته نشوند
از تکرار بیشازحد یا استفاده از آیکون بیربط پرهیز کنید
بهبود سئو با استفاده از آیکونها
در حالی که آیکونها مستقیماً روی سئو تأثیر ندارند، اما:
با بهبود تجربه کاربر، نرخ پرش کاهش مییابد
زمان حضور کاربر در سایت افزایش پیدا میکند
نرخ کلیک روی دستهها بالا میرود
تمام این موارد بهصورت غیرمستقیم باعث بهبود رتبه در موتورهای جستوجو میشوند.
نتیجهگیری
افزودن آیکونهای شخصیسازیشده به دستهبندی محصولات در ووکامرس یک روش ساده اما بسیار مؤثر برای ارتقای ظاهر فروشگاه، افزایش تعامل کاربر و هدایت بهتر مشتریان است. با انتخاب صحیح روش افزودن آیکون و استفاده از طراحی منسجم، فروشگاه شما حرفهایتر به نظر خواهد رسید و در ذهن مشتری ماندگارتر خواهد شد.
شما میتوانید سوالات خود را از طریق ایمیل پشتیبانی – تماس با ما – یا در قسمت نظرات سوال خود را بپرسید.
موفق باشید
A.J
پست های مرتبط:
فروشگاه سورسا:
سورسا ، یک خانواده!
شما میتوانید از سورس های آماده به راحتی و با کپی پیست در پروژه خود استفاده بفرمایید
بله! سورسا به عنوان اولین و برترین مرجع سورس کد های آماده، تمامی سورس کد ها در زبان های مختلف را به صورت رایگان در اختیار شما قرار میدهد.
اگر سورس مد نظر شما تفاوتی با سورس فعلی دارد یا اینکه درخواست سورس دیگری را دارید میتوانید با کارشناسان سورسا در ارتباط باشید.
سورسا به عنوان مرجع سورس در تلاش است سورس کد ها و آموزش های تمامی زبان های برنامه نویسی مانند GO C++ Python C PHP SQL JS و… را تحت پوشش قرار داد


