产品在wooCommerce中太接近2013年WordPress主题

Question

我已经安装了wooCommerce插件在WordPress，然后激活了“二十三号”主题，并增加了4个产品。

有人知道如何解决这个问题吗?产品显示得太近了，“添加到篮子”标签重叠(至少在俄语中是这样的，这里是全屏)？

​

​

我尝试过不同的小部件配置，比如从右边移除篮子--这没有帮助。

如果需要的话，我很乐意编辑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; } );

但是这仍然不能解决问题，您可能必须为按钮和产品列表元素创建覆盖 WooCommerce样式(请注意行中的第一个和最后一个元素具有特定的CSS类“first”和“last”)。

Answer 3

我就是这么把产品拆开的。将此添加到css中：

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

}