php - 如何更改 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

您将此设置为其 680 像素父级的 22.05%。现在你强制你的图像为 600px 并带有 !important。您希望每行 2 个产品之间有一个小间隙(4%？)，所以这可能会更好(显然摆脱了每张图像强制 600 像素的宽度):

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