每行產品數Woocommerce

Question

我有這個Woocommerce網站，我想每行顯示6種產品。 我嘗試將一些代碼添加到functions.php並使用CSS更改li寬度。 這是網站：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 class .products，您可以將其粘貼到所需的任何位置，但是如果未應用，則將其放在重要標簽下。

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

這是應用我發送給您的樣式制作的屏幕截圖。 http://www.awesomescreenshot.com/image/1480013/f65662d652f36b254a9882ce4ba6011a

希望此解決方案對您有所幫助。