ساخت اسلایدر محصولات ووکامرس با Product Slider for Woo
در سایت‌های فروشگاهی یکی از اصلی‌ترین دغدغه‌هایی که وجود دارد این است که چطور می‌توان محصولات را به شکل‌های مختلفی نمایش داد تا کاربران بیشتر از مشاهده این محصولات لذت ببرند، یکی از روش‌هایی که می‌توانید محصولات را در سایت به نمایش بگذارید و بسیار هم تاثیر گذار باشد، استفاده از اسلایدر است که این مورد می‌تواند تاثیر زیادی بر روی روحیه کاربر بگذارد و باید به این مورد توجه زیادی داشته باشید، ما در مقاله بهترین افزونه‌های اسلایدر محصولات ووکامرس به معرفی بهترین افزونه‌های ساخت اسلایدر محصولات پرداختیم اما در این مقاله از سری مقالات آموزش وردپرس قصد داریم یکی از این افزونه‌ها را با نام Product Slider for WooCommerce آموزش دهیم تا بتوانید با استفاده از این افزونه اسلایدر محصولات خود را به بهترین شکل ممکن بسازید.
اما به نظر شما چرا افزونه Product Slider for WooCommerce را انتخاب کردیم؟ دلیل انتخاب این افزونه تست و بررسی زیاد این افزونه بود که توانست بسیار موفق باشد، چرا که ما سعی داشتیم به روش‌های مختلف با استفاده از این افزونه اسلایدر محصولات ایجاد کنیم و همه روش‌هایی که تست کردیم موفق بودند و اسلایدر جذابی برای محصولات به وجود آمد.
اما فقط این دلیل استفاده از این افزونه هم نیست و ما با توجه به تعداد نصب‌های افزونه تصمیم گرفتیم که این افزونه محبوب را برای آموزش انتخاب کنیم چرا که توانسته است تا 20 هزار نصب فعال را از طریق مخزن وردپرس دریافت کند و یکی از بهترین افزونه‌های رایگان در این زمینه است.
راهنمای مطالعه:
ساخت اسلایدر محصولات ووکامرس با Product Slider for WooCommerce
افزونه Product Slider for WooCommerce در حال حاضر یکی از بهترین افزونه‌هایی است که می‌توانید با استفاده از آن به صورت حرفه‌ای اسلایدر برای محصولات ووکامرسی خود ایجاد کنید، این افزونه قابلیت‌های زیادی را در این زمینه ارائه می‌دهد تا بتوانید هر گونه اسلایدری که می‌خواهید برای محصولات داشته باشید را اجرا کنید. هم اکنون این افزونه به صورت رایگان عرضه شده است و می‌توانید با استفاده مخزن وردپرس آن‌را دانلود و نصب کنید که همین مورد بسیار می‌تواند مزیت بزرگی باشد که برای این مورد در سایت هزینه‌ای پرداخت نکنید.
یکی از مزیت‌های اصلی این افزونه هم ریسپانسیو بودن اسلایدرهای آن است که همین مزیت باعث می‌شود بسیار راحت‌تر اسلایدرها را اجرا کنید و کاربران با هر دستگاهی که به سایت مراجعه کنند اطلاعات و المان‌های سایت را به درستی مشاهده می‌کنند. در همین اول کار باید این افزونه را در مخزن وردپرس جستجو کنید و بعد آن را در سایت نصب کنید تا به سراغ آموزش افزونه برویم و اسلایدرهای مورد نظر خودمان‌را برای محصولات ایجاد کنیم. اگر در نصب افزونه در وردپرس مشکل دارید به آموزش نصب افزونه وردپرس مراجعه کنید.
توجه: برای نصب و استفاده از امکانات این افزونه باید ووکامرس در سایت شما نصب باشد و سایت فروشگاهی خود را با استفاده از ووکامرس ایجاد کرده باشید تا بتوانید برای محصولات خود یک سری اسلایدر داشته باشید و در غیر این صورت افزونه برای شما کاربردی نخواهد داشت.
بعد از نصب افزونه یک بخشی در پیشخوان وردپرس ایجاد خواهد شد که مانند تصویر پایین است و می‌توانید با استفاده از این بخش تمامی قسمت‌های افزونه را در دسترس داشته باشید و در صورت نیاز تنظیمات آن‌را انجام دهید و یا اسلایدرهای جدید را ایجاد کنید.
بخش add new در افزونه Product Slider for WooCommerce
با اولین بخشی که در این افزونه کار داریم همین اول کار، بخش اضافه کردن اسلایدر است که همین اول آموزش با بخش‌های مختلف این اضافه کردن اسلایدر آشنا باشید و بتوانید به خوبی آن‌را انجام دهید تا دیگر در این بخش با مشکل مواجه نباشید.
همان‌طور که در تصویر بالا مشاهده می‌کنید بخش‌های مختلفی را برای اضافه کردن یک اسلایدر جدید در دسترس دارید و می‌توانید با استفاده از آن بهتر اسلایدر خود را ایجاد کنید. در کادر اول صفحه باید یک عنوان برای اسلایدر خود انتخاب کنید که صرفاً برای دسته‌بندی بهتر اسلایدرها در بخش مدیریتی سایت است و به کاربر نمایش داده نمی‌شود، پس با این وجود می‌توانید به صورت دلخواه این نام را انتخاب کنید.
در قسمت دوم این صفحه شورت کدهای مربوط به همین اسلایدی که در حال ساختن آن هستید به شما نمایش داده می‌شود که می‌توانید با استفاده از این شورت کدها هرجای سایت خود اسلایدر را قرار دهید و همین مزیت سادگی استفاده از اسلایدر را فراهم می کند. بعد از انجام دادن این موراد باید به بخش اصلی تنظیمات و ساخت اسلایدر بروید که بسیار مهم است و باید به این بخش آموزش دقت داشته باشید تا خیلی عالی اسلایدرهای مورد نظر خود را ایجاد کنید و در این زمینه مشکلی نداشته باشید.
آموزش تب GENERAL SETTINGS در افزونه Product Slider for WooCommerce
از این بخش تب به تب آموزش را پیش می‌بریم چرا که در بخش اضافه کردن اسلایدر 5 تب به صورت کلی وجود دارد که می‌توانید با استفاده از آن‌ها ایجاد اسلایدر محصولات را به خوبی انجام دهید، اولین تب هم در این بخش GENERAL SETTINGS است که اگر کمی صفحه را به پایین اسکرول کنید می‌توانید این موارد را مشاهده کنید. تب GENERAL SETTINGS برای تنظیمات پایه و کلی اسلایدر است و مهم است که باید با دقت انجام شود.
همان‌طور که در تصویر بالا مشاهده می‌کنید بخش‌های زیادی در این تب وجود دارد که ممکن است برای شما کمی این تنظیمات پیچیده باشد اما اصلاً این‌طور نیست و اگر با دقت به آموزش توجه داشته باشید به این موارد کاملاً مسط خواهید شد.
- Slider Type: این گزینه برای انتخاب کردن نوع اسلایدر است که می‌توانید دسته بندی‌ها را در اسلایدر قرار دهید و هم می‌توانید از محصولات برای دسته بندی‌ها استفاده کنید که بخش دسته بندی در نسخه pro افزونه در دسترس است و در نسخه رایگان این محدودیت وجود دارد که از آن استفاده نکنید.
- Layout Preset: در این گزینه از شما می‌خواهد که تعیین کنید نوع نمایش محصولات به چه شکل باشد، برای مثال می‌توانید هم بر روی اسلایدی قرار دهید و هم بر روی grid قرار دهید که همان نمایش محصولات شبکه‌ای است، البته نوع نمایش شبکه‌ای هم در این افزونه محدود است و باید نسخه پرو را خریداری کنید.
- Select Your Theme: این گزینه امکان تغییر تم در اسلایدها را ارائه خواهد داد که به صورت پیش‌فرض 4 قالب در افزونه قرار دارد که می‌توانید از آن‌ها استفاده کنید، قالب‌هایی که قرار گرفته‌اند زیبا است و می‌توانید طبق نیاز و استایل خود از آن استفاده کنید.
- Filter Products: با استفاده از این بخش می‌توانید نمایش محصولات از طریق اسلایدر را فیلتر بندی کنید که بر چه اساسی این محصولات نمایش داده شوند، این مورد بسیار مهم است و باید با دقت بسیار زیاد آن‌را انجام دهید تا بتوانید با استفاده از آن فروش سایت خود را افزایش دهید.
اگر کمی صفحه را به پایین بکشید گزینه‌های بیشتری مانند تصویر بالا نمایش داده خواهند شد که امکانات بیشتری را ارائه می‌دهند.
- Hide Out of Stock Products: اگر قصد دارید محصولاتی که موجود نیستند در اسلایدر مخفی شوند می‌توانید از این گزینه استفاده کنید.
- Column(s): با استفاده از این گزینه می‌توانید اندازه‌های مورد نظر را به اسلایدر و یا طرح بندی شبکه‌ای داشته باشید که این موضوع باعث می‌شود یک اسلایدر ریسپانسیو داشته باشید و از این نظر مشکلی وجود نداشته باشد.
- Limit: این گزینه اجازه محدودیت نمایش محصولات را ارائه می‌دهد که می‌توانید داشته باشید و بسیار عالی است چرا که اگر این محدودیت وجود نداشته باشد محصولات به صورت بی‌نهایت در اسلایدر نمایش داده خواهند شد.
- Order by: با استفاده از این گزینه می‌توانید ترتیب نمایش اسلایدها را تعیین کنید که خیلی عالی است و باعث می‌شود طبق یک سری موارد خاص که خودتان تعیین می‌کنید محصولات به کاربران نمایش داده شوند.
- Preloader: این قابلیت تقریباً شبیه به lazy load است که می‌تواند بر روی سرعت سایت تاثیر مثبت بگذارد و بهتر است آن‌را فعال کنید.
آموزش تب SLIDER CONTROLS در افزونه Product Slider for WooCommerce
دومی تب این بخش تب اسلایدر کنترل است که می‌توانید با استفاده از این بخش تنظیمات پیشرفته‌تری داشته باشید، همان‌طور که در نام این تب معلوم است می‌توانید با استفاده کنترل اسلایدر را به دست بگیرید و همین موضوع بسیار می‌تواند کمک کند به شما پس با دقت این بخش را مشاهده کنید.
همان‌طور که در تصویر بالا مشاهده می‌کنید یک سری گزینه‌های بیشتری در این تب وجود دارد که تنظیمات را بسیار سخت‌تر و پیشرفته‌تر می‌کند.
- Slider Mode: از طریق این گزینه می‌توانید تعیین کنید که نوع نمایش اسلایدر به صورت استاندارد باشد و یا روش دیگری داشته باشد که اصولاً ساده باشد بسیار می‌تواند بهتر باشد.
- AutoPlay: اگر قصد دارید اسلایدر به صورت خودکار پخش شود می‌توانید این گزینه را فعال کنید و در غیر این صورت اگر می‌خواهید کاربر خودش با استفاده از گزینه‌های موجود اسلایدها را تغییر دهد می‌توانید آن‌را غیرفعال کنید.
- AutoPlay Speed: اگر گزینه قبلی را فعال کرده باشید می‌توانید از این گزینه هم تعیین کنید که اسلایدها با چه سرعتی تغییر کنند.
- Pause on Hover: اگر قصد دارید که وقتی موس بر روی اسلایدر رفت اسلایدر تکان نخورد، می‌توانید از این گزینه استفاده کنید.
- Slider Speed: با استفاده از این گزینه می‌توانید سرعت کلی پخش اسلایدر را تعیین کنید.
- Infinite Loop: اگر قصد دارید اسلایدر تمام نشوند و نامحدود محصولات را در بر بگیرد و به کاربران نمایش داده شود، می‌توانید این گزینه را فعال کنید.
اگر کمی صفحه را به پایین اسکرول کنید گزینه‌های بیشتری هم مشاهده خواهید کرد که می‌توانید به تنظیمات آن‌ها بپردازید و اسلایدر خود را پیشرفته‌تر کنید.
- Slider Direction: این گزینه می‌تواند تعیین کند که اسلایدر به چه جهتی عوض شود، این مورد می‌تواند به سمت راست و سمت چپ باشد.
- Row: با این گزینه می‌توانید تنظیمات مربوط به ردیف‌های اسلایدر را انجام دهید.
- Navigation: با استفاده از این گزینه می‌توانید تعیین کنید که جهت‌یابی و یا همان آیکون‌های بعدی و قبلی اسلایدر به چه صورت و با چه رنگی باشد، اگر آن‌را فعال کنید در بخش color هم می‌توانید رنگ‌های آن‌را به صورت کامل تعیین کنید.
- Pagination: با استفاده از این گزینه می‌توانید تنظیماتی مربوط به صفحه بندی‌ها داشته باشید که مانند گزینه قبلی می‌توانید در بخش بعدی رنگ آن‌را انتخاب کنید.
- Mouse Draggable: اگر قصد دارید کاربر با موس هم بتواند اسلایدر را تغییر دهد این گزینه را فعال کنید.
ساخت اسلایدر محصولات ووکامرس – آموزش تب DISPLAY OPTIONS
تب بعدی که داریم مربوط به تنظیمات و قابلیت‌های نمایشی اسلایدر است که می‌توانید داشته باشید و بسیار هم مهم هستند که اگر درست تنظیم شود کاربر می‌تواند خیلی بهتر محصولات را مشاهده کند.
طبق تصویر بالا در این بخش هم یک سری گزینه‌های زیادی دارید که با این گزینه‌ها بسیار عالی می‌توانید تنظیمات مربوط به نمایش اسلایدر را داشته باشید.
- Slider Section Title: اگر این گزینه را فعال کنید عنوان اسلایدی که انتخاب کردید در بخش بالای اسلایدر نمایش داده می‌شود که ترجیها این مورد نمی‌تواند مناسب باشد و بهتر است که به صورت پیش‌فرض آن‌را غیرفعال بگذارید.
- Name: اگر قصد دارید نام محصولات نمایش داده شود این گزینه را فعال کنید که به صورت پیش‌فرض فعال است و نباید به آن دست بزنید.
- Limit Word: این گزینه می‌تواند کمک کند که یک محدودیتی برای تعهداد کلمات عنوان داشته باشید که خیلی می‌تواند خوب باشد چرا که برخی از محصولات عنوان زیادی دارند و اگر تمام این عنوان نمایش داده شود اسلایدر از نظر طراحی با مشکل مواجه می‌شود و کاربر هم خیلی این موارد را دوست ندارد، البته این قابلیت در نسخه پرو در دسترس است.
- Product Description: گزینه‌های مربوط به این بخش کاملاً در نسخه پرو فعال هستند و با نسخه رایگان نمی‌توانید به آن‌ها دسترسی داشته باشید و به همین دلیل این بخش را خیلی توضیح نمی‌دهیم اما در کل کاربرد آن برای اضافه کردن توضیحات کوتاه به زیر محصولات در اسلاید است.
اگر کمی صفحه را به پایین اسکرول کنید مانند تصویر بالا به یک سری گزینه‌های دیگر هم بر می‌خورید که می‌توانید تنظیمات این مورد را بسیار بهتر انجام دهید، توجه داشته باشید که این تنظیمات هم بسیار مهم هستند چرا که می‌توانند بر روی فروش شما تاثیرگذار باشند.
- Price: اگر قصد دارید قیمت برای کاربرد در اسلایدر محصول نمایش داده شود می‌توانید این بخش را فعال کنید، ترجیحاً فعال نباشد بهتر است چرا که ممکن است با خواندن عنوان کاربر یک قیمت خاصی را در نظر داشته باشد و وقتی با قیمتی که شما ارائه داده‌اید مواجه می‌شود خریدی نکند.
- Discount Color: با استفاده از این گزینه هم می‌توانید رنگ قیمت گذاری که انجام شده است را تعیین کنید که باز هم این مورد می‌تواند کاربردی باشد و طبق استایل سایت آن‌را تعیین کنید.
- Rating: با استفاده از این گزینه می‌توانید تعیین کنید که رتبه محصول شما نمایش داده شود یا خیر، این مورد هم بهتر است نمایش دهید تا کاربر از خوب بودن محصول شما اطمینان حاصل کند.
- Color: با استفاده از این کادر می‌توانید رنگ رتبه بندی را تعیین کنید که اغلب این رتبه بندی‌ها چون ستاره‌ای هستند با رنگ زرد می‌باشند که به صورت پیش‌فرض هم رنگ زرد در این رتبه بندی استفاده شده است.
- Add to Cart Button: با استفاده از این گزینه می‌توانید اضافه کردن به سبد خرید هم داشته باشید که مهم است اما در کل بهتر است خیلی این اسلایدر را شلوغ نکنید و عین حال ساده اما زیبا باشد تا کاربر اطلاعات را دقیق‌تر و بهتر مشاهده کند، در گزینه‌های پایینی این مورد هم می‌توانید رنگ‌های مربوط به افزودن به سبد خرید را داشته باشید که به سبک استایل سایت خود آن‌ها را شخصی سازی می‌کنید.
- Border: این مورد کمک می‌کند یک خط برای دور دکمه افزودن به سبد خرید داشته باشید.
آموزش تب IMAGE SETTINGS در افزونه Product Slider for WooCommerce
در این تب هم یک سری تنظیمات مربوط به تصاویر دارید که بسیار مهم هستند و می‌توانید تصاویر را هم طبق خواسته خود شخصی سازی کنید، توجه داشته باشید که المان اصلی در این اسلایدر تصاویرها هستند و باید دقت زیادی بر روی آن‌ها داشته باشید.
گزینه‌های مربوط به این تب همانند تصویر بالا هستند که می‌توانید طبق نیاز خود آن‌ها را شخصی سازی کنید.
- Image: با استفاده از این گزینه می‌توانید تعیین کنید که تصاویر در اسلایدر نمایش داده شوند یا خیر، قاعدتاً باید تصاویر را در اسلایدر نمایش دهید تا کاربر ارتباط بهتری با محصول بر قرار کند.
- Border: با استفاده از این گزینه به صورت پیکسلی می‌توانید یک خط دور تصویر داشته باشید که طبق نیاز خود می‌توانید از آن استفاده کنید.
- Image Flip: با استفاده از این گزینه می‌توانید تصاویر را در اسلایدها برعکس کنید که فقط در نسخه پرو این گزینه در دسترس است.
- Image Sizes: از این طریق می‌توانید یک سایز برای تصاویر خود انتخاب کنید که به صورت پیش‌فرض بر روی سایز اصلی تصاویر قرار داده شده اما حتماً باید آن‌را تغییر دهید چون ممکن هر تصویر در سایت یک سایز خاصی داشته باشد و این مورد باعث می‌شود اسلایدر خیلی بد شکل شود.
- Image mode: با استفاده از این گزینه هم می‌توانید یک استایل خاصی را برای تصویر انتخاب کنید که باز هم این گزینه فقط در نسخه پرو در دسترس است.
آموزش تب TYPOGRAPHY – ساخت اسلایدر محصولات ووکامرس
در آخرین تب هم یک سری تنظیمات دیگر مربوط به فونت‌ها و تایپوگرافی داریم که خیلی سخت نیست و به سادگی قابل انجام است.
همان‌طور که در تصویر بالا مشاهده می‌کنید می‌توانید فونت‌ها را خیلی ساده تغییر دهید اما باید بدانید که این بخش هم فقط در نسخه پرو قابل استفاده است و در نسخه رایگان کاملاً محدود بوده و هیچ استفاده‌ای نمی‌توانید از آن داشته باشید.
خیلی خوب دوستان این بخش از آموزش کاملاً تمام شد و تمامی بخش‌های مربوط به ساخت اسلایدر محصولات را به شما توضیح دادیم که بتوانید با استفاده از تنظیمات به خوبی برای خود یک اسلایدر محصولات حرفه‌ای داشته باشید، در کل باید این تنظیمات را با دقت بالا و طبق نیازهای خود انجام دهید تا دیگر نیاز نباشد هر روز آن‌ها را تغییر دهید و آزمون خطا داشته باشید.
آموزش تنظیمات افزونه Product Slider for WooCommerce
ما در بخش قبلی مقاله تنظیمات ساخت اسلایدر را به صورت کامل توضیح دادیم اما در این بخش قصد داریم تنظیمات ساده این افزونه را توضیح دهیم تا بتوانید این بخش از افزونه هم کار کنید و در این زمینه مشکلی نداشته باشید.
همان‌طور که در تصویر بالا مشاهده می‌کنید تنظیمات خیلی پیچیده نیستند و گزینه‌های زیادی هم در انتظار ندارید پس خیلی کار ساده‌تر می‌شود و می‌توانید در کمترین زمان ممکن این تنظیمات را انجام دهید.
توجه داشته باشید که این تنظیمات خیلی نیاز نیست تغییر کنند و در همین حد بدانید که مربوط به کد نویسی‌های افزونه و css افزونه که همان استایل هست می‌شود و نیازی ندارید که آن‌را تغییر دهید، فقط اگر قصد دارید یک سری کدهای css اختصاصی برای خود داشته باشید و استایل افزونه را توسعه دهید می‌توانید از طریق custom css این کدها را وارد افزونه کنید و خیلی ساده عالی این کدها را اضافه کنید و مشکلی نداشته باشید.
اگر قصد دارید از اسلایدرهای ساخته شده یک خروجی هم داشته باشید، می‌توانید به tools این افزونه مراجعه کنید که بسیار ابزار خوبی برای دریافت خروجی از تمام اسلایدرهای ساخته شده است، حتی می‌توانید بعداً با استفاده از همین ابزار افزونه اسلایدرها را درون ریزی هم کنید.
دیگر این افزونه بخش‌های زیادی ندارد و تمام تنظیمات مربوطه ساخت اسلایدر گفته شد، البته قابلیت‌های بیشتری را با استفاده از این افزونه می‌توانید در دسترس خود داشته باشید که در نسخه رایگان این قابلیت‌ها محدود هستند و حتماً باید نسخه پرو افزونه را خریداری کنید که پیشنهاد نمی‌شود این کار را انجام دهید چرا که قیمت آن به ریال نیست و به صورت دلاری است که هزینه بسیار زیادی خواهد بود.
جمع بندی
در کل این افزونه بسیار کاربردی است و اسلایدرهای ساخته شده با آن هم بسیار زیبا هستند به همین دلیل هم نیاز دارید که حداقل برای یک بار هم که شده از آن استفاده کنید، ما سعی داشتیم در این مقاله به صورت کامل آموزش ساخت اسلایدر محصول ووکامرس را ارائه دهیم تا بتوانید با استفاده از این اسلایدر محصولات را بهتر به کاربران نمایش دهید. امیدواریم از خواندن مقاله لذت برده باشید و اگر هم تجربه‌ای از استفاده این افزونه دارید می‌توانید در نظرات مقاله با ما در میان بگذارید تا شما را راهنمایی کنیم.
سلام . من میخوام چند تا ستون با محصولات مختلف ایجاد کنم ولی این افزونه فقط اجازه میده که دو تا ستون یکی ستون محصولات ویژه و یکی محصولات اخیر رو اضافه کرد . با چه افزونه رایگانی میشه بدون محدودیت ستون ایجاد کرد
باسلام، در مقاله بهترین افزونه رایگان اسلایدر محصولات ووکامرس، بهترین افزونه‌ها در این زمینه را معرفی و امکانات آن‌ها را بررسی کردیم، افزونه‌هایی که معرفی شده‌اند را بررسی کرده و بنابر نیاز خود یکی را انتخاب کنید.