特定页面的不同 Woocommerce 产品缩略图大小

Posted

技术标签:

【中文标题】特定页面的不同 Woocommerce 产品缩略图大小【英文标题】:Different Woocommerce product thumbnail size for specific pages 【发布时间】:2021-05-24 00:58:13 【问题描述】:

我想为我网站上的不同页面设置不同的缩略图大小。例如,我想在我的主页上使用 150x150 像素的产品网格缩略图,但我想在显示产品网格的其他页面上使用更大的产品缩略图。

我可以用 CSS 放大图像,但缩略图仍然是 150x150px,当我通过 CSS 将它们设置为 600x600px 时,它们会变得模糊。

我尝试在functions.php中添加一些东西,但没有成功,所以如果有人知道如何帮助我,我将不胜感激。

【问题讨论】:

【参考方案1】:

这将更改您产品的缩略图大小。在首页产品将以 150px x 150px 显示,在其他特定页面 Id 600px x 600px 例如:

add_filter( 'single_product_archive_thumbnail_size', 'custom_product_archive_thumbnail_size', 1000 );
function custom_product_archive_thumbnail_size( $size ) 
    global $product;

    if( is_home() || is_front_page() ) 
        $size = array('150', '150');
     elseif ( is_page( 53 ) ) 
        $size = array('600', '600');
    
    return $size;

代码进入活动子主题(或活动主题)的functions.php 文件中。经过测试并且可以工作。

您可以使用WordPress conditional tags 或WooCommerce conditional tags 来定位特定页面。

【讨论】:

以上是关于特定页面的不同 Woocommerce 产品缩略图大小的主要内容,如果未能解决你的问题,请参考以下文章

使 WooCommerce 缩略图图像大于主要产品图像

可变产品的 WooCommerce 动态缩略图图像

Woocommerce产品缩略图位置

如何使用 WooCommerce 更改每行的产品类别数

查看子类别时显示 WooCommerce 父类别缩略图

woocommerce 目录图像缩略图模糊