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


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

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

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

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

برای شروع کار شما می توانید افزونه مورد نظر را از لینک زیر دانلود کنید و در پنل فروشگاه ووکامرس خود نصب نمایید و فعال سازید :
دانلود افزونه WooCommerce Product Slider

پس از فعال سازی افزونه به پنل وردپرس بروید و از بخش تنظیمات گزینه ی WooCommerce product slider را انتخاب نمایید و به صفحه ی تنظیمات افزونه بروید و دارای دو تب برای تنظیمات می باشد که در ادامه به آنها می پردازیم :

تنظیمات تب General :

  • Show featured image : برای نمایش تصاویر برجسته می توانید ، تیک گزینه را بزنید و فعال کنید .
  • Show direction arrows : امکان قرار دادن فلش در دو طرف اسلایدر برای جابجایی تصاویر که برای فعال سازی تیک گزینه را بزنید .
  • Show read more text : برای فعال سازی ادامه ی مطالب و یا بیشتر بدانید
  • Show title : فعال سازی نمایش عنوان محصولات در اسلایدر
  • Show excerpt : قابلیت فعال سازی نشان دادن محصولات منتخب
  • Show price : قابلیت نمایش قیمت محصولات در اسلایدر
  • Show add to cart button : ایجاد قابلیت افزودن به سبد خرید
  • Show pagination : قابلیت نمایش صفحه بندی محصولات
  • Featured image size : شما می توانید از منوی کشویی این بخش اندازه تصویر داخل اسلایدر را مشخص کنید .
  • Auto scroll : قابلیت ایجاد و یا عدم ایجاد اسکرول در اسلایدر . یعنی حرکت اسلایدر محصولات ووکامرس به طور اتوماتیک
  • Circular : توانایی نمایش محصولات به صورت دایره ای
  • Excerpt length : تعیین اندازه طول اسلاید ها
  • Read more text :قابلیت یا عدم قابلیت نمایش متن بیشتر . اگر می خواهید متن خود را وارد کنید .
  • Categories/Terms : می توانید شما دسته ای از محصولات را که می خواهید در اسلایدر نمایش داده شود را وارد کنید .
  • Number of posts : شما در اینجا باید تعداد مطالبی که می خواهید ، محصولات شان در اسلایدر نشان داده شود را تعیین کنید .
  • Posts order : تعیین کنید که نمایش پست ها در اسلایدر شما به چه صورتی باشد ؟ از منوی کشویی آن یک مورد را انتخاب کنید
  • Posts orderby : شخصی سازی پست محصولات چطوری باشد ؟ که به صورت پیش فرض تعیین شده و شما می توانید ، تغییر دهید .
  • Transition effect : تعیین حالت نمایشی اسلایدر
  • Timeout between elements : تعیین مدت زمان برای حرکت محصولات در اسلایدر
  • Infinite : می توانید انتخاب کنید که تعدا محصولات بینهایت باشد یا نه ؟
  • Align the items in Slider : تعیین محلی مناسب برای اسلایدر در صفحه ی مورد نظرتون
  • General width of items : تعیین اندازه ی عرض اسلایدر
  • General height of items : تعیین اندازه ی طول اسلایدر
  • Pick text in excerpt field : انتخاب قرار گرفتن بخشی از متن در اسلایدر
  • Touch Swipe : قابلیت فعال سازی و یا غیر فعال سازی در حالت های لمسی
  • CSS3 Transtitions : قابلیت فعال سازی و یا غیر فعال سازی باکسی برای انجام تنظیمات شخصی CSS
  • Direction to scroll the carousel : از منوی کشویی که وجود دارد تعیین کنید اسلایدر به کدام سمت اسکرول شود
  • Direction arrows colour : تعیین رنگ مناسبی برای فلش ها
  • Direction arrows background colour : انتخاب رنگ پس زمینه برای فلش ها
  • Direction arrows hover colour : تعیین رنگ فلش ها در زمانی که موس بر روی انها قرار می گیرد
  • Size of direction arrows : مشخص کردن اندازه فلش
  • Default image URL :این گزینه برای زمانی هست که شما می خواهید اسلایدرتون به آدرسی که می خواهید ، منتقل شود
  • Custom styles : انجام تنظیمات شخصی CSS

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

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

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

روش اول : کد کوتاه زیر را در برگه ی مورد نظرتون قرار دهید و منتشر کنید :



[wa-wps]


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



<?php echo do_shortcode('[wa-wps]'); ?>


روش سوم : این افزونه دارای ابزارک مخصوص به خود می باشد که شما می توانید به بخش نمایش و ابزارک ها بروید و ابزارک آن را انتخاب کنید تا در هر جایی که می خواهید قرار دهید و در نتیجه تغییرات را ذخیره نمایید .

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

بعضی از ویژگی های افزونه WooCommerce Product Slider  :

  • دارای تنظیمات ساده و قابل تنظیمی می باشد
  • واکنش گرا و قابل استفاده برای موبایل
  • دارای کدهای کوتاه برای برگه های وردپرس می باشد
  • دارای ابزارک در بخش ابزارک ها می باشد
  • بهینه سازی شده
  • قابلیت قرار دادن کدهای اسلایدر در قالب وردپرس

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

منبع : بیگ تم ارائه دهنده قالب وردپرس املاکقالب وردپرس وبلاگی



منبع :بیگ تم