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

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

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

    • 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.