問題描述

我正在使用 Storefront 主題，并且一直想知道是否有辦法在將鼠標懸停在產(chǎn)品圖像上時調(diào)整其縮放級別.

這可以使用 woocommerce_single_product_zoom_options 專用過濾器鉤子實現(xiàn).

選項數(shù)組中的鉤子未記錄的可用參數(shù)是:

<塊引用>

$zoom_options = 數(shù)組 (

 'url' =>錯誤的，'回調(diào)' =>錯誤的，'目標' =>錯誤的，'持續(xù)時間' =>120,//以毫秒為單位的轉(zhuǎn)換(默認為 120)'上' =>'mouseover',//其他選項:抓取、點擊、切換(默認為鼠標懸停)'觸摸' =>true,//啟用觸摸回退'onZoomIn' =>錯誤的，'onZoomOut' =>錯誤的，'放大' =>1,//縮放倍率:(默認為 1 | 0 到 1 之間的浮點數(shù)));

相關(guān):

放大倍數(shù)設(shè)置為 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:

這篇關(guān)于在woocommerce 3中調(diào)整產(chǎn)品圖像的縮放倍率的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！