如何在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设置中更改了目录图像和产品缩略图的大小 - ＆gt;产品 - ＆gt;显示，我仍然看到检查器中的图像宽度和高度设置为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%;
}

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

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

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

Answer 1

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

#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%;
}

你将此设置为其680px的父母的22.05％。现在你强迫你的图像为600px，重要的是！你想要每行2个产品之间有一个小的间隙（4％？），所以这可能会更好（显然摆脱每个图像的强制600px宽度）：

let url = URL(string: path);
var request = URLRequest(url: url!);
request.setValue("application/x-www-form-urlencoded", forHTTPHeaderField: "Content-Type")
request.httpMethod = "GET";
request.httpBody = try JSONSerialization.data(withJSONObject: query, options: []);

您是否也通过设置 - ＆gt;检查主Wordpress设置中的图像尺寸？管理员左侧菜单上的媒体。如果您更改这些，请再次重新生成缩略图。