Adjust Number of Columns in WooCommerce Product Grid

How to change number of columns in WooCommerce gridAdjust product grid columns in WordPressCustomize WooCommerce product grid layoutChange columns in product grid WooCommerceModify number of columns in WordPress product gridSet different columns for WooCommerce product gridHow to customize product grid columns in WordPressChange product grid layout in WooCommerceAdjust number of columns in WooCommerce shop pageHow to set columns in WooCommerce product display

Explanation

Want to change how many products show up in a row on your WooCommerce shop page? Here's a simple way to do it!

Adjusting the Number of Columns:

There's a function that sets how many products appear side by side. In this example, it's set to 4 columns.
If you want a different number, just change the number 4 to whatever suits your layout.

Where It Works:

This setup applies to the main shop page, product categories, and product tags.
It ensures that your chosen number of columns is consistent across these pages.

Styling the Grid:

There's a bit of custom CSS added to make sure the products line up nicely.
The width of each product is calculated based on the number of columns. For example, if you set it to 4 columns, each product takes up 25% of the row.

Just tweak the number in the code to fit your needs, and your WooCommerce shop will display products in the neat grid you want!

Code
// 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' );

Instructions

File Location: functions.php or a custom plugin file

Prerequisites:

Ensure WooCommerce is installed and activated on your WordPress site.

Implementation Steps:

Access your WordPress admin dashboard.
Navigate to Appearance > Theme Editor if you are editing the functions.php file, or go to Plugins > Editor if you are using a custom plugin.
Locate the functions.php file of your active theme or the custom plugin file where you want to add the code.
Copy and paste the provided code into the file.
Adjust the number 4 in the code to the desired number of columns you want for your product grid.
Save the changes to the file.
Visit your WooCommerce shop page, product categories, or product tags to see the changes in effect.

If you need assistance with this implementation or require more advanced functionality, consider reaching out to wp-dude.com for expert help.