How to Embed WordPress Posts and WooCommerce Products

| WordPress
WordPress and WooCommerce as oEmbed Providers

You probably know that WordPress makes it easy to embed social media in Posts and Pages.

But did you know that you can easily embed snippets from WordPress posts and WooCommerce products in other content, using just a URL?

Here's an overview of how WordPress allows you to share posts on other sites (and even your own site).

To get started, find the URL of any WordPress post or page and paste it into a WordPress content area:

Adding URLs to WordPress content

After a second or two, you'll see a preview appear with the title, image and short description. Along the bottom of the embed you'll also see the site icon, site name, number of comments and a sharing link.

oEmbed inside a WordPress post

When you publish that content, you'll see the embed appear. If you click anywhere on the embed, you will be taken to the full post on the original site.

An oEmbed iframe published on WordPress

WooCommerce and oEmbed

Not only the WooCommerce core, but also major plugins can share content. Here's an example from the WooCommerce at French Today, showing the price and rating, plus "Buy Now" and "Read More" buttons.

A WooCommerce embed in WordPress

This WooCommerce integration works wonderfully well. It can use features from 3rd party plugins, such as updating the price if you show different currencies to visitors from different countries:

A WooCoomerce embed with localized pricing

When you click on the items inside the embed, you'll be sent to the shopping cart. Here's what happens when you click "Buy Now" in the embed shown above:

A WooCommerce cart, after using oEmbed

How do the embeds work?

They use iframes to show the content. Here's an example of the embed code:

WordPress oEmbed code sample

Notice the sandbox="allow-scripts" line. For security, embeds are placed in a sandboxed iframe.

You can use your theme to redesign the iframe that your site provides. Use the embed_head and embed_footer functions to add your custom code at the beginning and the end of the template.

One quick and easy customization you can make is to control the icon that appears in the bottom-left corner of embeds. Go to Themes > Customize > Site Identity and upload an image that's square, and at least 512px wide and tall.

Using the WordPress site icon feature for oEmbed

Finally, it's worth noting that you can get an old-fashioned HTML embed for WordPress posts. Click on the sharing icon in the bottom-right corner of embeds and you'll see the "HTML Embed" option:

WordPress HTML Embed
P.S. If you're a heavy WordPress or WooCommerce user, check out the Content Checklist and WooCommerce Checklist. They'll help you create high-quality WordPress content.

About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.