How to Display a WooCommerce Shop Category on a Page (Easy Read more about How To Build Shopify Store Woocommerce Guide!)
Want to showcase specific product categories on dedicated pages within your WooCommerce store? Perhaps you want a page highlighting “New Arrivals” or a curated selection of “Summer Essentials”? You’re in the right place! This guide will walk you through several straightforward methods to achieve this, even if you’re a WooCommerce newbie.
Why feature categories on dedicated pages?
Think about it: users often arrive on your site with a specific goal in mind. Instead of forcing them to browse your entire catalog, you can present relevant categories upfront. This provides a smoother, more intuitive shopping experience, leading to:
* Increased conversions: Directing users to what they’re looking for faster.
* Improved navigation: Making your website easier to explore.
* Better SEO: Dedicated category pages can rank higher in search results for specific keywords. Imagine someone searching for “organic dog food” and landing directly on your curated “Organic Dog Food” category page!
Method 1: Using the WooCommerce Shortcode
The easiest and most common way to display a category on a page is by using a WooCommerce shortcode. Shortcodes are little snippets of code that tell WordPress to execute a specific function. WooCommerce provides a built-in shortcode specifically for displaying product categories.
Here’s how to use it:
1. Identify the Category Slug:
- Go to Products > Categories in your WordPress admin area.
- Hover over the category you want to display (e.g., “T-shirts”).
- Look at the URL in the bottom left of your browser. You’ll see something like `…taxonomy=product_cat&tag=t-shirts&post_type=product`. The category slug is the value after `tag=`, so in Read more about How To Make Woocommerce Shop Page this case, it’s `t-shirts`. Pay close attention to spelling and capitalization!
- Go to Pages > Add New or edit an existing page.
- In the page editor, insert a shortcode Read more about Woocommerce How To Link Image With Item block (Gutenberg editor) or use the classic editor to paste the following shortcode:
2. Create or Edit a Page:
3. Insert the Shortcode:
- Replace `”your-category-slug”` with the actual category slug you identified in step 1. For our T-shirts example, it would be:
4. Save and Preview:
- Save your page and preview it. You should now see all the products from the “T-shirts” category displayed on that page.
Understanding Additional Shortcode Attributes:
The `` shortcode has optional attributes to customize the display:
* `columns`: Sets the number of columns for product display. For example, `columns=”3″` will display products in three columns.
* `per_page`: Determines how many products to display per page. `per_page=”12″` will show 12 products.
* `orderby`: Controls the product sorting, example: `orderby=”date”` will order by the date
* `order`: Controls the sort order (ascending or descending), example: `order=”ASC”` will order from oldest to newest.
Example with Attributes:
To display the “T-shirts” category with 4 columns and 8 products per page, sorted by price from lowest to highest, the shortcode would be:
Method 2: Using a Page Builder (Elementor, Beaver Builder, etc.)
If you’re using a page builder like Elementor, Beaver Builder, or Divi, you’ll likely have dedicated WooCommerce elements that offer more visual control. While each page builder is slightly different, the general principle is the same:
1. Edit the Page with Your Page Builder: Open the page you want to edit using your page builder.
2. Find the WooCommerce Product Element: Look for an element related to “Products,” “WooCommerce Products,” or something similar. Elementor, for instance, has a “Products” widget.
3. Configure the Element: Drag the product element onto your page. Within the element’s settings, you should find an option to filter products by Check out this post: How To Connect My Woocommerce With Shipping Providers category. Select the desired category (e.g., “T-shirts”) from the dropdown menu. You’ll also be able to control the layout, number of columns, and other display options visually.
4. Save and Preview: Save your changes and preview the page.
Real-World Example with Elementor:
In Elementor, you might use the “Products” widget, select “Category” as the query type, and then choose “T-shirts” from the category dropdown. You can then visually adjust the number of columns, pagination, and other settings directly within the Elementor interface.
Method 3: Customizing with Code (For Advanced Users)
If you’re comfortable with PHP and WordPress theming, you can directly customize your theme files to display categories. Be extremely careful when editing theme files, as errors can break your site! It’s best to use a child theme to avoid losing changes during theme updates.
1. Create a Child Theme (Highly Recommended): Create a child theme for your current WordPress theme. This prevents your customizations from being overwritten when the parent theme is updated.
2. Edit Your Theme’s `functions.php` File (in the Child Theme): Add the following code to your `functions.php` file. This code creates a custom shortcode called `my_custom_category_display`:
'', 'columns' => '4', 'per_page' => '12', ), $atts );
$category = sanitize_title( $atts[‘category’] ); // Sanitize the category slug
$args = array(
‘post_type’ => ‘product’,
‘posts_per_page’ => intval( $atts[‘per_page’] ),
‘product_cat’ => $category,
‘columns’ => intval( $atts[‘columns’] ),
);
$loop = new WP_Query( $args );
if ( $loop->have_posts() ) {
ob_start(); // Start output buffering
echo ‘
- ‘;
while ( $loop->have_posts() ) {
$loop->the_post();
wc_get_template_part( ‘content’, ‘product’ );
}
echo ‘
‘;
wp_reset_postdata();
return ob_get_clean(); // Return the buffered output
} else {
return ‘
No products found in this category.
‘;
}
}
add_shortcode( ‘my_custom_category_display’, ‘my_custom_category_display_shortcode’ );
3. Use the Custom Shortcode on Your Page:
- Now you can use the shortcode `[my_custom_category_display category=”t-shirts” columns=”3″ per_page=”9″]` on any page to display the “T-shirts” category with 3 columns and 9 products per page.
Important Considerations for the Code Method:
* Sanitization: The code includes `sanitize_title()` to sanitize the category slug. This helps prevent potential security issues.
* Error Handling: The code includes a check to see if any products are found in the category and displays a message if none are found.
* Theme Compatibility: This code relies on WooCommerce’s template structure. It *should* work with most themes, but you might need to adjust it slightly for specific themes.
* Caching: If you’re using a caching plugin, you might need to clear the cache after making changes to your `functions.php` file.
Conclusion
Displaying WooCommerce categories on dedicated pages is a fantastic way to improve your store’s navigation and boost sales. Whether you choose the simple shortcode method, the visual power of a page builder, or the flexibility of custom code, these techniques empower you to curate product selections and create a more engaging shopping experience for your customers. Remember to choose the method that best suits your technical skill and website setup. Good luck!
