Question

我有这个Woocommerce网站，我想每行显示6个产品。我尝试将一些代码添加到functions.php并使用css更改li width。这是网站：codedoors.com/styleindia。我试过WooCommerce产品档案定制器插件，但没有工作。

我的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类.products的样式，你可以将它粘贴到你想要的任何地方，但是如果没有被应用，则把它放在重要的标签下。

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

以下是通过应用我发送给您的样式拍摄的屏幕截图。 http://www.awesomescreenshot.com/image/1480013/f65662d652f36b254a9882ce4ba6011a

希望此解决方案可以帮助您。

每行产品Woocommerce

1 个答案: