如何更改WoodPress网站中的WooCommerce产品图像大小？

Question

链接到网站

我已经按照这里的说明做了http://www.cbdweb.net/woocommerce-and-image-sizes/ 这里呢https://theme-fusion.com/knowledgebase/how-to-fix-woocommerce-image-size-issues/.

尽管我在WooCommerce设置中更改了目录图像和产品缩略图的大小-

检查其中一个图像时，您将看到：

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

如果从样式中禁用最大宽度：100%：

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

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

然而，对我来说真正没有意义的是，为什么img的大小仍然是300 x 300，而我已经将其大小更改为600 x 600，这是我能想到的所有地方——在我的样式表中以及WooCommerce设置下的目录图像、单一产品图像和产品缩略图选项中--

Answer 1

图像的宽度当前由其父li（列表元素）指定。

.woocommerce ul.products li.product

您将此设置为680px父级的22.05%。现在，您正在强制您的图像为600px，并带有一个！重要的您希望每行有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主设置中检查图像大小-