انتخاب ویژگی های محصول در ووکامرس با WooCommerce Variation Swatches

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

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

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

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

شما می‌­توانید برای انتخاب ویژگی های محصول در ووکامرس از افزونه Variation Swatches for WooCommerce کمک بگیرید. در ادامه آموزش نحوه تنظیمات و استفاده از این افزونه را باهم بررسی می‌­کنیم. عملکرد فوق‌العاده جالب و ساده‌ای دارد.
اما پیش از شروع کار با افزونه و تنظیمات آن بهتر است با ویژگی­ و قابلیت‌­های آن آشنا شوید:

ویژگی‌­های افزونه

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

نصب افزونه Variation Swatches for WooCommerce

variation swatcher- انتخاب ویژگی های محصول در ووکامرس
افزونه مناسب برای انتخاب ویژگی های محصول در ووکامرس

برای شروع کار باید افزونه Variation Swatches for WooCommerce را دریافت و نصب کنید. پس از فعالسازی افزونه، گزینه Swatches Settings به پنل مدیریتی سایت برای انجام تنظیمات افزونه اضافه می‌­شود. در صفحه تنظیمات افزونه تب­‌های متعددی وجود دارد که بعضی از آن‌ها برای حالت پرمیوم افزونه است که ما اینجا کاری با آن نداریم.

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

اولین تب همانطور که در تصویر زیر مشاهده می­‌کنید Simple است:

simple tab- تب ساده
تب simple در تنظیمات افزونه

Enable Tooltip: این بخش برای نمایش کادر راهنمای ویژگی‌­های هر محصول در فروشگاه است. برای فعالسازی تیک این گزینه را بزنید.
Enable Stylesheet: برای فعال‌سازی شیوه‌نامه پیش‌فرض افزونه این گزینه را فعال کنید.
Shape style: نحوه نمایش هر ویژگی برای محصول متغیر. برای چگونگی نمایش ویژگی محصولات متنوع باید از این بخش اقدام کرد. نمایش ویژگی­‌های محصولات در فروشگاه به صورت مربعی یا گرد.
Auto Dropdowns to Button: تبدیل لیست کشویی پیش‌فرض به نوعی دکمه

در نهایت تغییرات را ذخیره کنید.

در ادامه به بررسی تنظیمات تب بعدی یعنی Advanced می‌­پردازیم:

Advanced- تنوع برای یک محصول در ووکامرس
تنظیمات پیشرفته در افزونه

Clear on Reselect: انتخاب این گزینه باعث حذف ویژگی‌ انتخابی برای انتخاب مجدد آن‌ می­‌شود.
Ajax variation threshold: آستانه تغییر برای هر ویژگی را نشان می‌­دهد که بین اعداد 1 تا 30 می‌تواند متغیر باشد.
Attribute behavior: نوع نمایش ویژگی‌ها. با انتخاب هر مورد می‌­توانید نتیجه را در صفحه محصولات متغیر مشاهده کنید.
Attribute image size: در این بخش نحوه نمایش و اندازه تصویر ویژگی­‌های متغیر برای محصولات را مشخص کنید. از لیست کشویی یکی از حالت­‌ها را انتخاب کنید و یا اینکه به صورت دستی عرض، طول و اندازه فونت را تغییر دهید.

با ذخیره سازی تغییرات به سرغ تب بعدی یعنی Performance می­‌رویم:

performance- بررسی کارایی
بررسی کارایی افزونه

این تب به عملکرد سایت و تاثیر این افزونه بر روی سایت اشاره دارد. برای افزایش امتیاز PageSpeed (سرعت صفحات) تیک دو گزینه را فعال کنید. در واقع تنظیمات این تب را به صورت پیش‌فرض قرار دهید.

سایر تنظیمات افزونه مربوط به نسخه پرمیوم آن است. برای کسب طلاعات و راهنمایی­‌های بیشتر به تب Tutorials مراجعه کنید.

تعریف ویژگی در ووکامرس

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

  قالب شرکتی وردپرس ultimate
attributes- انتخاب ویژگی‌ها
انتخاب ویژگی‌ها

همانطور که در تصویر بالا مشاهده می­‌کنید نوع ویژگی به این بخش اضافه شده است که در ادامه باهم آن­ها را بررسی می‌­کنیم.

بررسی ویژگی Color

در بخش نام ویژگی کلمه ” رنگ ” را می‌­نویسیم و سپس از بخش نوع ویژگی Color را انتخاب می‌­کنیم و با کلیک بر روی دکمه ” افزودن ویژگی ” به تعریف این ویژگی می‌­پردازیم.

define color- تعریف ویژگی رنگ
تعریف ویژگی رنگ

حال با کلیک روی گزینه ” پیکربندی شرایط و مقررات” باید متغیرهای رنگ را برای ایجاد تنوع در محصولات تعریف کنیم:

complete color- تنوع برای یک محصول در ووکامرس
تکمیل اطلاعات ویژگی رنگ

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

all color attribute- تمامی ویژگی‌های مخصوص رنگ
انتخاب تمامی رنگ‌های موردنظر

بررسی ویژگی Image

در این قسمت هم همانند بالا نوع ویژگی و نام آن را انتخاب می­‌کنیم و سپس به تعریف متغیر برای این ویژگی می­‌پردازیم.

image attribute- افزودن ویژگی تصویر
افزودن ویژگی تصویر

همانطور که در تصویر بالا می­‌بینید برای هر یک از متغیر­های ویژگی باید یک تصویر انتخاب کرد. هر تعداد متغیر می­‌خواهید در این بخش تعریف کنید تا به سراغ ویژگی بعدی برویم.

بررسی ویژگی Button

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

button attribute- افزودن ویژگی دکمه
افزودن ویژگی دکمه

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

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

به صفحه ویرایش یکی از محصولات رفته و از بخش اطلاعات محصول روی گزینه ویژگی‌ها کلیک کنید تا تصویری مطابق زیر را مشاهده نمایید:

edit product- انتخاب ویژگی های محصول در ووکامرس
صفحه ویرایش محصول

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

choose attribute- انتخاب ویژگی‌ها
انتخاب ویژگی‌های محصول

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

تنظیمات تب متغیرها

در بخش متغیرها گزینه “افزودن متغیر” را انتخاب کرده تا ویژگی­‌هایی که تعیین کرده‌­ایم به این بخش اضافه شوند.

diffrence part- بخش متغیرها
بررسی بخش متغیرها

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

مشاهده نتیجه نهایی

در نهایت نتیجه‌­ای همانند تصویر زیر مشاهده می­‌کنید که با کلیک بر روی هر ویژگی می­‌توانید محصول موردنظر خود را ببینید و قیمت آن را مشاهده کنید.

result- مشاهده نتیجه نهایی
مشاهده نتیجه نهایی بدست آمده

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

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

باتوجه به گسترش روزافزون کسب و کارهای اینترنتی، باید به دنبال راهی باشید که مشتریان را به سمت خود جذب کنید. اگر در فروشگاه اینترنتی خود امکانات زیادی را جهت راحتی مشتری در اختیارش قرار دهید، مطمئن باشید که او جذب فروشگاه شما خواهد شد. یکی از این موارد فروش انواع مختلف یک محصول در ووکامرس است. این قابلیت را به راحتی با افزونه WooCommerce Variation Swatches برای محصولات متغیر فروشگاه­تان ایجاد کنید.
در مطالب بالا نحوه تنظیمات افزونه و تعریف ویژگی برای محصولات فروشگاه، تعریف متغیر براساس ویژگی و استفاده از این متغیرها برای محصولات را مورد بررسی قرار دادیم. هر نظر و پیشنهادی دارید، لطفا از بخش دیدگاه‌ها با ما درمیان بگذارید.

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

دانلود افزونه Variation Swatches for WooCommerce

دانلود افزونه صفحه افزونه

منبع: 

wordpress.org

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

اگر می‌خواهید از آخرین و محبوب‌ترین مقالات ما در ایمیل خود مطلع شوید، همین الان ایمیل خود را در کادر زیر وارد کنید:

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

دیدگاهتان را بنویسید

دیدگاه‌های این نوشته جدید ترین ها شاخص

  1. 9 ماه عضو همیار وردپرس

    سلام
    1)بعد از ورود به سایت شما یک صفحه خطا میاد که آدرس رو افزایش داده:
    hamyarwp.com/woocommerce-variation-swatches/%20http:/hamyarwp.com/panel/

    2)من این افزونه رو نصب کردم ولی الان دوتا ردیف باکس انتخاب رنگ میاد. ممکنه از قبل این ویژگی تو قالب من بوده و الان با این افزونه جدید دو ردیف ویژگی میاد؟
    البته فقط در افزونه داده شده شما رنگ داره و اون فقط مربع بدون رنگه.
    چطور میشه اون قبلی رو حذف یا غیر فعال کرد.
    قالب من snsMarket هست.
    .
    متشکر

    • 3 سال عضو همیار وردپرس

      سلام
      با کدهای css میتونید مخفی کنید.

    • 9 ماه عضو همیار وردپرس

      یعنی باید یک کد بنویسم که روی فانکشن ووکامرس تاثیر بذاره؟ یا خود وردپرس!
      میشه بیشتر توضیح بدید.
      متشکر

    • 3 سال عضو همیار وردپرس

      خیر! باید کد مخصوص به اون قسمت رو از طریق inspect مرورگر پیدا کنید و سپس درقسمت سفارشی سازی-css اضافی با کد display:none; ترکیب کنید.

    • 9 ماه عضو همیار وردپرس

      ممنون
      من این کد رو وارد css سفارشی کردم و ظاهراً درست شد.
      1)فقط مطمئن نیستم همین کد درسته یا نه! تعداد کدها زیاد بود و من این رو برداشتم.
      .woocommerce .type-product.product-type-variable form.cart.variations_form table.variations td.value .option {
      cursor: pointer;
      display: none;
      }
      2)فقط در قسمت محصولات/ویژگی
      آیا امکان حذف چک باکس پیشفرض هم هست.
      تو css سفارشی زدم ولی تاثیری نداشت. باید تو خود فایل دست برد؟ کدوم فایل

    • 3 سال عضو همیار وردپرس

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

  2. 6 ماه عضو همیار وردپرس

    سلام و ممنون بابت توضیحات
    در ووکامرس وقتی یک محصول که دارای متغیر است رو اضافه مکنیم
    و با انتخاب متغیر های مختلف نام محصول ثابت مبمونه…اگر بخوایم این نام عوض بشه باید از چه ابزاری کمک بگیرم؟
    مثلا موبایل حافظه 64 گیگ و 128 گیگ وجود دارد و میخوایم اگه موبایل 64 گیگ انتخاب شد اسم محصول عوض بشه به موبایل 64 گیگ و اگه حافظه 128 انتخاب شد اسم محصول به موبایل حافظه 128 گیگ تغییر پیدا کنه
    باتشکر از شما

  3. 2 سال عضو همیار وردپرس

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

  4. 2 ماه عضو همیار وردپرس

    سلام
    من ویژگی ها رو ساختم. اما تو قسمت محصولات که میرم تو بخش اطلاعات محصول (شما گزینه محصول متغییر رو انتخاب کردید) برا من هیچی نشون نمیده که بخوام گزینه ای رو انتخاب کنم تا اون ویژگی هایی که قبلا ساختم رو ببینم

    uupload.ir/files/rs2p_woo.jpg

    • 3 سال عضو همیار وردپرس

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

    • 2 ماه عضو همیار وردپرس

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

  5. 4 ماه عضو همیار وردپرس

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

    • 3 سال عضو همیار وردپرس

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

  6. 3 سال عضو همیار وردپرس

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

    • 3 سال عضو همیار وردپرس

      درود
      قبل از اینکه وارد مغییر ها بشید باید در قسمت ویژگی ها ویژگی موردنظر را وارد کنید و در همان قسمت تیک گزینه “استفاده برای متغیرها” بزنید، سپس در قسمت متغیرها وارد شوید و تنظیم کنید.

  7. 7 ماه عضو همیار وردپرس

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

  8. 5 سال عضو همیار وردپرس

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

    • 7 سال عضو همیار وردپرس

      سلام
      از نظر و انتقاد شما کمال تشکر رو دارم.
      ببینید دوست عزیز تمامی افزونه‌های موجود در مخزن وردپرس نسخه فیری+ نسخه پرمیوم داره. ما هم به عنوان یکی از مراجع وردپرس لازم میدونیم اکثر افزونه‌ها رو که بخش فیری دارن آموزش بدیم. همیشه هم سعی شده تا جای ممکن اطلاعات کاملی از افزونه ارائه بشه. اما باز هم دوست داریم دوستانمون مثل شما پیشنهاداتی اگه دارن بهمون بگن. اگر پیشنهادی دارید حتما میتونید با ایمیل در ارتباط باشید و اعلام کنید تا با هم مکاتبه‌ای داشته و برای بهبودش به نتیجه برسیم.
      [email protected]
      موفق باشید

  9. 5 سال عضو همیار وردپرس

    افزونه رو نصب کردم تنظیمات انجام دادم اما بجای نمایش تصاویر متن نمایش میده هنوز!
    مشکل از تنظیمات افزونه هسته یا کد نویسی قالب
    http://www.pargolkala.ir/product/%D9%84%D8%A7%DA%A9-%D9%85%D8%A7%D8%AA-losment/

  10. 9 ماه عضو همیار وردپرس

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

  11. 5 سال عضو همیار وردپرس

    سلام
    تمامی مراحل رو انجام دادم ولی رنگ ها به صورت دایره نیستن و مربع هستن و اسم رنگ کنارشون نوشته میشه چطور میشه دایره کرد ؟

  12. 2 سال عضو همیار وردپرس

    سلام و خسته نباشید
    من قالب نیلسن رو نصب دارم
    و این افزونه رو طبق آموزش شما نصب و پیاده سازی کردم
    ولی بعد از بارگزاری کامل صفحه فقط اسم ویژگی رو میاره ولی هیچ کدوم از آپشن هارو نمیاره
    بنظرتون مشکل کجاست
    و اینکه آیا با YITH WooCommerce Product Add-Ons میشه به ویژگی تصویر نسبت داد؟؟؟
    ممنون میشم راهنمایی بفرمائید

  13. عالیه

مطالب زیر را حتما بخوانید

دوره‌های آموزشی