Embed WordPress Posts & WooCommerce Products

Embed WordPress Posts & WooCommerce Products
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 PublishPress Checklists plugin. It will help you create high-quality WordPress content.

If you enjoyed this tutorial, check out WooCommerce Explained, the comprehensive (and best-selling) introduction to WooCommerce.

Instructor

  • 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.

0 0 votes
Blog Rating
Subscribe
Notify of
8 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
funkygorilla

Hi Steve,

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.

Thanks

Simon

steve

@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.

Laura Olmedo

Dear Steve,

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!

Andrew

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.  🙂

robbieadair

Thanks Andrew for the feedback and extra tip for our readers!

JON DUVALL

Is it possible to embed complete category products using an I frame? Thanks and great article!

Leighton Blackman

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.

Bahram Shirazi

Thanks for this post.  Any idea why the Woocommerce product image doesn’t carry through to new site?

8
0
Would love your thoughts, please comment.x
()
x