Блог

Как я могу отобразить вывод соответствующих продуктов в виде 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;
                }
 

попробуйте вот это

 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%;
}
}
 

Применяйте этот код в соответствии с вашими требованиями. Дайте мне знать о его работе.
Спасибо.