Embed WordPress Posts & WooCommerce Products
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:
P.S. If you’re a heavy WordPress or WooCommerce user, check out the PublishPress Checklists plugin. It will help you create high-quality WordPress content.
This is a great post as at the moment it is the only thing I could find on how to customise the oEmbed footer. I have changed the site icon, but have you any other thoughts on how to add a contact us icon? I know you need to use embed_footer but I can find nothing at all on how to use this to just modify what is there already.
@funkygorilla Thanks. That might make a good follow-up tutorial. I don’t know the answer myself yet, but I’m interested to find out.
This is a godsend to me. I have clicked on the link French Today that you show and this is exactly what I need for my collaborators pages showing our agreed products. Thank you so much!
I have been a programmer, but not a web programmer, so this is too advanced for me. I got to this post thanks to someone I was asking for help as I am researching on API calls and I believe Worpdress has this tool and I need to activate it. I am familiar with API calls and I have seen the code but I have never implemented it. I have built my own site though but using plugins and playing a bit with the CSS and little more. But I like the site 🙂
So here are my hopeful questions if you could enlighten me in anyway, and appreciating I am talking to experts here.
– I have WordPress and Woocommerce and the second site has WordPress only, does the second site need woocommerce too ?
– Where do I embed the iframe code?
Happy to any link you know where I can keep reading, that would be more than great.
I am an entrepreneur, and try to figure things out myself before I see I really need to hire someone to help, mandatory by my cost control department (myself )!!! Thanks for your post and for your time!
Thanks for this post, it was really helpful as I was troubleshooting an issue on a client’s site — because the embeds previews weren’t actually loading. Turns out that the embed URL requests were returning a 404 response, which I verified by appending /embed/ to the end of the URL in the browser.
I re-saved the Permalink Settings (without making any changes), and they’re working again! Just thought I’d mention this in case anyone else runs into this issue. 🙂
Thanks Andrew for the feedback and extra tip for our readers!
Is it possible to embed complete category products using an I frame? Thanks and great article!
Hi, thanks for this – I was wondering if this could be extended to a video embed from the WP site? – I basically want to (O)embed a video from my WP blog into a site that supports OEmbed – I have been googling like mad and all I get is how to embed in WP form a provider – This is the closest I have come to an answer! – Thanks again.
Thanks for this post. Any idea why the Woocommerce product image doesn’t carry through to new site?