Custom Woocommerce image size

时间：2015-05-05 作者：timholz

Woocommerce有三种内置图像大小。但由于有三种以上不同大小的容器，一些图像总是会被拉伸或挤压。因此，图像质量和页面速度会受到影响。例如，Woocommerce将目录大小用于目录图像和相关产品图像。Wordpress提供了一种生成自定义图像大小的简单方法。我尝试为我的相关产品生成一个尺寸：

add_action( \'after_setup_theme\', \'jmt_theme_setup\' );
function jmt_theme_setup() {
add_image_size( \'related-thumb\', 274, 274, true );
}

有没有办法将这种尺寸插入woocommerce相关的产品图像？

感谢您的关注。

regardstheo公司

3 个回复

最合适的回答,由SO网友:Howdy_McGee 整理而成

无论何时更改图像大小，都有一些选项可供选择。关闭实际的默认WooCommerce图像比正常的WordPress安装更困难，因为它们与插件根深蒂固。

<小时>

Modify Related Product Image Sizes:

我已经对此进行了测试，它似乎只对相关产品起作用（尽管我相信它可以扩展到其他领域）。您可能仍然需要利用Regenerate Thumbnails 以获得正确的尺寸。

我们需要把一切都放到wp 过滤器：

function woo_init() {
    // Below functions go here...
}
add_action( \'wp\', \'woo_init\' );

我可以跳过第一部分，设置查询变量，但由于它使用了泛型content-product.php 模板我不相信它，所以我们将设置一个查询变量，确保我们只更改相关产品的图像大小：

if( is_singular( \'product\' ) ) {
    add_filter( \'woocommerce_related_products_args\', function( $query_args ) {
        if( ! empty( $query_args ) ) {
            set_query_var( \'related_products\', true );
        }

        return $query_args;
    } );
}

接下来，我们需要删除默认值loop_product_thumbnail 用我们定制的替换。我们测试以确保realted_products queryvar已设置，并且TRUE 在我们提供新映像之前，否则将提供默认映像。

remove_action( \'woocommerce_before_shop_loop_item_title\', \'woocommerce_template_loop_product_thumbnail\', 10 );
add_action( \'woocommerce_before_shop_loop_item_title\',
    function() {
        $related = get_query_var( \'related_products\' );
        if( TRUE == $related ) {
            echo woocommerce_get_product_thumbnail( \'related-thumb\', 274, 274 );    // Our new image size
        } else {
            echo woocommerce_get_product_thumbnail();   // Default Image Size
        }
    },
    10
);

<小时>

CSS

WooCommerce使用width: 100%; height: auto; 在所有的图像上。您可以将此更改为max-width: 100%; width: auto; height: auto; 并根据边距/列数进行调整，以获得所需的外观。

Change the initial image sizes

您可以通过以下步骤更改WooCommerce使用的实际图像大小：

登录WordPress，导航至WooCommerce -> Products Tab -> Display ( Sub-tab )

在底部，您可以设置以下图像的大小：

目录图像
单个产品图像
产品缩略图

最后，您可以安装Regenerate Thumbnails 获取更改的大小

function yourtheme_woocommerce_image_dimensions() {
    global $pagenow;

    if ( ! isset( $_GET[\'activated\'] ) || $pagenow != \'themes.php\' ) {
        return;
    }

    $catalog = array(
        \'width\'     => \'400\',   // px
        \'height\'    => \'400\',   // px
        \'crop\'      => 1        // true
    );

    $single = array(
        \'width\'     => \'600\',   // px
        \'height\'    => \'600\',   // px
        \'crop\'      => 1        // true
    );

    $thumbnail = array(
        \'width\'     => \'120\',   // px
        \'height\'    => \'120\',   // px
        \'crop\'      => 0        // false
    );

    // Image sizes
    update_option( \'shop_catalog_image_size\', $catalog );       // Product category thumbs
    update_option( \'shop_single_image_size\', $single );         // Single product image
    update_option( \'shop_thumbnail_image_size\', $thumbnail );   // Image gallery thumbs
}

add_action( \'after_switch_theme\', \'yourtheme_woocommerce_image_dimensions\', 1 );

WooCommerce参考链接：

SO网友:m4n0

您可以通过此代码段覆盖WooCommerce的CSS，Remi Corson:

<?php
add_filter( \'wp_head\' , \'related_products_style\' );

function related_products_style() {
   if( is_product() ) :
   ?>
   <style>
   .woocommerce .related ul.products li.product img, .woocommerce .related ul li.product img, .woocommerce .upsells.products ul.products li.product img, .woocommerce .upsells.products ul li.product img, .woocommerce-page .related ul.products li.product img, .woocommerce-page .related ul li.product img, .woocommerce-page .upsells.products ul.products li.product img, .woocommerce-page .upsells.products ul li.product img
   {
      width: 274px !important;
      height: 274px !important;
   }
   </style>
<?php
endif;
}

SO网友:Stefan

我认为这是一个CSS问题，因为WooCommerce（恼人地）使用width: 100% （在我看来）应该是什么时候max-width: 100%. 尝试使用覆盖宽度width: auto, 这应该会有所帮助。

结束

小码农CODE

Custom Woocommerce image size

相关推荐