如何在 WordPress 网站中更改 WooCommerce 产品图像大小？

Posted 2023-02-19

【中文标题】如何在 WordPress 网站中更改 WooCommerce 产品图像大小？

【英文标题】：How to Change WooCommerce Product Image Size in WordPress Site?

【发布时间】：2017-03-03 01:42:17

【问题描述】：

Link to website

我已经按照这里的说明进行操作http://www.cbdweb.net/woocommerce-and-image-sizes/ 在这里https://theme-fusion.com/knowledgebase/how-to-fix-woocommerce-image-size-issues/。

即使我在 WooCommerce 设置 --> 产品 --> 显示中更改了目录图像和产品缩略图的大小，我仍然看到检查器中的图像宽度和高度设置为 300。

当您检查其中一张图片时，您会看到：

<img  
src="http://thehamburgercollection.com/wp-
content/uploads/2016/10/Screen-Shot-2015-09-19-at-6.00.26-PM-300x300.jpg" 

class="attachment-shop_catalog size-shop_catalog wp-post-image"

 title="Hamburger Collection"

srcset="http://thehamburgercollection.com/wp-
content/uploads/2016/10/Screen-Shot-2015-09-19-at-6.00.26-PM-
300x300.jpg 300w, 

http://thehamburgercollection.com/wp-
content/uploads/2016/10/Screen-Shot-2015-09-19-at-6.00.26-PM-
150x150.jpg 150w, 

http://thehamburgercollection.com/wp-
content/uploads/2016/10/Screen-Shot-2015-09-19-at-6.00.26-PM-
180x180.jpg 180w, 

http://thehamburgercollection.com/wp-
content/uploads/2016/10/Screen-Shot-2015-09-19-at-6.00.26-PM-
600x600.jpg 600w" sizes="(max-width: 300px) 100vw, 300px"> == $0

有样式

.woocommerce ul.products li.product a img 
width: 100%;
height: auto;
display: block;
margin: 0 0 1em;
box-shadow: none;


.woocommerce img, .woocommerce-page img 
height: auto;
max-width: 100%;

如果我尝试直接在我的主题样式表 (style.css) 中编辑样式，我会得到一个非常糟糕的结果：

.attachment-shop_catalog .size-shop_catalog .wp-post-image 
width: 400px!important;
height: 400px!important;


.woocommerce ul.products li.product a img 
width: 400px!important;
height: 400px!important;

如果我从样式中禁用 max-width:100%：

.woocommerce img, .woocommerce-page img 
height: auto;
max-width: 100%;

我实际上得到了正确的尺寸，但是图像重叠了。

当页面响应时，它们也会保持这个大小，这是我们不希望的。

不过，对我来说真正没有意义的是，为什么当我已经将尺寸更改为 600 x 600 时，img 尺寸仍为 300 x 300，我能想到的所有地方 - 在我的样式表中和WooCommerce 设置 --> 产品 --> 显示下的目录图像、单个产品图像和产品缩略图选项。我还通过 Regenerate Thumbnails 插件重新生成了我的缩略图。此外，这些图像甚至看起来都不是 300 x 300 - 它们实际上看起来像是 150 x 150。

【参考方案1】：

图片的宽度目前由它们的父 li（列表元素）决定。

.woocommerce ul.products li.product

您已将此设置为 680px 的父级的 22.05%。现在，您正在使用 !important 强制您的图像为 600 像素。您希望每行 2 个产品之间有一个小的间隙（4%？），所以这可能会更好（显然摆脱了每张图片的强制 600px 宽度）：

#container .woocommerce ul.products li.product, #container .woocommerce-page ul.products li.product 
    float: left;
    margin: 0 4% 2.992em 0; 
    padding: 0;
    position: relative;
    width: 46%;

您是否还通过管理左侧菜单上的设置 -> 媒体在主 Wordpress 设置中检查了图像大小。如果您更改这些，则再次重新生成缩略图。

【讨论】：

我只是使用 600 像素来获得某种反应——我真正想要的是两个图像都占据大约一半的“woocommerce”容器（每个大约 340 像素）。我尝试将您的代码复制并粘贴到我的样式表中，但它让我回到了原来的位置——小图像占据了 woocommerce 容器宽度的大约 50%。我确实注意到 Settings --> Media 中的缩略图大小设置为 150 x 150。我认为这可能是问题，但我将其更改为 300 x 300，保存，但仍然没有结果。我已经安装并激活了重新生成缩略图插件。

设置 -> 媒体可能是原因。只是为了澄清您必须在每次进行更改时重新运行重新生成，它不会自动执行。我上面给你的代码会让每个产品都占用 100%。重新生成缩略图后，我们可以再看一遍。

应该提到我确实重新运行了重新生成缩略图....好消息是现在新尺寸（340px）出现在检查器中，但看起来像图像仍然是 150 x 150 .....Settings --> Media Thumbnail size 设置为 340，WooCommerce Settings --> Products --> Display Product Thumbnails 设置为 340。在此处更改目录图像的大小（至 340 ) 是大小在检查器中显示不同的原因。

我已经编辑了答案以更好地反映情况。我在 Chrome 中的 Inspect Element 上测试了答案，它会将您的 2 张图像并排放置，并有 4% 的差距。这使得图像 313x313px 这很好，因为源图像有点大（340px）所以你不会失去质量。

这是因为您的 /wp-content/themes/thehamburgercollection/style.css 是在其他样式表之前而不是之后加载的。所以我可以看到你的代码在那里，但由于野兽的级联性质，它被覆盖了。因此，您需要编辑 header.php 并在其他样式表之后引入您的样式表。同时，您还可以使用更新后的答案（我添加了#container 以使您的答案更加具体，希望即使它们先出现，也可以使用，试试吧）。