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

Question

我很乐意在我的 Wocomerce 活跃商店中展示 2 列产品。 我使用基于“Shopisle”的儿童主题，但我不确定实现这一目标的最佳方法是什么。纯 CSS 解决方案可行吗？它会正常运行，没有任何错误吗？

我相信该主题使用 Bootstrap 作为基础，但我对此不是 100% 确定。

提前致谢！

Answer 1

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

但通常我会使用弹性盒：

.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 或您将来可能遇到的任何其他问题，因为它在后端以正确的方式完成。

最好的，

Answer 3

它可能在主题自己的设置中。 2个月后，我突然发现了。我正在使用 Blocksy 免费主题，设置位于 主题定制器 > 产品存档 > 列和行（请参阅标题右侧的 PC、选项卡、移动设备图标）> 单击该移动设备图标并设置 2。