How to Display WooCommerce Archive Code on Another Page (The Easy Way!)
Want to show your WooCommerce product categories or tags in a custom location, outside the standard shop page? Maybe you want to feature specific categories on your homepage or create a curated collection on a landing page? This article will guide you through how to display WooCommerce archive code on another page, even if you’re a WordPress newbie! We’ll break down the methods into easy-to-understand steps with real-life examples.
Think of it this way: your WooCommerce shop page is like your main store. But sometimes you want to create a special display in a different part of your shop – like a “Summer Deals” section near the entrance or a “Best Sellers” showcase by the checkout counter. Displaying the archive code lets you achieve exactly that!
Why Display WooCommerce Archive Code on Another Page?
There are several reasons why you might want to do this:
- Better User Experience: Highlighting specific product categories or tags on your homepage can guide users directly to what they’re looking for, improving their shopping experience.
- Targeted Marketing: Creating landing pages focused on particular categories allows for more targeted marketing campaigns and better conversion rates. Imagine a landing page solely for “Yoga Mats” linked directly from your yoga-themed ads!
- Custom Design: WooCommerce themes often have limitations on the shop page layout. Using custom code allows you to design the display of your categories and tags to perfectly match your brand.
- Enhanced SEO: Optimizing the display of product categories and tags on relevant pages can improve your website’s search engine ranking for those keywords.
Method 1: Using Shortcodes (Easiest for Newbies)
Shortcodes are your friends! They are small pieces of code wrapped in square brackets that perform a specific function when placed on a page or post. While WooCommerce doesn’t natively provide shortcodes for displaying archive code directly, we can use plugins to achieve this easily.
Option 1: WooCommerce Shortcodes Plugin:
Many plugins offer WooCommerce shortcodes that extend the functionality of the default WooCommerce setup. Search for “WooCommerce shortcodes” in the WordPress plugin repository. Read reviews and choose a reputable plugin.
Example Scenario: Let’s say you install a plugin called “WooCommerce Shortcodes Pro” (this is just an example, find one you like!). This plugin provides a shortcode `[product_category category=”yoga-mats” columns=”3″]`
1. Install and activate the plugin.
2. Create a new page (e.g., “Yoga Essentials”).
3. Add a Shortcode block to your page (in the WordPress editor, search for “Shortcode” when adding a block).
4. Paste the shortcode into the block. Replace `”yoga-mats”` with the actual slug (URL-friendly name) of your category and adjust `columns` to your desired layout.
5. Publish the page.
That’s it! The plugin handles the heavy lifting, and you have a beautiful display of “Yoga Mats” on your new page.
Option 2: Using a Shortcode Ultimate-Type Plugin
Plugins like “Shortcode Ultimate” are great for expanding features using shortcode. They provide a wide array of options to build your website.
Example Scenario
1. Install and activate the plugin.
2. Create a new page (e.g., “Sale Items”).
3. Add a Shortcode block to your page (in the WordPress editor, search for “Shortcode” when adding a block).
4. Use the WooCommerce shortcode provided to display your desired feature.
5. Publish the page.
Method 2: Using PHP Code (For More Advanced Users)
If you’re comfortable with PHP, you can directly embed the WooCommerce archive code into your theme files or use a code snippet plugin. Important: Back up your website before making any changes to your theme files!
Example: Displaying Products from a Specific Category on Your Homepage
Let’s say you want to display the latest products from the “Coffee Beans” category on your homepage.
1. Locate your theme’s homepage template file. This might be `front-page.php`, `home.php`, or a custom template.
2. Insert the following PHP code into the template file, where you want the product display to appear:
'product', 'posts_per_page' => 8, // Number of products to display 'product_cat' => 'coffee-beans' // Slug of your product category );
$loop = new WP_Query( $args );
if ( $loop->have_posts() ) {
echo ‘
- ‘;
while ( $loop->have_posts() ) {
$loop->the_post();
wc_get_template_part( ‘content’, ‘product’ );
}
echo ‘
‘;
} else {
echo ‘
No products found in this category.
‘;
}
wp_reset_postdata();
?>
Explanation:
- `$args`: This array defines the parameters for the query.
- `’post_type’ => ‘product’`: Specifies that we’re retrieving products.
- `’posts_per_page’ => 8`: Sets the number of products to display.
- `’product_cat’ => ‘coffee-beans’`: Filters the products to only show those in the “coffee-beans” category (replace this with your category’s slug).
- `$loop = new WP_Query( $args )`: Creates a new query based on the specified arguments.
- `if ( $loop->have_posts() )`: Checks if there are any products in the category.
- `while ( $loop->have_posts() )`: Loops through each product.
- `wc_get_template_part( ‘content’, ‘product’ )`: Displays the product using WooCommerce’s standard product template. This ensures the display is consistent with your theme.
- `wp_reset_postdata()`: Resets the global post data to prevent conflicts with other loops on the page.
Important Notes:
- Category Slug: The `product_cat` parameter requires the *slug* of your category, not the name. To find the slug, go to Products > Categories in your WordPress admin area, hover over the category, and look at the URL in your browser’s status bar. The slug is the part after `tag=`.
- Customization: You can customize the `$args` array to further control the display. For example, you can sort the products by price, date, or popularity. Refer to the WordPress Codex and WooCommerce documentation for available parameters.
- Code Snippet Plugins: If you don’t want to edit your theme files directly, use a code snippet plugin like “Code Snippets”. This allows you to add PHP code to your site without the risk of breaking your theme. Make sure you set the location where the code will execute (e.g. front-end).
- Theme Updates: If you directly edit your theme files, your changes will be overwritten when you update the theme. Consider using a child theme to prevent this.
Method 3: Using a Page Builder (If you use one)
Many popular page builders like Elementor, Beaver Builder, and Divi have WooCommerce modules that make it super easy to display product categories or specific products on any page.
Example using Elementor:
1. Edit the page with Elementor.
2. Search for the “Products” widget.
3. Drag and drop the widget onto your desired section.
4. In the widget settings, choose the “Category” filter and select the category you want to display.
5. Customize the layout and styling options to match your design.
Page builders offer a visual interface, making it easy to create custom product displays without writing any code.
SEO Considerations
When displaying WooCommerce archive code on other pages, keep SEO in mind:
- Use relevant keywords: In your page titles and descriptions, include keywords related to the product categories or tags you’re displaying.
- Optimize images: Use descriptive alt text for all product images.
- Internal linking: Link from your custom pages to other relevant pages on your website, including the main shop page and product detail pages.
- Mobile-friendliness: Ensure that your custom displays Read more about How To Remove Product Category Counts From Woocommerce are responsive and look good on all devices.
Conclusion
Displaying WooCommerce archive code on other pages opens up a world of possibilities for creating custom product displays, improving user experience, and boosting your SEO. Whether you choose the simplicity of shortcodes, the flexibility of PHP code, or the visual power of page builders, there’s a method that’s right for you. Remember to always back up your website before making any changes, and happy selling!
