WooCommerce Products Vertical List: Step-by-Step

Updated 6 November 2026 · Standard formula, shown below

This guide shows you how to display your WooCommerce products in a clean vertical list instead of the default grid. You’ll learn to do it with a shortcode, with a block, and with a bit of custom code—so you can pick the method that fits your skill level. No plugins are required, just your WordPress admin and a theme that supports standard blocks.

What You’ll Need

A WordPress site with WooCommerce installed and at least a few products added.
Admin access to the WordPress dashboard (to edit pages and add code).
A code editor or the built-in WordPress Custom HTML block (for the custom code method).

Step-by-Step

Method 1: Using the WooCommerce Shortcode (Simplest)

In your WordPress admin, go to Pages and open the page where you want the vertical list to appear (or create a new page).
Click the + (Add Block) button and search for “Shortcode�. Add the Shortcode block to the page.
In the shortcode block, paste the following code:
```
[products limit="12" columns="1" orderby="date" order="DESC"]
```
This displays up to 12 products in a single column (vertical list). Adjust limit to control how many products show, or remove it to show all.
Click Update or Publish to save the page. View the page on the front end—your products should now appear stacked vertically.

Method 2: Using the Products Block (Gutenberg)

Edit the page where you want the list.
Click the + (Add Block) button and search for “Products�. Choose the Products block (by WooCommerce).
In the block settings panel (right sidebar), under Settings, set Columns to 1.
Optionally, set the number of products to show under Products per page.
Click Update to save. The block will render as a vertical list on the front end.

Method 3: Custom Code (Full Control)

In your WordPress admin, go to Appearance → Theme File Editor (or use an FTP client to edit your theme’s files).
Open your theme’s functions.php file. Important: Always create a child theme before editing theme files; otherwise, changes are lost on update.

Add the following code at the end of the file:

function custom_woo_vertical_list( $query ) {
    if ( $query->is_main_query() && is_shop() ) {
        $query->set( 'posts_per_page', 12 );
        // Force single column by setting the number of columns via a filter
        add_filter( 'loop_shop_columns', function() { return 1; } );
    }
}
add_action( 'pre_get_posts', 'custom_woo_vertical_list' );

This changes the main shop page to show 12 products per page in one column.

If you want to apply the vertical list only to a specific page (not the main shop), use a shortcode with a custom query instead. For example, create a shortcode that outputs a custom WP_Query with columns=1.
Save the file. Clear any caching plugins you use, then check the shop page.

Common Mistakes

Not setting columns to 1 – The default is usually 3 or 4, so products will still show in a grid. Double-check the column setting in the block or shortcode.
Using the wrong shortcode – The [products] shortcode exists, but some older tutorials use [product_category] or [featured_products] which may not support the columns parameter in the same way.
Editing the theme directly – If you add custom code to the parent theme, it will be overwritten when the theme updates. Use a child theme or a code snippets plugin.
Forgetting to clear cache – If you use a caching plugin, your changes might not appear immediately. Clear all caches (page, browser, CDN) after making changes.

Tips

For a more polished look, add custom CSS to your theme to style the list. For example, you can add borders between products or change the image size. Use the Additional CSS option in the Customizer.
If you want to show specific categories, use the category attribute in the shortcode, like [products category="clothing" columns="1"].
To show only products on sale, use [sale_products columns="1"].
Test the list on mobile—single column lists usually work well, but ensure the product images and text scale properly.

Troubleshooting

Products still show in a grid: Check that you’ve set columns="1" in the shortcode or the block. If you’re using the custom code method, make sure the filter is hooked correctly and that you’re not overriding it elsewhere. Also, some page builders have their own product widgets that ignore the column setting.
The shortcode shows nothing: Ensure you have products published and visible in the shop. Also check that the shortcode is spelled correctly and placed inside a Shortcode block, not a paragraph block.
Custom code causes a fatal error: If you see a white screen, you likely have a syntax error. Check the code carefully, or remove the code by accessing your site via FTP and deleting the lines you added.
Changes only apply to the shop page, not other pages: The custom code method targets the main shop page. For other pages, use the shortcode or block method, or create a custom page template.

Frequently Asked Questions

Can I use this with a page builder like Elementor?

Yes. In Elementor, you can use the Shortcode widget and paste the [products columns="1"] shortcode. Or use the WooCommerce Products widget and set the columns to 1.

Will this work with any theme?

Yes, the shortcode and block methods work with any theme that supports Gutenberg blocks. The custom code method may require adjustments if your theme uses custom hooks, but the basic filter should work in most cases.

How do I show more than 12 products?

Change the limit attribute in the shortcode to a higher number, or remove it to show all products. In the block, increase the “Products per page� number. For the custom code, change the posts_per_page value.

Can I sort the list alphabetically?

Yes. Use the orderby attribute in the shortcode: [products columns="1" orderby="title" order="ASC"]. In the block, look for the “Sort by� dropdown and choose “Title�.

Why are the product images so large in the list?

Single column layouts often display larger images. You can control the image size by adding CSS, or by using the columns attribute (but you want 1). Alternatively, use the limit to reduce the number of products shown, so the page doesn’t get too long.

Does this affect my store’s performance?

Displaying many products in a list (especially with large images) can slow down the page. Limit the number of products per page, enable lazy loading for images, and use a caching plugin to improve performance.

Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.