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

زوم کردن تصویر محصولات در ووکامرس کمک می‌کنه مشتری بافت پارچه، جزئیات ظاهری، نوشته روی بسته‌بندی و بخش‌های ریز محصول رو بهتر ببینه. خود ووکامرس هم امکان بزرگ‌نمایی و نمایش تمام‌صفحه عکس رو داره؛ پس شاید اصلاً نیازی به نصب افزونه تازه نداشته باشید. اول این قابلیت داخلی رو بررسی می‌کنیم. بعد اگه امکانات گالری فعلی براتون کافی نبود، نصب نسخه رایگان YITH WooCommerce Product Gallery & Image Zoom رو قدم‌به‌قدم جلو می‌بریم.

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

قبل از نصب افزونه، زوم داخلی ووکامرس رو بررسی کنید

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

زوم تصویر در گالری کلاسیک ووکامرس

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

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

گزینه Zoom While Hovering در بلوک Product Gallery

اگه قالب یا ویرایشگر سایتتون از بلوک Product Gallery استفاده می‌کنه، صفحه یا الگوی محصول رو باز کنید و خود بلوک گالری رو انتخاب کنید. حالا در نوار کناری تنظیمات دنبال گزینه Zoom While Hovering بگردید. کار این گزینه ساده‌ست: وقتی مشتری نشانگر ماوس رو روی عکس نگه می‌داره، تصویر بزرگ‌تر دیده می‌شه.

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

چه زمانی به افزونه جداگانه نیاز دارید؟

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

آشنایی با افزونه رایگان YITH WooCommerce Product Gallery & Image Zoom

نام فعلی این افزونه YITH WooCommerce Product Gallery & Image Zoom هست. شاید در آموزش‌های قدیمی‌تر اون رو با نام YITH WooCommerce Zoom Magnifier دیده باشید. این افزونه برای بهتر کردن زوم، نمایش بزرگ عکس و گالری محصولات ووکامرس ساخته شده.

نسخه رایگان افزونه چه امکاناتی داره؟

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

تفاوت امکانات رایگان و پولی

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

کارهایی که قبل از شروع باید انجام بدید

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

نصب و فعال‌سازی افزونه رایگان YITH

پیدا کردن افزونه در مخزن وردپرس

وارد پیشخوان وردپرس بشید و از منوی افزونه‌ها ← افزودن افزونه تازه رو انتخاب کنید. عبارت YITH WooCommerce Product Gallery & Image Zoom رو در کادر جستجو بنویسید. نام سازنده و صفحه افزونه رو با مخزن رسمی وردپرس تطبیق بدید. بعد روی هم‌اکنون نصب نمایید بزنید و وقتی نصب تموم شد، فعال نمایید رو انتخاب کنید.

فعال‌سازی افزونه و پیدا کردن صفحه تنظیمات

بعد از فعال‌سازی، در پیشخوان دنبال بخش YITH یا تنظیمات Product Gallery & Image Zoom بگردید. جای دقیق این منو ممکنه با نسخه افزونه فرق کنه. اگه پیداش نکردید، صفحه افزونه‌های نصب‌شده رو باز کنید و روی لینک تنظیمات زیر نام افزونه بزنید.

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

تنظیم زوم تصویر محصولات

فعال کردن زوم با نگه‌داشتن نشانگر ماوس روی تصویر

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

تنظیم لنز، میزان شفافیت و افکت محوشدگی

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

غیرفعال کردن زوم برای محصولات یا دسته‌های خاص

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

تنظیم لایت‌باکس تصاویر محصول

لایت‌باکس چیه و چه کمکی به مشتری می‌کنه؟

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

فعال‌سازی نمایش تمام‌صفحه تصاویر

در بخش Lightbox، گزینه فعال‌سازی لایت‌باکس یا نمایش بزرگ تصویر رو روشن و تنظیمات رو ذخیره کنید. بعد روی تصویر اصلی و چند تصویر بندانگشتی کلیک کنید. لایت‌باکس باید همون عکس انتخاب‌شده رو باز کنه و راه برگشت روشنی مثل دکمه بستن داشته باشه.

تنظیم آیکن باز کردن تصویر

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

تنظیم گالری و تصاویر بندانگشتی محصول

فعال کردن اسلایدر تصاویر بندانگشتی

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

تنظیم تعداد تصاویر قابل‌نمایش

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

انتخاب روش تغییر تصویر اصلی محصول

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

بررسی نتیجه زوم در صفحه محصول

آزمایش زوم روی کامپیوتر

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

آزمایش گالری و نمایش تمام‌صفحه روی موبایل

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

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

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

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

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

چرا تصویر کوچک بعد از زوم تار می‌شه؟

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

چطور کیفیت تصویر رو بدون سنگین کردن سایت حفظ کنید؟

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

رفع مشکلات رایج زوم تصاویر ووکامرس

زوم تصویر فعال نمی‌شه

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

تصویر زوم‌شده تار یا بی‌کیفیته

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

زوم با قالب یا صفحه‌ساز تداخل داره

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

تصویر محصول متغیر داخل گالری عوض نمی‌شه

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

زوم روی موبایل درست کار نمی‌کنه

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

زوم داخلی ووکامرس بهتره یا افزونه YITH؟

چه زمانی زوم داخلی ووکامرس کافیه؟

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

چه زمانی نسخه رایگان YITH انتخاب بهتریه؟

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

جمع‌بندی

برای زوم کردن تصویر محصولات در ووکامرس، اول قابلیت داخلی گالری کلاسیک و گزینه Zoom While Hovering در بلوک Product Gallery رو بررسی کنید. اگه همین امکانات نیازتون رو برطرف می‌کنن، لازم نیست افزونه تازه‌ای نصب کنید. ولی اگه کنترل بیشتری روی زوم، لایت‌باکس یا تصاویر بندانگشتی می‌خواید، نسخه رایگان YITH WooCommerce Product Gallery & Image Zoom رو نصب کنید و تنظیماتش رو روی یک محصول آزمایشی بسنجید.

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

سؤال‌های متداول

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

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