How To Take 3 Row In Shop In WordPress Woocommerce

How to Display Products in 3 Rows on Your WooCommerce Shop Page (Easy Guide!)

Are you tired of the default product layout in your WooCommerce store? Do you want to make your shop page more visually appealing and easier for customers to browse? One common customization is changing the product display from the default to a 3-column layout (3 products per row). This guide will show you how to achieve this, even if you’re a complete beginner to WordPress and WooCommerce.

Why Change to a 3-Row Layout?

Before we dive in, let’s understand why you might want to display your products in 3 rows:

Improved Visual Appeal: A 3-column layout can feel less cluttered and more modern compared to a 2-column or 4-column layout. It allows for better use of screen real estate, especially on wider screens.
Enhanced User Experience: For some product types, a 3-column layout strikes a nice balance, allowing customers to see enough details about each product without feeling overwhelmed. Think about a clothing store – 3 items across provides a good overview of different styles.
Mobile Responsiveness: A well-implemented 3-column layout adapts better to smaller screens. It provides a smooth transition to single-column view on mobile devices, maintaining readability and navigability.

Method 1: Using the WooCommerce Customizer (Theme Dependent)

The easiest way to adjust your shop columns is through the WordPress Customizer. However, this method is dependent on your theme. Some themes offer this option built-in.

1. Go to Appearance > Customize in your WordPress dashboard.

2. Look for a “WooCommerce” or “Product Catalog” section. The exact wording may vary based on your theme.

3. Within the WooCommerce settings, you might find an option to set “Products per row” or “Columns.”

4. Change the value to “3” and publish your changes.

Example: Let’s Learn more about How To Add Woocommerce Product To Menu say you’re using a theme called “Storefront.” You might see:

* Appearance > Customize > WooCommerce > Product Catalog > Products per row: [ 3 ]

Important Note: If you don’t see this option in your Customizer, your theme likely doesn’t support direct column customization. Don’t worry, we have other methods!

Method 2: Using a Code Snippet (Recommended & More Universal)

This method involves adding a small piece of code to your theme’s `functions.php` file Explore this article on How To Show Out Of Stock Product In Woocommerce or, even better, using a code snippets plugin. Using a plugin avoids directly modifying your theme files, protecting your changes during theme updates. Plugins like “Code Snippets” are readily available and easy to use.

1. Install and activate the “Code Snippets” plugin (or your preferred code snippets plugin) from the WordPress plugin repository.

2. Go to Snippets > Add New.

3. Add a title, like “WooCommerce 3 Columns.”

4. Paste the following code snippet into the “Code” area:

 add_filter( 'loop_shop_columns', 'wc_loop_shop_columns' ); function wc_loop_shop_columns( $columns ) { return 3; }

5. Choose “Run snippet everywhere” and click “Save Changes and Activate.”

Explanation of the Code:

`add_filter( ‘loop_shop_columns’, ‘wc_loop_shop_columns’ );`: This line tells WordPress to use our custom function (`wc_loop_shop_columns`) to modify the number of columns in the product loop. The `loop_shop_columns` filter is a specific WooCommerce filter.
`function wc_loop_shop_columns( $columns ) { … }`: This defines our function.
`return 3;`: This is the core of the function. It returns the value “3,” effectively setting the number of columns to 3.

Real-Life Scenario: Imagine Explore this article on How To Set Up Woocommerce In WordPress you are selling handmade soaps. You’d prefer 3 soaps displayed on each row to give them each space to breathe and allow customers to visually appreciate the detail. This code snippet helps you achieve that quickly.

Method 3: Using a Child Theme (Advanced – Recommended for Major Changes)

This method is the most robust, but also the most complex for beginners. It involves creating a child theme and overriding WooCommerce templates. A child theme allows you to make changes to your theme without directly editing the parent theme files, ensuring your changes aren’t lost during theme updates.

1. Create a child theme for your current theme. (There are plugins that can help you with this, or you can do it manually – search for “create wordpress child theme”).

2. Copy the `woocommerce/templates/loop/loop-start.php` file from the parent theme to the same directory structure in your child theme.

3. Edit the `loop-start.php` file in your child theme. Look for the opening `

Reasoning: WooCommerce uses templates to control how products are displayed. By overriding the `loop-start.php` template in your child theme, you directly control the opening `

Caution: This method is generally considered advanced. Making a mistake in your child theme can break your site. Ensure you have a backup before making any changes.

Important Considerations:

CSS Adjustments: After changing the number of columns, you might need to adjust your theme’s CSS to Discover insights on How To Display Woocommerce Products By Category ensure everything looks properly aligned and spaced. Inspect your shop page in Read more about How To Import Woocommerce Dummy Data your browser’s developer tools (usually by pressing F12) and add custom CSS to your theme (or child theme) if necessary.
Mobile Responsiveness: Always test your shop page on different screen sizes (desktop, tablet, and mobile) to ensure it looks good and functions correctly. Use media queries in your CSS to adjust the layout for different screen sizes.
Theme Compatibility: Some themes might have custom WooCommerce integrations that override these methods. If none of these solutions work, consult your theme’s documentation or contact the theme developer.
Backup: Always back up your website before making any code changes! This ensures you can easily restore your site if something goes wrong.

By following these methods, you can easily change your WooCommerce shop page to display products in 3 rows, creating a more visually appealing and user-friendly shopping experience for your customers. Choose the method that best suits your technical skill level and your theme’s capabilities. Good luck!