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

با زوم کردن تصاویر محصولات، مشتریان با دقت بیشتری می توانند تصاویر محصول شما را بررسی کرده و با اطمینان بیشتری اقدام به خرید خواهند کرد.

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

اما چنانچه قالب شما به طور پیش فرض از این ویژگی پشتیبانی نمی کند، در ادامه این آموزش از وردپرس نارنجی با ما همراه باشید.

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

افزونه ای که برای اضافه کردن زوم تصاویر محصولات ووکامرس در این آموزش معرفی می کنیم، با عنوان YITH WooCommerce Zoom Magnifier در مخزن وردپرس به ثبت رسیده است.

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

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

دانلود افزونه YITH WooCommerce Zoom Magnifier

پس از نصب و فعالسازی افزونه منویی با عنوان YITH در بخش پیخوان وردپرس شما ایجاد می شود که با کلیک روی زیر منوی Zoom Magnifier می توانید به بخش تنظیمات افزونه هدایت شوید.

General Settings

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

Activate YITH WooCommerce Zoom Magnifier: با فعال کردن این گزینه، ویژگی زوم کردن تصاویر محصولات در ووکامرس، فعال خواهد شد.

Activate on mobile device: چنانچه تمایل دارید زوم تصاویر محصولات در دیوایس های موبایل هم فعال باشد، این گزینه را فعال کنید.

Forced Image Size: با فعال بودن این گزینه، افزونه به صورت خودکار سایز بزرگنمایی تصویر را اعمال می‌کند اما اگر تیک آن را بردارید، می توانید طول و عرض تصویر زوم شده را تغییر دهید. اگز تصاویر محصولات شما سایزهای متفاوتی دارند، این گزینه را فعال نگه دارید تا افزونه به طور خودکار اندازه بزرگنمایی تصاویر را تعیین کند.

 Magnifier Settings

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

Zoom Box Width:  طول جعبه تصویر زوم شده را از این بخش می توانید تعیین کنید.

Zoom Box Height: می‌توانید عرض جعبه هنگام زوم کردن محصولات ووکامرس را از این بخش تعیین کنید.

Image Size: از این بخش می توانید اندازه تصویری که در جعبه بزرگنمایی قرار می‌گیرد، به دلخواه و به صورت دستی تعیین کنید. اگز تیک گزینه Do you want to hard crop the image? را فعال کنید، افزونه به صورت خودکار تصویر محصول را نسبت به سایزی که وارد کرده‌اید برش می‌دهد.

Zoom Box Position: این گزینه موقعیت جعبه بزرگنمایی تصاویر را مشخص می‌کند. با توجه به راستچین بودن قالب‌های ایرانی، مقدار “inside” را انتخاب کنید تا زوم کردن تصاویر محصولات به درستی انجام شود.

Zoom Box Position for mobile devices: موقعیت جعبه بزرگنمایی در موبایل را از این گزینه تعیین کنید.

Loading label: عبارتی که هنگام بارگذاری تصاویر نمایش داده می شود را می توانید در این بخش تعیین نمایید.

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

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

Slider Settings

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

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

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

Items: تعداد عکس هایی که می خواهید در یک ردیف از اسلایدر نمایش داده شوند را از این گزینه تعیین کنید.

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

Infinite Carousel: اگر این گزینه را فعال کنید، اسلایدها به صورت نامحدود نمایش داده می شوند.

در نهایت برای زوم کردن تصاویر محصولات فروشگاه خود، روی دکمه save changes کلیک کنید تا تنظیمات ذخیره شوند.

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