如何將相關產品輸出顯示為 4 行？
function woo_related_products_limit() {
global $product;
$args['posts_per_page'] = 6;
return $args;
}
add_filter( 'woocommerce_output_related_products_args', 'jk_related_products_args', 20 );
function jk_related_products_args( $args ) {
$args['posts_per_page'] = 12; // 12 related products
$args['rows'] = 4; // arranged in 2 rows
return $args;
}
uj5u.com熱心網友回復：
試試這個
add_filter( 'woocommerce_output_related_products_args', 'change_number_related_products', 9999 );
function change_number_related_products( $args ) {
$args['posts_per_page'] = 12; // # of related products
$args['columns'] = 3; // # of columns per row
return $args;
}
如果你想分成 4 行，你必須做一些 CSS。基本上這一切都取決于您要顯示多少產品，它與行數和列數無關。就像我在代碼中添加了 12 個產品一樣，默認情況下它將顯示 3 列。所以一切都取決于產品的數量和少量的 CSS。我在下面添加了 3 或 4 列 CSS 代碼。如果您將列數作為顯示在上面，只是在代碼中添加類，您還可以檢查輸出代碼，我也附上了螢屏截圖。
您的 CSS 代碼將類似于：
@media (min-width: 768px) {
.site-main .related.products ul.products li.product {
width: 33.3333%; // for 3 columns per row
}
}
@media (min-width: 768px) {
.site-main .related.products ul.products li.product {
width: 22%; // for 4 columns per row
float: left;
margin-right: 4%;
}
}
根據您的要求應用此代碼。讓我知道它的作業。謝謝。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/323222.html
標籤：php WordPress的 求购
上一篇：默認產品簡短描述