每行 Woocommerce 产品

Question

我有这个 Woocommerce 网站，我想每行显示 6 个产品。我尝试向 functions.php 添加一些代码并使用 css 更改 li 宽度。这是网站：codedoors.com/styleindia。我也试过 WooCommerce Product Archive Customizer 插件但没有用。

我的 functions.php 文件：

// Display 24 products per page. //working
add_filter( 'loop_shop_per_page', create_function( '$cols', 'return 9;' ), 20 );


// Change number or products per row to 3 //not working
add_filter('loop_shop_columns', 'loop_columns');
if (!function_exists('loop_columns')) {
    function loop_columns() {
        return 6; // 3 products per row
    }
}

谢谢

Answer 1

我使用 CSS 样式本身使每行显示 6 个产品。我会为您提供我如何更改它的样式。

样式表 1：

隐藏我在下面提到的行

http://codedoors.com/styleindia/wp-content/themes/smartshop/assets/css/smartshop-woocommerce.css?ver=1.0

.woocommerce ul.products li.product:nth-child(4n+1) {
    /*clear: both !important;*/
}

并在同一文件中将选择器的样式更改为此

.woocommerce ul.products li.product {
  clear: none !important;
  margin: 2% !important;
  width: 12% !important; /* you have given here it as 15% */
}

最后一个是为 UL class.products 应用样式，您可以将其粘贴到任何您想要的地方，但如果没有应用，请将其放在重要标签下。

.products {
  float: left;
  width: 100%;
}

这是应用我发送给您的样式制作的屏幕截图。 http://www.awesomescreenshot.com/image/1480013/f65662d652f36b254a9882ce4ba6011a

希望此解决方案对您有所帮助。

每行 Woocommerce 产品

Products per row Woocommerce

css

php

wordpress

product

woocommerce