Dostosuj Liczbę Kolumn w Siatce Produktów WooCommerce

Kod

// Function to change the number of columns in WooCommerce product grid
function wp_dudecom_set_woocommerce_product_columns( $columns ) {
    // Set the number of columns you want to display
    $columns = 4;
    return $columns;
}
add_filter( 'loop_shop_columns', 'wp_dudecom_set_woocommerce_product_columns', 20 );

// Function to ensure the number of columns is applied to the product archive pages
function wp_dudecom_custom_woocommerce_loop_columns() {
    if ( is_shop() || is_product_category() || is_product_tag() ) {
        add_filter( 'loop_shop_columns', 'wp_dudecom_set_woocommerce_product_columns', 20 );
    }
}
add_action( 'wp', 'wp_dudecom_custom_woocommerce_loop_columns' );

// Function to add custom CSS for WooCommerce product grid columns
function wp_dudecom_custom_woocommerce_styles() {
    ?>
    <style type="text/css">
        .woocommerce ul.products {
            display: flex;
            flex-wrap: wrap;
        }
        .woocommerce ul.products li.product {
            width: calc(100% / 4); /* Adjust the number here to match the column count */
        }
    </style>
    <?php
}
add_action( 'wp_head', 'wp_dudecom_custom_woocommerce_styles' );