在 WooCommerce 中禁用原始图像裁剪

Posted 2023-03-15

【中文标题】在 WooCommerce 中禁用原始图像裁剪

【英文标题】：Disable original image crop in WooCommerce

【发布时间】：2016-12-13 04:56:36

【问题描述】：

然后是所有产品的纵向图像，根据我的主题设计，我必须将所有图像显示在一个方形框中。所以所有图像都被裁剪并显示。

如何在 woocommerce 中禁用原始图像裁剪？

因为我在裁剪 WooCommerce 过程时遇到问题：

原始人像图片

Woocommerce 裁剪图像，例如：

那么我该如何解决这个问题，就像原始图像一样，停止裁剪由 WooCommerce 调整大小的缩略图？

【参考方案1】：

转到 woocommerce > 设置 > 产品 （标签） > 显示 （子标签）

然后在页面底部的“产品图片”中，禁用硬裁剪选项并保存更改：

然后您需要使用 Regenerate Thumbnails 插件重新生成您的产品图片：

安装并激活

Regenerate Thumbnails插件

。 进入“工具”菜单，您会发现“重新生成缩略图”项目页面。 按

重新生成所有缩略图

（这将重新生成您的 WordPress 网站的所有缩略图图像。 在 WordPress 媒体库中（在列表视图中），您可以一张一张地重新生成缩略图。

---

使用 php 替代：

有时在某些主题中，这是硬编码的设置。因此，您可以使用此代码 sn-p 更改它们，将其粘贴到活动子主题或主题的 function.php 文件中：

function yourtheme_woocommerce_image_dimensions() 
    global $pagenow;

    if ( ! isset( $_GET['activated'] ) || $pagenow != 'themes.php' ) 
        return;
    
    $catalog = array(
        'width'     => '300',   // px
        'height'    => '300',   // px
        'crop'      => 0 // Disabling Hard crop option.
    );
    $single = array(
        'width'     => '150',   // px
        'height'    => '150',   // px
        'crop'      => 0 // Disabling Hard crop option.
    );
    $thumbnail = array(
        'width'     => '90',   // px
        'height'    => '90',   // px
        'crop'      => 0 // Disabling Hard crop option.
    );
    // 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 设置 > 产品 > 显示（产品图像）中的定义选项。

激活： 您需要将活动主题切换到另一个主题，然后再切换回来以激活它。

您可能还需要使用 Regenerate Thumbnails 插件...

重新生成产品图片

【讨论】：

谢谢，但是如果不添加插件怎么能做到这一点，因为在我的网站中已经有更多插件，如果我要添加新插件，那么网站性能可能会很低或很慢。

谢谢，但我的问题没有解决，因为我不想在站点中添加新的更多插件，我的站点已经用不同的插件变慢了，所以任何想法都可以解决这个问题。所以告诉我。我也可以更改我的核心文件，您只需告诉我其他选项，谢谢。

@BhavikHirani 重新生成缩略图的唯一方法是使用插件（wordpress 和 woocommerce 推荐该插件）。我有 25 个为客户运行的电子商务网站都启用了这个插件。 而且没有任何减速。一次重新生成所有拇指时只需要一些服务器资源（但您只能一个一个地重新生成必要的拇指）。这是一个后端插件，所以不会慢下来。当您完成重新生成时，您可以根据需要禁用/删除它。

@BhavikHirani 如果您的网站速度很慢，这可能来自许多不同的原因（不仅是插件）。它可以是主题本身、商店中的产品数量（大数据库）、托管服务器、您的 wordpress 配置内存、php 自定义、错误的缓存/压缩配置。还有一些糟糕的插件或一些用于 SEO (YOAST) 的插件、多语言插件 (WPML)、一些安全插件。

@BhavikHirani 唯一的选择：使用插件重新生成，您可以替换/重新上传仅受影响的产品图片通过这种裁剪。

【参考方案2】：

由于 WooCommerce 菜单随上一个版本而更改，因此此“显示”菜单不再存在。

现在您可以在以下位置找到它：

-> 自定义（当您在前面时位于 Wordpress 的顶部栏中）

->WooCommerce

-> 产品图片

-> 选择“Uncropped”选项，然后点击“Publish”保存。

不要忘记使用此插件重新生成上一篇文章中提到的缩略图：https://wordpress.org/plugins/regenerate-thumbnails/

【讨论】：

在最新版本的 woocommerce 中选择未裁剪会强制您使用全尺寸图像，这很烦人。

@BenBely，我没有在我的 wordpress 中看到自定义选项。你在哪里找到这个？

@JamieMarshall 您可以在管理端的 Wordpress 菜单中找到它。外观 -> 自定义。

【参考方案3】：

如果要通过代码设置，在functions.php文件中添加这个sn-p：

// set thumbnails size in shop page
add_filter( 'woocommerce_get_image_size_thumbnail', 'ci_theme_override_woocommerce_image_size_thumbnail' );
function ci_theme_override_woocommerce_image_size_thumbnail( $size ) 
    // Catalog images: specific size
    return array(
        'width'  => 150,
        'height' => 150,
        'crop'   => 0, // not cropped
    );

正如Silver Moon 提到的，如果您使用此选项，它将强制您共享所有图像的大小相同。我找到了解决此问题的解决方法：我正在使用 Woo Align Buttons 插件来对齐“添加到购物车”按钮并将这些 CSS 属性添加到商店页面中的图像中：

height: 150px;
vertical-align: middle;
display: flex;

如果您想在其他页面（而不是商店页面）上使用它，请按照以下指南操作：https://docs.woocommerce.com/document/image-sizes-theme-developers/