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

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

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

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

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

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

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

قبل از شروع به چه چیزهایی نیاز دارید؟

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

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

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

1. از پیشخوان وردپرس وارد «افزونه‌ها ← افزودن افزونه تازه» بشید.
2. عبارت «Variation Swatches for WooCommerce» رو جست‌وجو کنید.
3. قبل از نصب، نام سازنده یعنی ThemeHigh رو بررسی کنید تا افزونه هم‌نام دیگه‌ای رو نصب نکنید.
4. روی «هم‌اکنون نصب نمایید» و بعد «فعال نمایید» کلیک کنید.

بعد از فعال‌سازی، از مسیر «Swatches Setting ← GetwooPlugin» وارد تنظیمات افزونه بشید. توی این صفحه بخش‌هایی مثل Product Page،‏ Styling و General رو می‌بینید. اسم یا جای بعضی گزینه‌ها ممکنه با توجه به زبان پیشخوان، نسخه افزونه یا نسخه حرفه‌ای کمی فرق کنه.

آشنایی با انواع ویژگی سفارشی در افزونه

نمایش ویژگی به‌شکل رنگ

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

نمایش ویژگی با تصویر

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

نمایش ویژگی به‌شکل برچسب یا دکمه

نوع Label/Button مقدار ویژگی رو داخل یک دکمه متنی نشون می‌ده. این مدل برای اندازه، ظرفیت، تعداد یا گزینه‌هایی مثل S،‏ M و L کاربردیه. البته برای کاربر تازه‌کار، عبارت‌هایی مثل «کوچک» و «متوسط» معمولاً از حروف کوتاه قابل‌فهم‌تر هستن.

نمایش ویژگی با گزینه رادیویی

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

ساخت ویژگی سراسری در ووکامرس

1. از پیشخوان وارد «محصولات ← ویژگی‌ها» بشید.
2. توی کادر نام، عنوانی مثل «رنگ» یا «اندازه» بنویسید.
3. نامک رو با حروف انگلیسی، کوتاه و بدون فاصله وارد کنید؛ برای نمونه color.
4. از بخش نوع، نمایش مناسب مثل Color،‏ Image،‏ Label/Button یا Radio رو انتخاب کنید.
5. روی دکمه افزودن ویژگی کلیک کنید.
6. توی جدول ویژگی‌ها، لینک مربوط به پیکربندی مقدارهای همون ویژگی رو باز کنید.

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

اضافه‌کردن مقدارهای ویژگی مثل رنگ و اندازه

1. برای هر گزینه یک مقدار جدا بسازید؛ مثلاً سفید، مشکی و قرمز.
2. اگه ویژگی از نوع رنگه، رنگ مربوط به هر مقدار رو انتخاب کنید. برای ویژگی تصویری هم تصویر همون طرح یا مدل رو بذارید.
3. اسم گزینه رو همون‌طور بنویسید که مشتری می‌فهمه. نام‌هایی مثل «مدل ۱» بدون توضیح کافی گیج‌کننده هستن.
4. ترتیب نمایش مقدارها رو مشخص کنید. معمولاً چیدن منطقی اندازه‌ها یا قراردادن رنگ‌های پرطرفدار در ابتدای فهرست، انتخاب رو راحت‌تر می‌کنه.

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

تبدیل محصول ساده به محصول متغیر

1. از بخش محصولات، محصول موردنظرتون رو برای ویرایش باز کنید.
2. توی کادر «اطلاعات محصول»، نوع محصول رو روی «محصول متغیر» بذارید.
3. تب «ویژگی‌ها» رو باز کنید و ویژگی سراسری ساخته‌شده رو انتخاب کنید.
4. فقط مقدارهایی رو انتخاب کنید که واقعاً برای این محصول فروخته می‌شن.
5. گزینه «استفاده برای متغیرها» رو فعال کنید و ویژگی رو ذخیره کنید.

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

ساخت متغیرها و تعیین قیمت هر گزینه

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

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

تنظیم ظاهر سواچ‌های محصول

تغییر شکل، اندازه و فاصله گزینه‌ها

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

تنظیم حالت انتخاب‌شده و ناموجود

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

تنظیم راهنمای شناور یا Tooltip

Tooltip یعنی نوشته کوچیکی که با نگه‌داشتن نشانگر روی یک گزینه دیده می‌شه. توی رابط فعلی افزونه، تنظیمات اون رو از «Swatches Options ← Swatches Designs ← Tooltip Styling» بررسی کنید. متن راهنما بهتره کوتاه باشه و اطلاعاتی مثل نام کامل رنگ یا طرح رو نشون بده.

هماهنگ‌کردن ظاهر سواچ‌ها با قالب فروشگاه

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

تنظیمات عمومی و کاربردی افزونه

پاک‌کردن انتخاب مشتری با Clear on Reselect

گزینه Clear on Reselect به مشتری اجازه می‌ده با کلیک دوباره روی انتخاب فعلی، اون رو پاک کنه. این تنظیم رو در «Global Settings ← Other Settings» بررسی کنید. روشن یا خاموش‌کردن اون به تجربه‌ای بستگی داره که برای انتخاب متغیرها در نظر گرفتید.

مدیریت Ajax Variation Threshold برای محصولات پرمتغیر

Ajax Variation Threshold آستانه‌ایه که روی روش بارگذاری اطلاعات تعداد زیادی متغیر اثر می‌ذاره. مقدار پیش‌فرض اعلام‌شده توی راهنمای افزونه ۳۰ هست. این عدد رو بدون آزمایش تغییر ندید، چون مقدار نامناسب می‌تونه انتخاب متغیرها یا سرعت صفحه رو تحت‌تأثیر بذاره. بعد از هر تغییر، محصول پرمتغیر رو توی مرورگر خصوصی و روی موبایل آزمایش کنید.

انتخاب اندازه تصویر ویژگی‌ها

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

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

گزینه فعلی «Disable Swatches plugin stylesheet» فایل استایل افزونه رو غیرفعال می‌کنه. پس اگه استایل اختصاصی کاملی ندارید، اون رو فعال نکنید؛ چون ممکنه ظاهر سواچ‌ها به‌هم بریزه. این گزینه با فعال‌کردن استایل فرق داره و نتیجه اون برعکس اسم قدیمی Enable Stylesheet هست.

ساخت ویژگی سفارشی فقط برای یک محصول

1. محصول رو ویرایش کنید و نوع اون رو روی محصول متغیر بذارید.
2. توی تب «ویژگی‌ها»، گزینه ساخت ویژگی تازه یا سفارشی رو انتخاب کنید.
3. نام ویژگی و مقدارها رو وارد کنید. مقدارها رو با جداکننده‌ای که ووکامرس نشون می‌ده از هم جدا کنید.
4. گزینه «استفاده برای متغیرها» رو فعال کنید و ویژگی رو ذخیره کنید.
5. به تب متغیرها برید، ترکیب‌ها رو بسازید و قیمت هرکدوم رو وارد کنید.

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

نکته‌های مهم برای انتخاب راحت‌تر مشتری

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

حل مشکلات رایج ویژگی‌های سفارشی ووکامرس

ویژگی در صفحه محصول نمایش داده نمی‌شه

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

متغیر بدون قیمت پنهان می‌مونه

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

رنگ یا تصویر سواچ درست نشون داده نمی‌شه

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

با انتخاب ویژگی، تصویر یا قیمت تغییر نمی‌کنه

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

استایل قالب با افزونه تداخل داره

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

محصول‌های پرمتغیر کند بارگذاری می‌شن

تعداد ویژگی‌ها و ترکیب‌های ساخته‌شده رو بررسی کنید و متغیرهای غیرضروری نسازید. تصویرهای متغیرها رو هم بهینه کنید. قبل از تغییر Ajax Variation Threshold، سرعت صفحه و انتخاب گزینه‌ها رو توی یک نسخه آزمایشی بسنجید؛ چون زیادکردن این مقدار همیشه سرعت رو بهتر نمی‌کنه.

تفاوت سواچ ویژگی با گزینه‌های اضافه محصول

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

در مقابل، افزونه‌های Product Add-Ons برای گزینه‌های اضافه مثل نوشتن متن دلخواه، انتخاب خدمات جانبی، چک‌باکس یا آپلود فایل به کار می‌رن. این گزینه‌ها همیشه یک متغیر مستقل با موجودی جدا نیستن.

• برای رنگ، اندازه و مدلی که موجودی یا قیمت جدا داره، از محصول متغیر و سواچ استفاده کنید.
• برای حک‌کردن نام، بسته‌بندی هدیه، متن سفارشی یا آپلود فایل، ابزار Product Add-Ons مناسب‌تره.
• اگه یک انتخاب هم موجودی جدا داره و هم به ورودی سفارشی نیاز داره، ممکنه به هر دو ابزار احتیاج داشته باشید.

سؤال‌های رایج

جمع‌بندی

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

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

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

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

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