ابزارک ایجاد اسلایدر محصولات در ووکامرس با افزونه WooCommerce Widget Product Slider

/, وردپرس, ووکامرس/ابزارک ایجاد اسلایدر محصولات در ووکامرس با افزونه WooCommerce Widget Product Slider

ابزارک ایجاد اسلایدر محصولات در ووکامرس با افزونه WooCommerce Widget Product Slider

در مقاله “ابزارک ایجاد اسلایدر محصولات در ووکامرس با افزونه WooCommerce Widget Product Slider” با افزونه ی بسیار کاربردی ساخت نوعی اسلایدر برای دسته ای از محصولات مورد نظر آشنا خواهیم شد :

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

معرفی و آموزش افزونه WooCommerce Widget Product Slider

در ابتدا به پیشخوان وردپرس رفته و افزونه را نصب می کنیم. پس از فعال سازی افزونه با گزینهproduct slider  در منوی سمت راست وردپرس مواجه خواهیم شد که خود زیر منوهایی دارد.

WooCommerce-Product-Slider-1

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

widget skin

این منو خود دارای تب های متعددی است که در کل به تنظیمات پوسته ی مورد نظر برای نمایش در سایت می پردازد.

Skin settings

WooCommerce-Product-Slider-2

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

Slider Touch: فعال کردن نمایش برای حالت موبایلی

Touch Mobile Skin: تغییر ظاهر پیش فرض نمایش در حالت موبایلی

Dimensions

WooCommerce-Product-Slider-3

در اینجا شما می توانید ابعاد اسلایدر را مشخص کنید.

Tall Type: مدل نمایش

Height: ارتفاع ابزارک

Controls

WooCommerce-Product-Slider-4

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

Slider Control: فعال کردن ابزار های کنترلی

Control Transition: تعیین حالت نمایش ابزار های کنترلی

Previous Icon: تعیین آیکون محصول قبلی

Next Icon: تعیین آیکون محصول بعدی

Play Icon: تعیین آیکون آغاز حرکت اسلایدر

Pause Icon: تعیین آیکون نگه داشتن حرکت اسلایدر

Pager

WooCommerce-Product-Slider-5

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

Slider Pager: فعال کردن تنظیمات صفحه اسلایدر

Pager Transition: تعیین زمان و حالت نمایش صفحه اسلایدر

Pager Direction: مدل نمایش صفحه اسلایدر

Pager Position: موقعیت قرارگیری صفحه اسلایدر

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

product name

WooCommerce-Product-Slider-6

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

Product Name: فعال کردن نمایش نام محصول

Product Name Position: تعیین محل نمایش نام محصول

Product Name Font: تعیین فونت نام محصول

Product Name Hover Colour: رنگ نام محصول

Product Name Margin: میزان فاصله نام محصول از اطراف (تعیین دقیق موقعیت نام محصول)

Price

WooCommerce-Product-Slider-7

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

Price: فعال کردن نمایش قیمت محصول

Price Font: فونت قیمت محصول

Old Price Font: قیمتی اصلی محصول که در ابتدا داشته است.

Price Font Margin: میزان فاصله قیمت محصول از اطراف (تعیین دقیق موقعیت قیمت محصول)

View Product

WooCommerce-Product-Slider-8

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

View Product: فعال کردن دکمه مشاهده محصول

View Product Text: تغییر متن دکمه مشاهده محصول

View Product Alignment: تعیین محل قرارگیری دکمه مشاهده محصول

View Product Font: تغییر فونت دکمه مشاهده محصول

View Product Hover Colour: تعیین رنگ دکمه مشاهده محصول

View Product Container Background Colour: تغییر رنگ پس زمینه دکمه مشاهده محصول

View Product Container Border: تنظیمات مربوط به بردار حاشیه دکمه مشاهده محصول

Container Border Shadow: فعال کردن سایه حاشیه دکمه مشاهده محصول

Border Margin: میزان فاصله دکمه نمایش محصول از اطراف در بیرون (تعیین دقیق موقعیت دکمه مشاهده محصول)

Border Padding: میزان فاصله دکمه نمایش محصول از اطراف در داخل (تعیین دقیق موقعیت دکمه مشاهده محصول)

View All

WooCommerce-Product-Slider-9

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

Category Link Settings

Category Link: فعال کردن نمایش لینک مشاهده دسته محصول انتخابی

Category Link Text: متن لینک مشاهده دسته محصول انتخابی

Category Link Alignment: تعیین محل نمایش لینک مشاهده دسته محصول انتخابی

Category Link Font: تعیین فونت لینک مشاهده دسته محصول انتخابی

Category Link Hover Colour: تعیین رنگ لینک مشاهده دسته محصول انتخابی

Category Link Container Background Colour: تعیین رنگ پس زمینه لینک مشاهده دسته محصول انتخابی

Category Link Container Border: تنظیمات مربوط به بردار حاشیه لینک مشاهده دسته محصول انتخابی

Category Link Container Shadow: فعال کردن سایه حاشیه لینک مشاهده دسته محصول انتخابی

Border Margin: میزان فاصله لینک مشاهده دسته محصول انتخابی از اطراف در بیرون (تعیین دقیق موقعیت لینک)

Border Padding: میزان فاصله لینک مشاهده دسته محصول انتخابی از اطراف در داخل (تعیین دقیق موقعیت لینک)

Tag Link Settings

Tag Link: فعال کردن نمایش لینک مشاهده برچسب محصول انتخابی

Tag Link Text: متن لینک مشاهده برچسب محصول انتخابی

Tag Link Alignment: تعیین محل نمایش لینک مشاهده برچسب محصول انتخابی

Tag Link Font: تعیین فونت لینک مشاهده برچسب محصول انتخابی

Tag Link Hover Colour: تعیین رنگ لینک مشاهده برچسب محصول انتخابی

Tag Link Container Background Colour: تعیین رنگ پس زمینه لینک مشاهده برچسب محصول انتخابی

Tag Link Container Border: تنظیمات مربوط به بردار حاشیه لینک مشاهده برچسب محصول انتخابی

Tag Link Container Shadow: فعال کردن سایه حاشیه لینک مشاهده برچسب محصول انتخابی

Border Margin: میزان فاصله لینک مشاهده برچسب محصول انتخابی از اطراف در بیرون (تعیین دقیق موقعیت لینک)

Border Padding: میزان فاصله لینک مشاهده برچسب محصول انتخابی از اطراف در داخل (تعیین دقیق موقعیت لینک)

Card Skin

WooCommerce-Product-Slider-10

در این بخش که مربوط به پوسته ی سبد خرید می شود دقیقا مانند تنظیمات قبلی عمل کنید و بخش های مشخص شده را تنظیم نمایید.

سایر گزینه ها به صورت پیش فرض تنظیم شده می باشند و احتیاجی به تغییر در آن ها نیست مگر اینکه تمایل به تغییر آن ها داشته باشید.

حال برای نمایش این اسلایدر در سایت به بخش ابزارک ها مراجعه کرده و ابزارک woo products slider  را به محل قرار گیری ابزارک دلخواه خود انتقال دهید.

WooCommerce-Product-Slider-11

حال باید تنظیمات را به طور دلخواه انجام دهید و بعد بر روی دکمه ذخیره کلیک کنید تا اسلایدر در سایت قرار گیرد.

WooCommerce-Product-Slider-12

همانطور که در تصویر بالا مشاهده می کنید اسلایدر به صورتی که تنظیم کرده بودیم به نمایش گذاشته شد.

صفحه افزونه WooCommerce Widget Product Slider در مخزن وردپرس

نویسنده: |۱۳۹۶/۱۲/۲۸ ۱۱:۰۵:۴۲۲ فروردین ۱۳۹۷|معرفی افزونه, وردپرس, ووکامرس|فاقد دیدگاه

درباره نویسنده:

دانشجو در رشته کامپیوتر نرم افزار و همچنین طراح و برنامه نویس وب و اندروید

نظر شما چیست