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

Question

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 width="300" height="300"
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"

alt="Hamburger Collection" 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。

Answer 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 设置中检查了图像大小。如果您更改这些，则再次重新生成缩略图。