نحوه حذف افکت زوم روی تصویر محصول ووکامرس

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

برخی از تصاویر محصول به جلوه زوم نیاز ندارند و ممکن است بخواهید جلوه زوم را روی این تصویر ووکامرس حذف کنید.

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

جلوه زوم تصویر محصول ووکامرس

افکت زوم وقتی روی تصویر بزرگ در صفحه تک محصول قرار می‌گیرید ظاهر می‌شود. این افکت زوم مانند تصویر زیر ظاهر می شود:

حذف افکت زوم روی تصویر محصول ووکامرس

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

  • وارد سایت ووکامرس خود شوید و در منوی Appearance > Theme Editor به ویرایشگر تم دسترسی پیدا کنید. یا از FTP یا CPanel فایل منیجر برای دسترسی به فایل توابع تم فعال استفاده کنید، ترجیحاً از تم فرزند استفاده کنید.
  • فایل functions.php تم فرزند را باز کنید و فیلتری را اضافه کنید که روی “woocommerce_single_product_image_thumbnail_html” قلاب می کند، به عنوان مثال کد زیر برای افزودن فیلتر است.
add_filter('woocommerce_single_product_image_thumbnail_html', 'njengah_remove_zoom_effect_product_image', 10, 2);
  • تابع callback را ایجاد کنید و در تابع دو پارامتر $html و $post_id را ارسال کنید. در عبارت بازگشتی این تابع از فیلترهای اعمال برای تنظیم اندازه تصویر محصول و حذف افکت زوم به صورت زیر استفاده کنید: application_filters( ‘single_product_large_thumbnail_size’, ‘shop_single’ ) );
  • وقتی این قطعه کد را در فایل توابع اضافه می‌کنید تا تغییرات را به‌روزرسانی کنید و با موفقیت جلوه زوم را از تصویر تک محصول حذف کنید.
  • این قطعه کد کاملی است که باید به functions.php اضافه کنید تا جلوه زوم را از تصویر تک محصول حذف کنید.
/**
 * Remove Zoom Effect on WooCommerce Product Image 
 *
 * @param $html, $post_id 
 *
 * @return $function 
 */

function njengah_remove_zoom_effect_product_image( $html, $post_id ) {
    
    $post_thumbnail_id = get_post_thumbnail_id( $post_id );
    return get_the_post_thumbnail( $post_thumbnail_id, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ) );
}
add_filter('woocommerce_single_product_image_thumbnail_html', 'njengah_remove_zoom_effect_product_image', 10, 2);

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

به دلایلی ممکن است روش اول در برخی از تم ها شکست بخورد یا به دلیل تضاد با سایر قلاب های ووکامرس ، شما در افزونه استفاده کرده اید.

یک کد جایگزین که می توانید برای حذف افکت زوم از صفحه محصول واحد ووکامرس استفاده کنید، تابع remove_theme_support() است.

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

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

remove_theme_support( 'wc-product-gallery-zoom' );

remove_theme_support( 'wc-product-gallery-lightbox' );

remove_theme_support( 'wc-product-gallery-slider' );

این قطعه کد را به functions.php اضافه کنید و تغییرات را ذخیره کنید و بررسی کنید که آیا افکت زوم روی تصویر محصول حذف شده است یا خیر. می توانید این کد را با استفاده از اکشن هوک به صورت زیر به functions.php وارد کنید:

add_action( 'wp', 'njengah_remove_zoom_effect_theme_support', 99 );

function njengah_remove_zoom_effect_theme_support() {

   remove_theme_support( 'wc-product-gallery-zoom' );

   remove_theme_support( 'wc-product-gallery-lightbox' );

   remove_theme_support( 'wc-product-gallery-slider' );

}

این کد همچنین افکت زوم را از تصویر محصول حذف می کند.

افکار نهایی

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

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


قیمت آموزش
رایگان
نوع دسترسی
رایگان

این مقاله در حال حاضر تنها به روش رایگان در دسترس می باشد.

ناصر خالدی
مدرس دوره

ناصر خالدی

مهندس شبکه, امنیت, برنامه نویسی تلفن های هوشمند, طراح وب سایت و متخصص هوش مصنوعی

گفتگوی برنامه نویسان

بخشی برای حل مشکلات برنامه‌نویسی و مباحث پیرامون آن

دوره های پیشنهادی

دیدگاه‌ها و پرسش‌ها

برای ارسال نظر نیاز است تا ابتدا وارد سایت شوید.

هیچ نظری ارسال نشده است.

مقالات پیشنهادی

جاوا اسکریپت

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


۱۲۵
۰
۱۳ آذر ۱۳۹۹

پی اچ پی - PHP

با استفاده از این زبان می توان وب سایت های پویا طراحی کرد, این زبان می تواند با HTML ادغام شود, در حقیقت یک زبان اسکریپتی متن باز و رایگان است. یعنی زمانی که سرور درخواست ...


۲۰۴
۰
۱۳ آذر ۱۳۹۹

هوش مصنوعی

هوش مصنوعی یا هوش ماشینی, به هوشمندی نشان داده شده توسط ماشین در شرایط مختلف گفته میشود که مقابل هوش طبیعی در انسان ها قرار دارد که ...


۱۳۴
۰
۱۱ آذر ۱۳۹۹

درباره فایل Robots.txt

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


۱۲۱
۰
۲ دی ۱۳۹۹