How to Use WooCommerce Product Shortcodes

Managing your WooCommerce website can feel overwhelming, but that’s where WooCommerce shortcodes come in. These handy tools let you display products, categories, or custom layouts without needing advanced coding skills.

WooCommerce product shortcodes significantly enhance website efficiency by simplifying how you showcase your products. With just a snippet of code, you can showcase your products exactly how and where you want them. Whether you’re creating custom pages or optimizing layouts, these shortcodes simplify the process and save you time.

In this guide, I’ll show you how to use WooCommerce product shortcodes effectively. My goal is to help you find quick, clear solutions that you can implement immediately. Let’s dive in and make managing your WooCommerce store easier than ever!

What is a WooCommerce Product Shortcode?

A WooCommerce product shortcode is a small piece of code you can add to your website to display specific products or categories dynamically. Think of it as a shortcut that tells your site what to show and where to show it. With shortcodes, you don’t need to manually design product displays or rely on complex plugins.

These shortcodes are incredibly versatile. You can use them to showcase individual products, highlight bestsellers, or even create a custom category page. For instance, if you’ve written a blog post about a specific product, adding a WooCommerce product shortcode can seamlessly link readers to the product directly within the post.

Common use cases include:

• Creating tailored landing pages with specific product selections.
• Embedding featured products in blog articles or pages.
• Displaying product categories to guide customer navigation.

Here’s an example of a WooCommerce product shortcode:

• To display a single product: [product id="123"] Replace 123 with the ID of the product you want to showcase. This shortcode will display the product’s image, price, and “Add to Cart” button directly on the page.

Shortcodes are especially helpful if you want a professional look without needing to tweak your website’s code. They save time, simplify workflows, and let you manage your WooCommerce store with ease.

Basic WooCommerce Product Shortcode Examples

Shortcodes make it easy to showcase your products exactly how you want. Below, I’ve outlined a few common examples to help you get started:

Display a Single Product

• Shortcode: [product id="123"]
• Replace 123 with the product ID. This will show the product’s image, name, price, and an “Add to Cart” button.

To find a product’s ID, go to your WooCommerce dashboard. Navigate to Products > All Products and hover over the product name. You’ll see the product ID appear as a number in the URL preview or just beneath the product name.

Display Multiple Products

• Shortcode: [products ids="123,124,125"]
• List the product IDs separated by commas. This is great for featuring a collection of specific items.

Display Products from a Specific Category

• Shortcode: [product_category category="category-slug"]
• Replace category-slug with the actual slug of the category you want to display. Perfect for creating category-specific pages.

Display Recently Added Products

• Shortcode: [recent_products per_page="4"]
• Adjust the per_page attribute to set how many products to show. This works well for highlighting new arrivals.

These examples cover the basics, but you can customize them further to match your needs.

Advanced Customizations with WooCommerce Product Shortcodes

Once you’ve mastered the basics of WooCommerce product shortcodes, it’s time to explore advanced customizations. WooCommerce offers an array of shortcodes to refine how your products are displayed. Here’s a comprehensive guide to advanced shortcodes and attributes:

Key Product Shortcodes

• Featured Products: [featured_products per_page="4" columns="2"] Displays up to four featured products in two columns.
• Products on Sale: [sale_products per_page="6" columns="3"] Highlights products that are currently discounted.
• Best-Selling Products: [best_selling_products per_page="5" columns="1"] Shows your store’s most popular products.
• Top-Rated Products: [top_rated_products per_page="3" columns="3"] Displays products with the highest customer ratings.
• Products by Attribute: [product_attribute attribute="color" filter="red"] Retrieves products filtered by specific attributes like color.

Product Display Attributes

To refine your product displays further, WooCommerce shortcodes include several attributes:

• limit: Sets the number of products to display (e.g., limit="10").
• columns: Defines the number of columns for layout (e.g., columns="3").
• orderby: Sorts products by options like title, date, rating, or popularity.
• order: Specifies ascending (ASC) or descending (DESC) order.
• category: Filters products by category slug (e.g., category="shoes").
• on_sale: Displays only products that are on sale.

Examples with Combined Attributes

• Show Products by SKU: [products skus="SKU123,SKU124"] Displays specific products using their SKUs.
• Paginate Products: [products limit="6" paginate="true"] Adds pagination to the product display.
• Randomized on Sale Products: [products limit="4" orderby="rand" on_sale="1"] Shows products in a random order.

Integration with Page Builders

WooCommerce shortcodes integrate with page builders like Elementor. Add a shortcode widget, paste the code, and customize the layout using the builder’s design tools. For instance:

• Use [featured_products per_page="4"] in a widget to highlight featured items.
• Customize styles to align with your site’s branding.

Common Issues and Troubleshooting

Errors in Shortcode Syntax

Using incorrect syntax is a common issue when working with WooCommerce product shortcodes. Double-check the following:

• Ensure brackets are properly closed, e.g., [product id="123"].
• Attributes must be enclosed in quotes ("), not apostrophes (').
• Avoid spaces in attribute values, such as [product_category category="shoes-accessories"].

If a shortcode doesn’t render correctly, review your syntax carefully. Most issues stem from small mistakes that are easy to fix.

Missing or Incorrect Product IDs

A missing or incorrect product ID can cause a shortcode to display nothing. To find a product ID:

1. Go to WooCommerce > Products in your dashboard.
2. Hover over the product name to see its ID in the URL or tooltip.

Make sure the ID matches the product you want to display. For example, [product id="567"] will only work if 567 is a valid product ID.

Compatibility Issues with Themes or Plugins

Sometimes, themes or plugins can interfere with shortcodes. To troubleshoot:

• Switch to a default theme (like Storefront) to see if the issue persists.
• Deactivate plugins one by one to identify conflicts.
• Ensure your WooCommerce plugin is updated to the latest version.

Solutions for Common Problems

• Blank Pages: Ensure the shortcode is placed in a text block or shortcode block, not HTML.
• Products Not Displaying: Check that the products are published and not set as drafts.
• Styling Issues: Use CSS or your theme’s settings to adjust layout conflicts.

By addressing these issues step by step, you can resolve most shortcode-related problems quickly.

Conclusion

We’ve explored how to effectively use and customize WooCommerce product shortcodes to enhance your online store. These tools provide incredible flexibility, whether you’re displaying featured products, filtering by attributes, or creating dynamic layouts.

Take some time to experiment with shortcodes and discover new ways to optimize your store’s performance. For more WooCommerce tips and tricks, explore our blog and take your online store to the next level!