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

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

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

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

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

  • نمایش سایز بزرگ تصاویر ووکامرس هنگام هاور موس
  • فعال یا غیرفعال کردن ویژگی زوم کردن تصاویر محصول در ووکامرس در حالت موبایل
  • سفارشی‌سازی طول و عرض تصویر بزرگ شده
  • اضافه شدن اسلایدر تصاویر گالری محصول
  • و …

افزونه YITH WooCommerce Zoom Magnifier

 WooCommerce Zoom Magnifier- زوم کردن تصاویر محصول در ووکامرس

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

نصب و راه‌اندازی افزونه

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

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

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

General Settings

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

Activate YITH WooCommerce Zoom Magnifier: با تیک زدن این گزینه، ویژگی زوم کردن تصاویر محصول در ووکامرس را فعال می‌کنید.
Activate on mobile device: اگر می‌خواهید این ویژگی در موبایل نیز فعال باشد، تیک این گزینه را بزنید.
Forced Image Size: با فعال بودن این گزینه، افزونه به صورت خودکار سایز بزرگنمایی تصویر را اعمال می‌کند اما اگر تیک آن را بردارید، می توانید طول و عرض تصویر زوم شده را تغییر دهید. اگر از تصاویر با سایز های مختلف استفاده می کنید، پیشنهاد می کنیم تیک این گزینه را بزنید تا افزونه به صورت خودکار سایز بزرگنمایی را اعمال کند تا نسبت طول و عرض تصاویر به هم نخورد.

  راه‌اندازی فروشگاه اینترنتی: ارائه کوپن تخفیف در ووکامرس

 Magnifier Settings

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

Zoom Box Width: می‌توانید طول جعبه تصویر زوم شده را تعیین کنید که پیشنهاد می‌شود مقدار auto را اعمال نمایید.
Zoom Box Height: می‌توانید عرض جعبه تصویر زوم شده را تعیین کنید که پیشنهاد می‌شود مقدار auto را اعمال نمایید.
Image Size: سایز تصویری که در جعبه بزرگنمایی قرار می‌گیرد را می توانید به صورت دستی تغییر دهید. اگر تیک گزینه پایینی را بزنید، افزونه به صورت خودکار تصویر محصول را نسبت به سایزی که وارد کرده‌اید برش می‌دهد.
Zoom Box Position: موقعیت جعبه بزرگنمایی را مشخص می‌کند. با توجه به راستچین بودن قالب‌های ایرانی، پیشنهاد می‌شود مقدار “inside” را انتخاب کنید تا بزرگنمایی تصویر به درستی انجام شود.

Zoom Box Position for mobile devices: موقعیت جعبه بزرگنمایی را در موبایل مشخص می‌کند.
Loading label: عبارتی که هنگام بارگذاری تصاویر نمایش داده می‌شود را تعیین می‌کند. می‌توانید از یک عبارت فارسی مثل “در حال بارگذاری” استفاده کنید.
Lens Opacity: میزان شفافیت تصویر را تنظیم می‌کند که می‌توانید آن را روی عدد 1 تنظیم کنید تا بیشترین شفافیت را داشته باشد.
Blur: با تیک زدن این گزینه، هنگامی که کاربر موس خود را روی تصویر نگه می‌دارد، عکس اصلی کمی تار می‌شود اما عکس زوم شده شفاف است.

Slider Settings

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

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

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

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

نتبجه نهایی

تنظیمات افزونه به پایان رسید. حال نتیجه کار به این شکل است:

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

جمع بندی

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

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

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

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

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

336,468 نفر

پاسخی بگذارید

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

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

    سلام
    آیا افزونه ای وجود داره که برای زوم تصاویر شاخص باشه؟
    سایت فروشگاهی نیست (ووکامرس نصب نیست)

  2. برای EDD افزونه ای وجود داره که بروی روی محصولات زوم کن اون هم در صفحه اول سایت؟

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

  4. سلام
    آیا این افزونه تصویر جدیدی در هاست درست میکنه یا همون تصویرو روش زوم میکنه؟

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

    ممنون

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

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

    • سلام
      میشه بگید مشکل رو چطور حل کردن!
      اخه منم این مشکل رو دارم
      ممنون

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

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

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

    سلام ممنون از آموزشتون
    این پلاگین عکس محصولات سایتمو همینجوری بزرگ میکنه میشه بگید چی رو باید تغییر بدم؟
    ببینید:
    http://microsoftme.ir/product/microsoft-lumia-650/

  8. با سلام من میخوام هنگامی که روی عکس های پایین در محصول شاخص میزنم جای تصویر شاخص رو بگیره ایا شدنیه؟ قالب من هم صحیفه هست.لینک زیر رو ببینید:
    http://farsheshik.ir/product/%D8%B3%D8%AC%D8%A7%D8%AF%D9%87-500%D8%B4%D8%A7%D9%86%D9%87-0-%D8%A2%DA%A9%D8%B1%D9%84%DB%8C%DA%A9-%DA%A9%D8%AF-5009/

  9. اگر بخوام عکسام توی یه باکس جدید باز بشه چه کار باید بکنم ؟

  10. کاش فارسی یود

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

    سلام
    چرا تصویر اصلی کراپ و تار میشه ؟؟؟

  12. چرا به نظرات جواب نمیدین؟ من اگه بلد بودم که از شما نمیپرسیدم. الان نه من میتونم افزونه نصب کنم نه میتونم قالب نصب کنم. به صورت دستش هم میشه ولی مشکله. خب کمک کنین. من موقع نصب قالب روی بازگشایی بسته گیر میکنه
    http://s7.picofile.com/file/8240747868/untitled.JPG

    خواهشا یه کمکی کنین

  13. سلام جناب. سایت فوق العاده ای دارین.
    دوست عزیز یه سوال داشتم. وقتی هر بار وردپرس رو آپدیت می کنم علاوه بر wp-config یه فایل اضافه ی wp-config-sample هم اضافه میشه به فایل ها. این فایل اضافه مشکل امنیتی که بوجود نمیاره؟ از هاست پاکش کنیم؟

    تشکر – یاحق

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

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

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

  15. سلام ، تو دو مورد به مشکل برخوردم:
    1-عکس هایی که به گالری محصول اضافه میکنم با کلیک روشون هیچکدام در لایت باکس باز نمیشه و در صفحه بصورت تکی و تمام صفحه باز میشه و برای بازگشت به صفحه باید بک زد! مشکل از کجاست؟
    2-چطور میشه برای صفات محصول که در صفحه مقایسه محصول و یا در ابزارکها بعنوان فیلتر استفاده میشه عکس قرارداد (مثل آیکونpng) ؟
    باتشکر

  16. برادر این افزونه فقط وقتی با موبایل وارد سایتم میشم تصویر زومو بزرگ نشون میده. تصویر تو قالب سایتم 600در 600 هست ولی هر تنظیمی رو میکنم تو کامپیوتر زوم نمیکنه و همون دوباره نشون میده تصاویر بزگتر مثل 1200 در 1200 هم همونو نشون میده باز مشکل از کجاست که زوم نمیکنه

  17. 50 سال عضو همیار وردپرس

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

  18. سلام. ممنون از زحمات شما عزیزان
    من میخوام بزرگنمایی سمت چپ باشه. این ادرس نمونه فروشگاه ما

  19. سلام خسته نباشید
    منم مشکلم اینه که انگار توی کامپیوتر اصن کار نمیکنه برام اما تو گوشی اجرا میشه
    عکسای من سمت راسته و میخوام زومش سمت چپ باشه
    ممنون میشم اکه کمکم کنید.
    http://www.plus-team.ir

  20. سلام
    نمی دونم چرا این افزونه درست کار نمیکنه!!!!
    یه نمونه با عکس خیلی بزرگ گذاشتم میشه لطف کنید نگاه کنید، راهنمایی کنید.
    http://cityplast.ir/product/%D9%86%D9%87%D9%86%DA%AF-%D8%A8%D8%A7%D9%84%D8%AF%D8%A7%D8%B1/

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

    با سلام

    و خسته نباشید به تیم همیار وردپرس

    افزونه به خوبی کار کرد.

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

    ولی من می خواهم که Left‌هم داشته باشد که وجود ندارد.

    لطفا مرا راهنمایی نمایید.

    اگر باید بصورت دستی در CSS این کار را انجام دهم لطفا بگویید که کجا ها را باید تغییر بدهم.

    با تشکر

  22. سلام کار نمیکنه که؟؟؟؟

  23. سلام خسته نباشید
    من یه قالب خبری همراه فروشگاه با ووکامروس دارم ایا امکان فروش فایل با ووکامرووس هست؟ برای تعداد زیاد فایل؟؟

  24. سلام و درود .جناب رحیمی عزیز من هم مانند این دوستمان .این افزونه را نصب کردم و زوم را نشان نمیدهد .ولی بر اساس انچه شما در فیلم گفتید اگر از تصوری کوچک هم استفاده کنیم زوم انجام میشود !ولی مطلوب نیست .لطلفا نگاهی بیاندازید http://jawaherkomak.com/?product=magnis-dis
    با تشکر

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

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

  25. سلام من این افزونه رو نصب کردم ولی ظاهرا عمل نمیکنه و تصویر زوم شده رو نشون نمیده اصلا..
    نمونه محصول
    http://janebiforoosh.com/uncategorized/vivamus-quis

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

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

      با سلام احتمالا با قالب جدید شما برگه های ووکامرس دوباره نصب شده.در ضمن معمولا در تم های مخصووص ووکامرس پوشه ای به نام woocommerce هست میتونید این پوشه رو rename کنید و دوباره تست کنید شاید درست بشه.

  27. سلام .اهان بهار جان ممنون ولی اگر می شد بیشتر در مورد سئو بزارید ممنون می شم . با تشکر بهترین سایت وردپرس

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

    مرسی از سایت بسیار عالیتون

  29. سلام … اقا یه سوال ووکامرس اصلا چیه ؟ 

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

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