Skip to content 
Did you know that 75% of consumers judge a company’s credibility by its site design?
In other words, a typical cookie-cutter website design isn’t going to cut it. If you want to attract 3/4th of your prospects, your WooCommerce store needs to be unique, and embedding multiple products on any page is one way to make that happen.
A beautifully designed website with strategically placed products can make your store look more professional. With the WooCommerce shop page shortcode or products shortcode, you can display products directly on your blog posts, landing pages, or promotional content.
Let’s find out how you can do this.
Why Add Products to Standard WordPress Pages?
You can add products to any page on your website, whether it’s a blog or a landing page. Most brands do this to help boost sales. Here’s how:
To Promote Products Contextually in Blog or Content
Your blog is one of the best places to embed your products because it makes shopping feel natural. Let’s say you run a food blog; adding cookware or spices alongside recipes can help your readers feel engaged and encourage them to buy your products.
Likewise, if your blog is about gardening, you can use the WooCommerce products shortcode to add multiple gardening products, plants, and seeds in your post. It’s all about promoting the right products so shopping feels natural.
Useful for Building Custom Landing Pages
People love good-looking landing pages. In 2024, the average conversion rate for a landing page was around 6.6% across all industries.
With the WooCommerce shop page shortcode, you can display specific product listings on your landing pages. This strategy leads your website visitors straight to checkout, increasing the chances of conversion.
Perfect for Single-Product Stores
Many WooCommerce websites are single-product stores. It can be a subscription-based or any other product. Instead of building a full-pledged online store, you can use the WooCommerce shop page shortcode to embed products on the website or blog. It’s a clean, simple, and focused approach for driving sales.
Now that you know where and why you should embed products, let’s learn how you can do it. There are two ways you can add products to your WooCommerce website.
Method 1: Embed a Single Product Using WooCommerce Products Shortcode
Using the WooCommerce products shortcode is the easiest way to embed a single product on your landing page or blog post. Here’s the basic syntax:
[products ids=”123″]
Replace “123” with your product ID, and it will display the product with its title, price, and Add to Cart button. You can customize the details according to your specific requirements.
To do this:
- Log in to your WordPress dashboard.
- Go to Products > All Products and hover over the product name to see its ID.
- Copy the ID number.
- Open your post or page in Gutenberg or the Classic Editor.
- Paste the shortcode [products ids=”123″] where you want the product to appear.
- Save or update the page.
You can use a plugin like YITH WooCommerce Quick View to make shopping more intuitive. It allows your readers to preview product details, images, and Add to Cart buttons in a pop-up without leaving the page. This keeps your readers engaged, especially when you embed products in blog posts or on landing pages.
Method 2: Add Multiple Products on a Page Using Shop Page Shortcodes
You can use the WooCommerce shop page shortcode to show multiple products at once. The basic syntax looks like this:
[products limit=”6″ columns=”3″ category=”t-shirts”]
Using this shortcode, you can display six products in three columns. You can adjust the limit, columns, and categories to match your store’s needs.
Here’s how you can add multiple products:
- Go to your WordPress dashboard and open the page or post where you want products to appear.
- In the Gutenberg editor, add a Shortcode block (or paste directly into the Classic Editor).
- Enter the shortcode, for example: [products limit=”6″ columns=”3″ category=”t-shirts”]
- Update or publish the page.
- Refresh your site to see the products displayed in a clean, grid-based layout.
Additionally, shop page shortcodes allow you to filter products by tags or attributes in WooCommerce, giving you more control over what your customers can see.
A few examples include:
- By Category: [products category=”hoodies”]
- Best-Sellers: [best_selling_products limit=”4″]
- Featured Items: [featured_products limit=”3″]
- On-Sale Items: [sale_products columns=”2″]
The second method is perfect for adding products to blog posts, landing pages, or even standalone shopping pages outside of your main WooCommerce website. Check out this link to see more shortcode examples like these.
Advanced Usage: Embed Special Product Layouts with Shortcodes
While the above two methods are easy to use, they don’t offer much in terms of customization. But when used correctly, shop page shortcodes let you embed products in special layouts on the same page of your WooCommerce site.
Combine Product Grid and Single Product View
One way to do this is to use different WooCommerce product shortcodes on the same page for varied display. For instance, you can use the following shortcode to combine a product grid and a single product view on the same page.
[products limit=”4″ columns=”4″ category=”t-shirts”]
[products ids=”123″]
With this shortcode, you can display a grid of t-shirts and then a specific product beneath it. You can further customize these layouts with styling or builder plugins like Elementor to promptly attract your readers.
Add Product Blocks in Page Builders
If your site uses a page builder, WooCommerce integrates seamlessly with most of them, giving you more flexibility in how products are displayed. For example, with Elementor, you can use WooCommerce widgets like “Products,” “Product Grid,” or “Upsells” to showcase items in a visually engaging way.
With Divi, you can insert the WooCommerce module and select specific products or categories to display. Similarly, Beaver Builder and other popular builders offer integration modules that make it easy to embed products.
If you are using the Gutenberg block editor, WooCommerce also provides dedicated blocks such as Hand-Picked Products, Products by Category, On Sale Products, and Best Selling Products.
These blocks make it simple to visually add and customize product displays without writing any code. Whether you prefer a page builder or Gutenberg, this approach gives you greater control over design and layout, making it especially useful for creating high-converting landing pages.
Use a Product Slider or Grid Plugin
Sometimes, you may want to display your products in a more engaging way than just a simple grid. This is where product sliders or grid plugins come in handy. With these tools, you can create sliders, carousels, or styled product grids that look more dynamic and catch the customer’s eye.
Popular options include WooCommerce Product Carousel Slider, Smart Product Viewer, and Essential Add-ons for Elementor (Pro). These plugins make it easy to highlight multiple products in an attractive layout, helping you draw more attention and encourage clicks.
Keep Your Design Responsive
While embedding products gives you an edge, they should look great on all devices, including smartphones and tablets. So, when you embed products, be sure to:
- Use columns wisely. For example, keeping the number of columns to two or switching to a list view helps display your products correctly on smaller devices like phones.
- Likewise, adding some margins and padding keeps the layout readable. So, adjust the spacing around product blocks accordingly.
- Finally, test your product layouts across all devices. Testing helps you see how your layouts actually look on smartphones, tablets, and laptops.
With these tips in mind, you can create a more appealing product layout on your landing pages or blog posts.
Bonus Tip: How to Export Individual Products in WooCommerce
WooCommerce allows you to export individual products to another site or for reuse. You can do this easily by using their Product ID or by utilizing a custom export plugin.
Plugins like Import Export Product CSV Suite let you export detailed product information into a CSV file. You can export titles, prices, descriptions, and SKUs in just a few clicks into another store or system.
It’s particularly helpful for staging or for external use of products that have been embedded into various pages across your site. It maintains consistency across different platforms.
Common WooCommerce Shop Page Shortcode Errors and How to Fix Them
While WooCommerce shop page shortcodes make it easy for your customers to shop, they sometimes don’t work properly. Sometimes they fail to display the products or end up showing the wrong products.
Here’s how you can fix them:
Shortcodes Not Rendering
In some cases, WooCommerce shortcodes fail to display, which is typically due to a conflict with the theme or another plugin. To fix this, make sure the shortcode is correctly formatted and doesn’t have extra spaces or syntax issues.
Common syntax or formatting issues include:
- Confusing curly quotation marks (“ ”) with straight quotation marks (” “) in the WooCommerce shop page shortcode. Make sure to use straight quotation marks for all the shortcodes.
- Using wrong brackets like {123} or (123). Always use the right square brackets [123] for the shortcodes.
- Adding extra space, such as [ products ids=”123″] instead of [products ids=”123″]. Double-check all your WooCommerce product shortcodes.
But if the conflict between a theme or plugin is leading to this issue, first, deactivate all your plugins except for WooCommerce. Reactivate them one by one to see which one is causing a problem with the shortcodes.
If it’s the theme, test your shop page shortcodes with a default WooCommerce theme like Astra or Divi. Switch to a lightweight, speed-optimized theme that lets you add product shortcodes without any hiccups.
FAQs About WooCommerce Shop Page Shortcodes
What is a WooCommerce shop page shortcode?
WooCommerce shop page shortcodes are small code snippets that let you display specific store elements like products anywhere on your WordPress site. You can customize them to show specific products, categories, or even special items like best-sellers or featured products.
How do I use the WooCommerce products shortcode to show specific items?
To display specific products, you can use the shortcode followed by the product IDs, such as [products ids=”101,102″]. This will show only the products with the IDs 101 and 102. You can also adjust styling, spacing, and other layout elements.
Can I show only products from a specific category?
Yes, you can filter products by categories using the category attribute. For example, this shortcode [products category=”hoodies”] will help you display all products listed under the “hoodies” category.
Why are my shortcodes not working in Elementor or Gutenberg?
Sometimes, your product shortcodes may not work as intended, and it could be due to many reasons. Here’s a list of a few:
- Caching: Clear the cache to ensure you’re seeing the most recent updates.
- Missing Product IDs: Double-check that the product IDs are correct and formatted correctly.
- Plugin Conflicts: Disable plugins one by one to identify the issue.
- Incompatible Themes: Test your shortcodes with a default theme like Store theme.
How do I export individual WooCommerce products?
You can export individual products using WooCommerce’s built-in CSV exporter, which is available in Tools > Export. If you want more control, use plugins like Import Export Product CSV Suite.
Can I embed WooCommerce products on custom landing pages?
Yes, you can embed WooCommerce products on custom landing pages using shortcodes. They can be used in page builders like Elementor or Beaver Builder, or directly in static pages.
Start Using WooCommerce Product Shortcodes to Boost Sales
WooCommerce shop page shortcodes are the easiest way to boost your sales. Embedding products strategically on your blog posts, landing pages, or custom content makes it easier for customers to shop for what they want.
But when doing so, experiment with placing products in different sections of your site to see what resonates best with your target audience. Try embedding products in relevant blog posts, targeted landing pages, or as featured items on custom pages. The more personalized your layout is, the more likely your customers are to buy.
CoSpark is here to help you. We’re a leading WooCommerce development company that specializes in development, maintenance, and migration. Contact us now to see how we can help you customize your store.
