WooCommerce Social Media Icons on Product Pages
Overview
The Social Media Icons embed is a row of linked social logos (Facebook, Instagram, X…) you place on the product page to grow your following. It's one of the three presets of the icon-row type (alongside Payment Icons and Trust Badges) — the difference is that each icon uses a Link action pointing to your profile.
Use this social media icon plugin to add WooCommerce social media icons, social icons product page links, WooCommerce social profile links, and add Instagram icons WooCommerce shoppers can open without leaving the product context.
How it works
You want shoppers to follow you after they buy. Below the product details you add a tidy row of Facebook / Instagram / X icons, each linking to your profile in a new tab — turning one-time buyers into followers.
Embeds are available in the Pro version.
Step-by-step setup
1. Pick the Social Media Icons type
Open Sale Badges → Embeds → Add New, give the embed a Name, and turn Status on. Under Embed Type choose Social Media Icons (it comes pre-filled with Facebook, Instagram, and X).
2. Set the icons and links
On the Content tab, each icon links to a profile:
- Icon — Change to a built-in logo or Upload your own.
- Add Action — Link, then enter the Link URL (e.g.
https://www.facebook.com,https://www.instagram.com,https://www.twitter.com). - Top Text / Bottom Text — optional labels (usually left blank for social icons).
Use Add New Badge to add more networks and Delete to remove one.
3. Choose the layout & style
On the Theme & Styles tab, keep the Layout on Style 1 — badges always visible, then style the row: Icon Size (desktop/mobile), Badge / Header Text Position (Left / Center / Right), a Border (style, color, size), Border Radius, a Hover Effect (e.g. Skew), padding, and Open New Tab so links don't navigate away from the store.
4. Place it, target, then Save
On the Targeting tab, tick Custom Position and set Position on Product Page (e.g. After CSS selector) with a CSS Selector (default form.cart). Pick the Devices, add Products rules (e.g. All Products), then click Save.
Ordering multiple embeds
When several embeds share the same position (here a Feature Banner, a payment row, and this social row — all After form.cart), the Order column on the Embeds list sets the sequence — lower numbers appear higher (Banner 0, Payment 1, Social 2).
🧪 Example configuration
The row shown in the screenshots:
| Setting | Value |
|---|---|
| Type | Social Media Icons |
| Icons / Links | Facebook, Instagram, X — each Link to its profile |
| Layout | Style 1 — badges always visible |
| Icon size | 40 px |
| Border / Radius | Solid 2 px · radius 14 |
| Hover Effect | Skew · Open New Tab |
| Placement | After form.cart |
| Targeting | All Products |
What customers see
A clean, bordered row of social logos beneath the product details — one tap to follow you on their favourite network, opened in a new tab so they don't lose their place.
Related
The same icon-row type also powers the Payment Icons and Trust Badges presets.
Next Steps
Frequently Asked Questions
How do I add social media icons to a WooCommerce product page?
Create an embed, choose Social Media Icons, select or upload icons, set each Add Action to Link, enter the profile URL, and configure placement and targeting.
Can social media links open in a new tab?
Yes. Enable Open New Tab for the link action so shoppers can visit your social profile while keeping the product page available.
Which social networks can I display?
The preset includes Facebook, Instagram, and X. You can use the built-in icon library, upload another logo, add new rows, and remove icons you do not need.