آموزش افزونه اسلایدر محصولات ووکامرس بدون کدنویسی

اگه محصولات زیادی توی فروشگاهتون دارید، لازم نیست همه اون‌ها رو با یک فهرست بلند و شلوغ جلوی کاربر بذارید. با افزونه اسلایدر محصولات ووکامرس می‌تونید محصول‌های جدید، پرفروش، تخفیف‌دار یا مرتبط با هر صفحه رو توی یک بخش چرخشی و جمع‌وجور نمایش بدید. کاربر هم با فلش‌ها یا حرکت انگشت می‌تونه بین محصولات جابه‌جا بشه.

توی این آموزش با افزونه YITH WooCommerce Product Slider Carousel آشنا می‌شید، پیش‌نیازهای نصبش رو بررسی می‌کنید و قدم‌به‌قدم اولین اسلایدرتون رو می‌سازید. همین‌طور تفاوت نسخه رایگان و تجاری، روش نمایش اسلایدر با شورت‌کد، تنظیمات مناسب سایت فارسی و راه‌حل مشکلات رایج رو یاد می‌گیرید.

افزونه اسلایدر محصولات ووکامرس چه کاری انجام می‌ده؟

اسلایدر محصول بخشی از صفحه‌ست که چند کارت محصول رو کنار هم نشون می‌ده و بقیه محصولات با حرکت افقی دیده می‌شن. هر کارت معمولاً تصویر، عنوان، قیمت و گاهی دکمه خرید داره. به این مدل نمایش، کاروسل یا Carousel هم گفته می‌شه.

نمایش چند محصول در فضای کمتر

مهم‌ترین کاربرد اسلایدر اینه که بدون بلند کردن بیش‌ازحد صفحه، چند محصول رو توی یک قسمت نشون می‌ده. برای مثال می‌تونید چهار محصول رو جلوی چشم کاربر بذارید و محصولات بعدی رو با فلش جابه‌جایی در دسترس نگه دارید.

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

کاربرد اسلایدر در صفحه اصلی، فروشگاه و صفحه‌های فرود

در صفحه اصلی می‌تونید اسلایدر رو برای محصولات تازه یا پیشنهادهای منتخب بذارید. اگه هنوز صفحه اصلی مناسبی ندارید، راهنمای ساخت صفحه اصلی سفارشی در وردپرس کمکتون می‌کنه جای هر بخش رو بهتر مشخص کنید.

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

مزایا و محدودیت‌های اسلایدر محصول

• محصولات بیشتری رو توی فضای محدود نمایش می‌ده.
• برای معرفی یک گروه مشخص از محصولات، بخش مرتب و قابل‌کنترلی می‌سازه.
• روی موبایل، جابه‌جایی افقی بین محصولات رو ساده‌تر می‌کنه.
• اگه سرعت حرکت زیاد باشه، خوندن عنوان و قیمت سخت می‌شه.
• محصولات اسلایدهای بعدی معمولاً کمتر از محصولات اول دیده می‌شن.
• تصویرهای سنگین یا تعداد زیاد اسلایدر می‌تونه سرعت صفحه رو پایین بیاره.

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

فروشگاه‌هایی که بیشتر از اسلایدر محصول استفاده می‌کنن

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

آشنایی با افزونه YITH WooCommerce Product Slider Carousel

افزونه YITH WooCommerce Product Slider Carousel برای ساخت اسلایدر از محصولات ووکامرس طراحی شده. برای استفاده از اون لازم نیست JavaScript یا PHP بنویسید. تنظیمات افزونه مشخص می‌کنه چه محصولاتی، با چه ترتیبی و با چه مدل حرکتی نمایش داده بشن.

امکانات اصلی افزونه

• انتخاب تعداد محصولات قابل‌نمایش
• انتخاب دسته‌بندی یا گروه محصول
• مرتب کردن محصولات براساس گزینه‌هایی مثل عنوان، تاریخ یا قیمت
• انتخاب ترتیب صعودی یا نزولی
• پشتیبانی از چیدمان راست‌چین
• حرکت خودکار و توقف حرکت با قرار گرفتن نشانگر روی محصول
• نمایش فلش‌ها و نقطه‌های جابه‌جایی
• نمایش اسلایدر با شورت‌کد

شورت‌کد یک عبارت کوتاه داخل کروشه‌ست که وردپرس اون رو به خروجی افزونه تبدیل می‌کنه. یعنی شورت‌کد اسلایدر رو داخل برگه می‌ذارید و بازدیدکننده به‌جای اون عبارت، محصولات رو می‌بینه.

تفاوت کلی نسخه رایگان و تجاری

نسخه رایگان برای ساخت یک اسلایدر ساده و نمایش اون در بخش‌های مختلف سایت مناسبه. نسخه تجاری امکانات بیشتری مثل ساخت اسلایدرهای متعدد، فیلترهای بیشتر برای انتخاب محصولات، تنظیم جداگانه نمایش در اندازه‌های مختلف و کنترل بیشتر روی ظاهر کارت محصول در اختیارتون می‌ذاره.

بعضی گزینه‌هایی که در سایت رسمی YITH WooCommerce Product Slider Carousel می‌بینید فقط توی نسخه تجاری هستن. پس اگه گزینه‌ای توی پنل شما دیده نمی‌شه، اول نسخه افزونه و فهرست امکانات همون نسخه رو بررسی کنید.

انتخاب نسخه مناسب برای فروشگاهتون

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

پیش‌نیازهای نصب افزونه اسلایدر محصولات ووکامرس

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

بررسی نسخه موردنیاز وردپرس، ووکامرس و PHP

طبق اطلاعات نسخه فعلی در مخزن وردپرس، نسخه رایگان افزونه به وردپرس 6.9 یا بالاتر و PHP 7.4 یا بالاتر نیاز داره و با ووکامرس 11.2 آزمایش شده. چون این عددها با انتشار نسخه‌های تازه تغییر می‌کنن، قبل از نصب بخش اطلاعات افزونه در مخزن وردپرس رو دوباره ببینید.

نسخه وردپرس رو از مسیر «پیشخوان ← به‌روزرسانی‌ها» می‌بینید. برای پیدا کردن نسخه PHP هم می‌تونید به «ابزارها ← سلامت سایت ← اطلاعات ← سرور» برید. نسخه ووکامرس هم در صفحه افزونه‌های نصب‌شده دیده می‌شه.

گرفتن نسخه پشتیبان از سایت

قبل از نصب یا به‌روزرسانی افزونه، از فایل‌ها و پایگاه داده سایت نسخه پشتیبان بگیرید. اگه بعد از فعال‌سازی با خطا یا تداخل روبه‌رو شدید، نسخه پشتیبان راه برگشت مطمئن‌تری بهتون می‌ده. فقط ذخیره کردن فایل افزونه کافی نیست؛ اطلاعات محصولات و تنظیمات فروشگاه داخل پایگاه داده هم نگهداری می‌شن.

بررسی سازگاری افزونه با قالب فروشگاه

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

اگه قالب یا صفحه‌ساز شما ابزار داخلی برای اسلایدر محصول داره، قبل از نصب افزونه تازه همون ابزار رو بررسی کنید. نصب دو ابزار با کار مشابه می‌تونه فایل‌های بیشتری به صفحه اضافه کنه یا ظاهر بخش‌ها رو ناهماهنگ کنه.

آماده کردن محصولات و تصویرهای اون‌ها

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

نصب و فعال‌سازی افزونه اسلایدر محصولات ووکامرس

1. وارد پیشخوان وردپرس بشید و از منوی «افزونه‌ها» روی «افزودن افزونه تازه» بزنید.
2. داخل کادر جست‌وجو عبارت YITH WooCommerce Product Slider Carousel رو وارد کنید.
3. نام توسعه‌دهنده و صفحه افزونه رو بررسی کنید تا افزونه درست رو نصب کنید.
4. روی «هم‌اکنون نصب نمایید» بزنید و بعد از پایان نصب، دکمه «فعال نمایید» رو انتخاب کنید.
5. بعد از فعال‌سازی، منوی مربوط به YITH یا Product Slider Carousel رو در پیشخوان پیدا کنید.

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

نام و جای منوی تنظیمات می‌تونه بین نسخه رایگان و تجاری یا نسخه‌های مختلف افزونه کمی فرق کنه. معمولاً با جست‌وجوی عبارت YITH در منوی کناری پیشخوان می‌تونید صفحه مربوط رو پیدا کنید.

ساخت اولین اسلایدر محصولات

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

انتخاب عنوان اسلایدر

داخل فیلد Title یک عنوان کوتاه بنویسید؛ مثلاً «جدیدترین محصولات»، «پرفروش‌های این هفته» یا «لوازم پیشنهادی سفر». اگه گزینه Show Title در نسخه شما دیده می‌شه، با فعال کردن اون عنوان بالای اسلایدر نمایش داده می‌شه.

عنوان باید به کاربر بگه چرا این محصولات کنار هم قرار گرفتن. عبارتی مثل «محصولات ما» خیلی کلیه، ولی «کفش‌های مناسب پیاده‌روی» دقیق‌تره و سریع‌تر مفهوم بخش رو منتقل می‌کنه.

انتخاب محصولات یا دسته‌بندی محصول

از بخش انتخاب محتوا، دسته‌بندی محصول موردنظرتون رو مشخص کنید. مثلاً اگه اسلایدر برای صفحه لوازم جانبی موبایله، فقط دسته مرتبط با همون محصولات رو انتخاب کنید. انتخاب همه محصولات معمولاً خروجی نامرتبط و شلوغی می‌سازه.

در نسخه تجاری ممکنه فیلترهایی برای محصول‌های تخفیف‌دار، پرفروش، ویژه یا تازه اضافه‌شده ببینید. فیلتر دقیق‌تر باعث می‌شه محتوای اسلایدر با هدف صفحه هماهنگ‌تر باشه.

تنظیم تعداد محصولات قابل‌نمایش

گزینه Product to Show تعداد کل محصولاتی رو مشخص می‌کنه که افزونه داخل اسلایدر بارگذاری می‌کنه. این عدد با تعداد محصول قابل‌مشاهده در هر ردیف فرق داره. برای شروع، تعداد محدودی محصول انتخاب کنید تا اسلایدر هم متمرکز بمونه و هم فایل و تصویر اضافه بارگذاری نکنه.

مرتب کردن محصولات براساس عنوان، تاریخ یا قیمت

گزینه Order By معیار مرتب‌سازی رو مشخص می‌کنه. برای نمایش تازه‌ترین محصولات، تاریخ رو انتخاب کنید. اگه ترتیب الفبایی می‌خواید، عنوان مناسبه. مرتب‌سازی براساس قیمت هم برای ساخت بخش‌هایی مثل محصولات اقتصادی یا محصولات گران‌تر کاربرد داره.

انتخاب ترتیب صعودی یا نزولی

گزینه Order Type جهت مرتب‌سازی رو تعیین می‌کنه. حالت صعودی یا ASC از مقدار کمتر به بیشتر می‌ره و حالت نزولی یا DESC از مقدار بیشتر به کمتر. مثلاً برای نمایش جدیدترین محصولات براساس تاریخ، معمولاً ترتیب نزولی انتخاب درستیه.

تنظیم ظاهر و حرکت اسلایدر

بعد از انتخاب محصولات، رفتار اسلایدر رو تنظیم کنید. هدف اینه که حرکت محصولات قابل‌کنترل باشه و کاربر برای دیدن عنوان، قیمت یا دکمه خرید عجله نکنه.

راست‌چین کردن اسلایدر برای سایت فارسی

گزینه Enable RTL Support یا گزینه‌ای با مفهوم مشابه رو فعال کنید. RTL یعنی جهت نمایش از راست به چپ؛ همون جهتی که متن فارسی با اون خونده می‌شه. بعد از ذخیره تنظیمات، جهت فلش‌ها و ترتیب حرکت محصولات رو هم در نسخه نهایی صفحه بررسی کنید.

فعال کردن حرکت خودکار

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

تنظیم سرعت حرکت و انیمیشن

Pagination Speed یا Animation Speed معمولاً مدت‌زمان جابه‌جایی بین دو حالت رو کنترل می‌کنه. فاصله بین حرکت‌های خودکار هم ممکنه با تنظیم جداگانه‌ای مشخص بشه. این دو مورد رو با هم اشتباه نگیرید: یکی سرعت خود انیمیشنه و دیگری مدت توقف قبل از حرکت بعدی.

اسلایدر رو خیلی سریع تنظیم نکنید. کاربر باید فرصت داشته باشه تصویر، عنوان و قیمت محصول رو ببینه و روی گزینه موردنظرش بزند. بعد از هر تغییر، نتیجه واقعی رو داخل صفحه بررسی کنید.

توقف حرکت با رفتن نشانگر روی محصول

گزینه Stop on Hover حرکت خودکار رو وقتی نشانگر ماوس روی اسلایدره متوقف می‌کنه. این تنظیم برای کاربر دسکتاپ مفیده، چون می‌تونه بدون جابه‌جا شدن کارت، عنوان یا قیمت رو بخونه و روی محصول کلیک کنه.

فعال کردن حرکت حلقه‌ای

Loop Slider باعث می‌شه بعد از آخرین محصول، حرکت دوباره از ابتدای فهرست ادامه پیدا کنه. اگه محصولات کمی دارید، این گزینه حرکت اسلایدر رو پیوسته نگه می‌داره. بااین‌حال تکرار سریع چند محصول می‌تونه آزاردهنده باشه؛ پس نتیجه رو از دید کاربر ببینید.

نمایش فلش‌ها و نقطه‌های جابه‌جایی

Show Navigation فلش قبلی و بعدی رو نمایش می‌ده. Show Dots Navigation هم نقطه‌هایی می‌سازه که تعداد بخش‌های اسلایدر و جای فعلی کاربر رو نشون می‌دن. بهتره دست‌کم یک روش واضح برای جابه‌جایی دستی فعال باشه.

تنظیم تعداد محصولات در هر ردیف

گزینه Images per Row یا گزینه مشابه اون تعداد کارت‌های هم‌زمان رو مشخص می‌کنه. روی دسکتاپ معمولاً چند کارت کنار هم جا می‌شن، ولی موبایل فضای خیلی کمتری داره. اگه نسخه افزونه تنظیم واکنش‌گرا داره، تعداد کارت‌ها رو برای دسکتاپ، تبلت و موبایل جداگانه انتخاب کنید.

واکنش‌گرا یعنی چیدمان با اندازه صفحه هماهنگ می‌شه. برای نمونه، چهار کارت روی دسکتاپ می‌تونه روی موبایل به یک یا دو کارت تبدیل بشه. این تنظیم جلوی ریز شدن نوشته‌ها و فشرده شدن دکمه‌ها رو می‌گیره.

نمایش اسلایدر در برگه‌های وردپرس

بعد از ذخیره تنظیمات، باید خروجی اسلایدر رو داخل برگه موردنظرتون قرار بدید. روش قابل‌اتکای نسخه رایگان استفاده از شورت‌کده. اگه نسخه شما بلوک اختصاصی هم داره، می‌تونید همون بلوک رو آزمایش کنید؛ ولی نام و دسترسی به بلوک ممکنه بین نسخه‌ها فرق کنه.

کپی کردن شورت‌کد اسلایدر

داخل صفحه تنظیمات دنبال بخشی مثل Use This Shortcode in Your Pages بگردید. عبارت داخل کروشه رو کامل کپی کنید. هیچ کاراکتر، فاصله یا شناسه‌ای رو تغییر ندید، چون همین اطلاعات به افزونه می‌گه کدوم اسلایدر باید نمایش داده بشه.

قرار دادن شورت‌کد در ویرایشگر بلوکی

1. از منوی «برگه‌ها» صفحه موردنظرتون رو باز کنید.
2. روی دکمه افزودن بلوک با علامت + بزنید.
3. عبارت «شورت‌کد» رو جست‌وجو کنید.
4. بلوک شورت‌کد رو به جای مناسب صفحه اضافه کنید.
5. کدی که از افزونه کپی کردید داخل بلوک بذارید.
6. برگه رو ذخیره یا به‌روزرسانی کنید.

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

نمایش اسلایدر در صفحه‌ساز یا ابزارک

در صفحه‌سازهایی مثل المنتور می‌تونید ابزارک Shortcode رو به صفحه اضافه کنید و کد اسلایدر رو داخل اون بذارید. برای نمایش در ناحیه ابزارک هم از بلوک یا ابزارک شورت‌کد کمک بگیرید.

شورت‌کد رو داخل ابزارک HTML نذارید، مگر اینکه صفحه‌ساز شما صریحاً اجرای شورت‌کد در اون بخش رو پشتیبانی کنه. ابزارک اختصاصی شورت‌کد انتخاب مطمئن‌تریه.

بررسی نتیجه در نسخه نهایی برگه

نمایش داخل ویرایشگر همیشه با خروجی نهایی یکسان نیست. برگه منتشرشده رو در یک زبانه تازه باز کنید و فلش‌ها، حرکت لمسی، لینک محصول، قیمت و دکمه خرید رو امتحان کنید. همین صفحه رو روی موبایل واقعی هم ببینید.

تفاوت نسخه رایگان و تجاری افزونه

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

امکاناتی که نسخه رایگان در اختیارتون می‌ذاره

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

ساخت اسلایدرهای بیشتر و فیلتر محصولات در نسخه تجاری

نسخه تجاری برای فروشگاهی مناسبه که چند اسلایدر با هدف‌های متفاوت می‌خواد. مثلاً یک اسلایدر برای محصولات تخفیف‌دار، یکی برای پرفروش‌ها و یکی برای تازه‌ترین محصولات. فیلترهای بیشتر کمک می‌کنن بدون انتخاب دستی تک‌تک محصولات، گروه مناسب رو نمایش بدید.

تنظیم جداگانه نمایش در موبایل، تبلت و دسکتاپ

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

قالب‌های ظاهری و کنترل نمایش قیمت و دکمه خرید

نسخه تجاری قالب‌های ظاهری و کنترل بیشتری برای اجزای کارت محصول داره. بسته به امکانات نسخه فعلی، می‌تونید نمایش قیمت یا دکمه افزودن به سبد خرید رو مدیریت کنید و طرح اسلایدر رو به ظاهر فروشگاه نزدیک‌تر کنید.

زمانی که نسخه رایگان نیازتون رو برطرف می‌کنه

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

زمانی که نسخه تجاری انتخاب مناسب‌تریه

اگه چند کمپین هم‌زمان دارید، می‌خواید محصولات رو با شرط‌های دقیق جدا کنید یا نمایش موبایل و دسکتاپ براتون خیلی مهمه، نسخه تجاری کاربرد بیشتری داره. فقط برای دسترسی به یک رنگ یا تغییر کوچک سراغ خرید نرید؛ شاید همون تغییر با تنظیمات قالب حل بشه.

بهینه کردن اسلایدر برای موبایل و سرعت سایت

اسلایدر خوب فقط ظاهر جذاب نداره؛ باید سریع بارگذاری بشه و روی صفحه کوچک هم کاربر بتونه راحت با اون کار کنه. بیشتر مشکلات این بخش از تعداد زیاد محصول، تصویرهای سنگین و تنظیم نامناسب حرکت میان.

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

روی موبایل با یک کارت شروع کنید. اگه طراحی کارت جمع‌وجوره و عنوان‌ها کوتاه هستن، دو کارت رو هم آزمایش کنید. نمایش سه یا چهار کارت توی عرض کم معمولاً نوشته و دکمه‌ها رو بیش‌ازحد کوچک می‌کنه.

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

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

بارگذاری تنبل یا Lazy Loading باعث می‌شه بعضی تصویرها وقتی به محدوده دید کاربر نزدیک می‌شن بارگذاری بشن. برای آشنایی بیشتر می‌تونید مقاله Native Lazy Loading در وردپرس رو بخونید.

جلوگیری از حرکت خیلی سریع و شلوغ شدن اسلایدر

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

بررسی خوانایی عنوان، قیمت و دکمه خرید

رنگ متن باید با پس‌زمینه تفاوت کافی داشته باشه. قیمت، تخفیف و دکمه خرید نباید روی هم بیفتن یا از کادر بیرون بزنن. عنوان خیلی بلند رو کوتاه کنید یا تنظیمات قالب رو طوری تغییر بدید که ارتفاع کارت‌ها یکدست بمونه.

آزمایش سرعت صفحه قبل و بعد از فعال کردن اسلایدر

قبل از افزودن اسلایدر، سرعت صفحه رو اندازه بگیرید و نتیجه رو نگه دارید. بعد از فعال‌سازی همون صفحه رو دوباره آزمایش کنید. اگه زمان بارگذاری یا حجم صفحه خیلی بیشتر شد، تعداد محصولات و حجم تصویرها رو کم کنید و مطمئن بشید دو افزونه اسلایدر هم‌زمان فایل‌های مشابه بارگذاری نمی‌کنن.

رفع مشکلات رایج افزونه اسلایدر محصولات ووکامرس

اسلایدر در برگه نمایش داده نمی‌شه

اول مطمئن بشید افزونه و ووکامرس هر دو فعال هستن. بعد شورت‌کد رو دوباره از صفحه تنظیمات کپی کنید و داخل بلوک شورت‌کد بذارید. برگه رو به‌روزرسانی کنید و کش سایت و مرورگر رو پاک کنید. اگه باز هم خروجی خالیه، اسلایدر رو داخل یک برگه ساده و بدون صفحه‌ساز آزمایش کنید.

محصولات انتخاب‌شده داخل اسلایدر دیده نمی‌شن

وضعیت انتشار محصول، دسته‌بندی، موجودی و تنظیمات نمایش کاتالوگ رو بررسی کنید. محصول پیش‌نویس یا خصوصی برای بازدیدکننده عادی دیده نمی‌شه. اگه فیلتر تخفیف یا ویژه فعال کردید، محصول باید واقعاً همون شرط رو داشته باشه.

اسلایدر در سایت فارسی چپ‌چین نمایش داده می‌شه

گزینه پشتیبانی RTL رو فعال و تنظیمات رو ذخیره کنید. بعد کش سایت رو پاک کنید. اگه جهت هنوز اشتباهه، قالب یا کدهای سفارشی احتمالاً استایل افزونه رو بازنویسی می‌کنن. برای پیدا کردن تداخل، خروجی رو موقتاً با یکی از قالب‌های استاندارد وردپرس روی نسخه آزمایشی سایت بررسی کنید.

حرکت خودکار یا دکمه‌های جابه‌جایی کار نمی‌کنن

تنظیم AutoPlay و Show Navigation رو بررسی کنید. بعد کنسول مرورگر رو برای خطاهای JavaScript ببینید. افزونه‌های بهینه‌سازی گاهی با ترکیب، تأخیر یا جابه‌جایی فایل‌های JavaScript عملکرد اسلایدر رو مختل می‌کنن. این قابلیت‌ها رو فقط روی نسخه آزمایشی یکی‌یکی خاموش کنید تا عامل تداخل مشخص بشه.

ظاهر اسلایدر با قالب سایت هماهنگ نیست

اول تنظیمات رنگ، فونت و کارت محصول در خود قالب رو بررسی کنید. اگه نسخه افزونه قالب ظاهری متفاوتی داره، گزینه نزدیک‌تر به طراحی سایتتون رو انتخاب کنید. برای تغییرهای جزئی هم می‌تونید از CSS سفارشی کمک بگیرید، ولی قبل از اضافه کردن کد مطمئن بشید تنظیم آماده‌ای برای همون کار ندارید.

اسلایدر در موبایل به‌هم‌ریخته دیده می‌شه

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

اسلایدر سرعت صفحه رو کم می‌کنه

تعداد محصولات رو کم کنید، تصویرها رو بهینه کنید و اسلایدرهای تکراری رو از صفحه بردارید. افزونه و قالب رو هم به‌روز نگه دارید. اگه از افزونه کش استفاده می‌کنید، بعد از هر تغییر کش رو پاک کنید و صفحه رو دوباره بسنجید.

برای آزمایش تداخل، افزونه‌ها رو روی سایت اصلی خاموش نکنید. یک نسخه آزمایشی بسازید و افزونه‌های غیرضروری رو اونجا یکی‌یکی غیرفعال کنید. با این روش فروشگاه فعال شما از دسترس مشتری‌ها خارج نمی‌شه.

نکته‌های مهم برای ساخت اسلایدر محصول بهتر

• محصول مرتبط نشون بدید: محصول‌های هر اسلایدر باید با موضوع و هدف همون صفحه هماهنگ باشن.
• تعداد محصولات رو محدود کنید: فهرست خیلی بلند تمرکز کاربر رو کم می‌کنه و تصویرهای بیشتری بارگذاری می‌شن.
• عنوان روشن بنویسید: عبارتی مثل «جدیدترین کفش‌های ورزشی» از «محصولات ویژه» اطلاعات بیشتری می‌ده.
• محصولات مهم رو اول بذارید: همه کاربرها روی فلش بعدی نمی‌زنن، پس اولویت‌ها باید در نمای اولیه دیده بشن.
• سرعت حرکت رو منطقی نگه دارید: کاربر باید برای خوندن عنوان و قیمت وقت کافی داشته باشه.
• جابه‌جایی دستی رو حفظ کنید: حتی با AutoPlay، فلش یا کنترل لمسی باید فعال و قابل‌استفاده بمونه.
• موبایل و دسکتاپ رو جدا ببینید: خروجی مناسب دسکتاپ لزوماً روی موبایل خوانا نیست.
• لینک و دکمه خرید رو آزمایش کنید: هر کارت باید کاربر رو به محصول درست ببره.

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

جمع‌بندی

افزونه اسلایدر محصولات ووکامرس بهتون کمک می‌کنه چند محصول مرتبط رو توی فضای کم و با امکان جابه‌جایی نمایش بدید. نسخه رایگان YITH WooCommerce Product Slider Carousel برای یک اسلایدر ساده، تنظیم جهت راست‌چین، حرکت خودکار و درج خروجی با شورت‌کد مناسبه. نسخه تجاری هم برای چند اسلایدر، فیلترهای بیشتر و کنترل دقیق‌تر ظاهر و نمایش واکنش‌گرا کاربرد داره.

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

سؤال‌های متداول

تیم تولید محتوا

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