Changing the WooCommerce loop columns number based on selected layout

By default WooCommerce is showing the 4 products per row on shop or product category archive page. I am changing this default columns loop based on selected Genesis layout.

  • 4 Columns for full width layout
  • 3 Columns for sidebar-content or content-sidebar layout
  • 2 Columns for content-sidebar-sidebar, sidebar-sidebar-content or sidebar-content-sidebar layout

Step 1:

Add the following code in your functions.php file. Before editing the file you’ll keep a backup.

This content is only available to members. You must subscribe the monthly membership plan ($.9.99 USD).

Step 2:

Now change the layout of shop page or products category page.

Shop Page

  • Navigate to Dashboard -> Pages -> All Pages
  • Find the “Shop” page and click on “Edit” link
  • Select the layout from Genesis Layout Settings section
  • Update the page
  • View the page

Product Categories

  • Navigate to Dashboard -> Products -> Categories page
  • Click on “Edit” link of any category
  • Select the layout from Layout Settings section
  • Click on “Update” button and save the settings
  • View the category page

If you need any help then feel free contact me.

Share This Article

C. Paul

Creating Genesis Framework related themes, plugins, articles and troubleshooting the issues. Also I am doing the freelance work for clients.

Subscribe Membership Plan ($9.99/mo)

  • Get full access to all premium tutorials
  • Get Support for the posted content
  • Request for specific how-to tutorials
  • Cancel the subscription at anytime

Reader Interactions

3 Discussion to This Post

  1. Damien Carbery says

    I used CSS because my site displays different columns on different devices (3 on desktop, 2 on iPad portrait), so .first/.last don’t work.

  2. Damien Carbery says

    It might be easier, and more flexible, to use nth-child css to set the number of products per row.

    Instead of using first/last, which requires changing the html
    li.product.first { clear: both; }
    li.product.last { margin-right: 0; }

    use:
    li.product:nth-child(3n+1) { clear: both; } /* First and then every 3rd is on new row */
    li.product:nth-child(3n+3) { clear: both; } /* Every 3rd is flush to right of row. */

    You would probably have something like:
    .full-width-content li.product:nth-child(4n+1) { clear: both; }
    .full-width-content li.product:nth-child(4n+4) { clear: both; }
    etc

    • C. Paul says

      I dislike the extra CSS. Woocommerce have inbuilt columns CSS for products. You’ll only adjust the loop columns number by small php scripts. That’s it.

Leave A Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.