How to display WooCommerce products/add to cart options on blog posts or pages?

  • Post category:WooCommerce
  • Post author:
  • Post last modified:June 23, 2021
  • Reading time:3 mins read

You have some products in your WooCommerce store, and you want visitors to buy any of the products from your blog posts or non-WooCommerce pages without visiting any of the WooCommerce pages.

Typically, for WooCommerce products, you need to visit the product page/product-category page/shop page to add the product to the cart or check out the product directly. Fortunately, WooCommerce has some shortcode which we can utilize to display products or buying option any pages. So, let’s see how to do this.

Display products/buying options on blog posts or pages

STEP: 1

Copy the product ID which you want to display on any blog post or page. You will find the product ID on the product lists page.

Under All Products, move the mouse pointer on the product you want to get the ID of.

You can see the Product ID under the product name.

Find Id Of Woocommerce Product
Find ID of WooCommerce Product

STEP: 2

Open the blog post in Edit mode or the page where you want to display the product or add to cart option for the product. If the page has been designed with any builder like Elementor, then edit it with Elementor.

STEP: 3

Add a shortcode block.

Adding Shortcode On Pages Or Posts
Add shortcode on pages or posts

To display the product type [product id=”76″] (replace the numeric ID with your product’s ID) and save the page.

List Single Product On Pages Or Posts
List Single product on pages or posts

To display only the add to cart button without displaying the product name or any other details, type [add_to_cart id=”76″] (replace the numeric ID with your product’s ID) into the shortcode block and save the page.

Display Add To Cart On Pages Or Posts For A Product
Display Add to cart on pages or posts for a product

Also, you can visit this link for more shortcodes available to use with WooCommerce.
See this guide if you want to remove the product/shop/category term for WooCommerce URLs.

That’s it. Now visitors can buy the product right from the pages or posts. It is beneficial when you have designed a page for a product and do not want the visitors to check the single product page for that product.

If you want to redirect the buyers to the Cart page when they click on the add to cart button, you need to do it from WooCommerce Settings.

  • Open the WooCommerce Settings page.
  • Go to the Products tab.
  • Check the “Redirect to the cart page after successful addition” option.
Redirect To The Cart Page After Successful Addition Woocommerce
Redirect to the cart page after successful addition

Let me know in the comment section if this guide was helpful for you. Your queries and suggestions are welcome.


Leave a Reply