在woocommerce 3中调整产品图像的缩放倍率

时间:2023-01-17
本文介绍了在woocommerce 3中调整产品图像的缩放倍率的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

我正在使用 Storefront 主题,并且一直想知道是否有办法在将鼠标悬停在产品图像上时调整其缩放级别.

解决方案

这可以使用 woocommerce_single_product_zoom_options 专用过滤器钩子实现.

<块引用>

选项数组中的钩子未记录的可用参数是:

<块引用>

$zoom_options = 数组 (

 'url' =>错误的,'回调' =>错误的,'目标' =>错误的,'持续时间' =>120,//以毫秒为单位的转换(默认为 120)'上' =>'mouseover',//其他选项:抓取、点击、切换(默认为鼠标悬停)'触摸' =>true,//启用触摸回退'onZoomIn' =>错误的,'onZoomOut' =>错误的,'放大' =>1,//缩放倍率:(默认为 1 | 0 到 1 之间的浮点数));

相关:

放大倍数设置为 0.7 之前:

I'm using the Storefront theme and have been wondering if there is a way to adjust the zooming level imposed on the product image upon hovering on it.

解决方案

This is possible using woocommerce_single_product_zoom_options dedicated filter hook.

The hook undocumented available parameters in the options array are:

$zoom_options = array (

    'url' => false,
    'callback' => false,
    'target' => false,
    'duration' => 120, // Transition in milli seconds (default is 120)
    'on' => 'mouseover', // other options: grab, click, toggle (default is mouseover)
    'touch' => true, // enables a touch fallback
    'onZoomIn' => false,
    'onZoomOut' => false,
    'magnify' => 1, // Zoom magnification: (default is 1  |  float number between 0 and 1)
);

Related: Available parameters details for WooCommerce product image zoom options

Usage with woocommerce_single_product_zoom_options filter hook to change the magnification level (for example we mill minimize the zoom level a bit less):

add_filter( 'woocommerce_single_product_zoom_options', 'custom_single_product_zoom_options' );
function custom_single_product_zoom_options( $zoom_options ) {
    // Changing the magnification level:
    $zoom_options['magnify'] = 0.7;

    return $zoom_options;
}

Code goes in functions.php file of your active child theme (or active theme). Tested and work.

Before with default magnification (set to 1):

Before with magnification set to 0.7:

这篇关于在woocommerce 3中调整产品图像的缩放倍率的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

上一篇:如何在 Woocommerce 中检查产品是否具有特定的产品属性 下一篇:根据 WooCommerce Checkout 中的选择字段添加动态费用

相关文章

最新文章