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:
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.
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.
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.
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:
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:
How do the embeds work?
They use iframes to show the content. Here’s an example of the embed code:
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.
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: