使用2013 WordPress主题的产品在wooCommerce中过于接近

Question

我在WordPress中安装了wooCommerce插件，然后激活了＆＃34; Twenty Thirteen＆＃34;主题并添加了4个产品。

有人请知道如何解决问题，产品展示得太近了他们的＆＃34;添加到购物篮＆＃34;标签重叠（至少用俄语，fullscreen）？

我尝试过不同的小部件配置，比如从右侧移除篮子 - 这没什么用。

如果需要，我很乐意编辑JS，CSS和PHP文件 - 但是不能很好地了解WordPress。

Answer 1

您可以通过多种方式解决此布局问题，但这里有一个快速解决方法。

将此添加到您的css：

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    min-width: 220px;
}

这不是一个完美的解决方案，看看您的实际图片大小和所需的输出将有助于使这项工作更好，但这将解决您的问题。

另一种可能的解决方案是在商店的模板文件中使用短代码，并将输出限制为3列。

<?php echo do_shortcode('[products ids="1, 2, 3, 4, 5" columns="3"]');?>

如另一个答案中所述，要直接更改列数而不为商店页面创建自定义模板：

add_filter( 'loop_shop_columns', function() { return 3; } );

将其添加到主题中的functions.php文件中。

Answer 2

要更改每行的产品数量，请使用loop_shop_columns过滤器。

/* functions.php */

add_filter( 'loop_shop_columns', function() { return 3; } );

但是仍然无法解决问题，您可能需要override WooCommerce样式用于按钮和产品列表元素（请注意，行中的第一个和最后一个元素具有特定的CSS类'first'和'last '）。

Answer 3

这就是我将产品分开的原因。 将此添加到您的CSS：

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
padding: 15px;

}