css - WooCommerce 图片大小

Question

在商店页面中，或者当我使用它时:

[featured_products per_page="4" columns="4" orderby="date" order="ASC"]

或者这个:

[best_selling_products per_page="4" columns="4"]

我看到不同尺寸的图片，请查看示例图片:https://dl.dropboxusercontent.com/u/9506723/zapatos_grandes.jpg

我怎样才能强制以相同的大小显示所有图像(使用样式文件中的代码)？

预先感谢您的回答。

Answer 1

我在三个页面上使用短代码调用产品。我在 mac 上使用 chrome 中的开发人员工具(option + cmd + i)来确定要定位和修改大小的正确类。

.page-id-339 .woocommerce ul.products li.product,
.page-id-339 .woocommerce-page ul.products li.product 
{
width: 100%!important;
}

.page-id-3300 .woocommerce ul.products li.product,
.page-id-3300 .woocommerce-page ul.products li.product
{
width: 100%!important;
}

.page-id-16 .woocommerce ul.products li.product,
.page-id-16 .woocommerce-page ul.products li.product
{
width: 100%!important;
}

这里的关键是我使用页面的帖子 ID 来确保只使用该页面上产品的图像大小。您可能会删除帖子 ID 并使用其余的 css 选择器类来定位所有图像。

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product
{
width: 100%!important;
}

确保你输入了 !important。