Question

我很想在我的Woocomerce活跃商店展示2列产品。我使用基于'Shopisle'的儿童主题，我不确定什么是实现它的最佳方式。只有CSS的解决方案是否可行？它会表现得如何，没有任何错误吗？

我认为主题使用Bootstrap作为基础，但我并不是100％肯定它。

提前致谢！

Answer 1

不确定这是否是你想要的 - 因为你在这里几乎没有代码示例。

但通常我要做的就是使用flexbox：

.wrapper-of-all-products {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}

.product {
  width: 49%; // just to be sure there is a gap
  box-sizing: border-box;
}

当然你需要改变类名。我不知道他们是如何被召唤的。

Answer 2

我宁愿使用后端方法。网格和列表由名为的woocommerce模板文件生成：

woocommerce/templates/content-product.php

由于主题本身的样式，主题已经修改了该文件是很常见的，但是它们几乎都在做同一件事；

  <li <?php wc_product_class(); ?> ></li>

如果您没有使用主题，并且正在自定义woocommerce文件，则可以将网格类添加到wc_product_class函数中，例如：

   wc_product_class("col-xs-6 col-sm-6 col-md-3 col-lg-4 col-xl-4");

解决这些列类，以找出最适合您的一种，在这种情况下，大屏幕4列，中3列，小2列，特小2列。

现在通常主题已经在更新此文件，因此您应该在其子主题中覆盖其模板，这非常重要，因此如果主题得到更新，您就不会丢失更改。就我而言，我总是从我自己的子主题开始，然后修改其中的所有内容，以使其更有条理。

这是覆盖主题content-product.php的示例：

 $classes[] = Lezada_Helper::get_grid_item_class( apply_filters( 'lezada_shop_products_columns',
    array(
        'xs' => 1,
        'sm' => 2,
        'md' => 3,
        'lg' => 4,
        'xl' => get_option( 'woocommerce_catalog_columns', 4 ),
    ) ) );

$classes[] = apply_filters( 'lezada_product_style', 'product-style--' . lezada_get_option( 'product_style' ) );

$other_classes = apply_filters( 'lezada_shop_products_classes', '' );
$classes[]     = $other_classes;

?>

<div <?php post_class( $classes ); ?>>

在这种情况下，您可以看到变量$ classes。通过更新显示列类型的数组，通过选择列数，我可以轻松地选择每个视图的列数。现在，这个主题非常独特，每个主题都不同，但我想举一个例子。

此解决方案将始终有效！不用担心缓存的CSS或您将来可能遇到的任何其他问题，因为它在后端做了正确的处理。

最佳，

在移动设备上实施2列 - Woocommerce

2 个答案: