How to add Social Media Icons on Woocommerce Product Page – 6fc Live

Adding social media share buttons to your WooCommerce product pages, such as those for your store “My Shop” (from your “Blog Page” guide) featuring products like “Flying Ninja” (from your “Creating Products” guide), boosts brand awareness, drives traffic, and engages potential customers cost-effectively. The Sassy Social Share plugin, featured in the 6fc Live Educate WordPress video, simplifies this process by adding customizable social sharing icons. This guide details how to install, configure, and display social media icons on WooCommerce product pages, based on the video and enriched with web sources.

Sponsored Note: The video is sponsored by Appmaker, a plugin that converts WooCommerce sites into native Android/iOS apps. Get 30% off for the first 200 signups at appmaker.xyz (per video).

Why Use Sassy Social Share?

• Engagement: Encourages sharing on platforms like Facebook, Instagram, Twitter, and WhatsApp, increasing traffic by up to 20% (per web sources).
• WooCommerce Fit: Enhances product pages, complementing features like wishlists (from your “Wishlist” guide) or payments via Paytm (from your “Paytm” guide).
• Free Features: Customizable icons (shape, size, color), standard/floating interfaces, and 100+ platforms.
• Premium Features ($19+/year): Advanced analytics, custom icon designs, and shortcode support.
• SEO Benefits: Social shares improve visibility, aligning with Yoast SEO (from your “Yoast SEO” guide).
• Limitations: Free version lacks analytics; floating interface may distract on mobile if misconfigured.

Step 1: Install and Activate Sassy Social Share

1. Install Plugin:
   • In your WordPress dashboard, go to Plugins > Add New.
   • Search for Sassy Social Share (per video, by Heateor).
   • Click Install Now, then Activate (per video).
   • Alternative: Download from wordpress.org/plugins/sassy-social-share/ and upload via Plugins > Add New > Upload Plugin.
2. Verify Installation:
   • Confirm: Sassy Social Share appears under Settings in the sidebar (per video).

Step 2: Configure Standard Interface (Product Page Icons)

1. Access Settings:
   • Go to Settings > Sassy Social Share (per video).
2. Customize Icon Appearance:
   • Shape: Choose icon shape (e.g., Round, per video; options include Square, Rectangle).
   • Size: Adjust icon size (e.g., default, per video; range 16-64 pixels).
   • Logo Color: Set default and hover colors (e.g., default, per video; custom hex codes optional).
   • Leave as default for simplicity or customize as needed (per video).
3. Enable Standard Interface:
   • Under Standard Interface, check Enable Standard Sharing Interface (per video).
   • URL: Select “URL of the webpage where icons are located” (auto-detects product page URL, per video).
   • Title: Set a title (e.g., “Share this Product”, per video).
   • Social Platforms: Select platforms (e.g., Facebook, Instagram, Twitter, WhatsApp, per video).
     • Uncheck unwanted platforms (e.g., Pinterest, Reddit, per video).
   • Placement: Check WooCommerce Product Page under “Show sharing icons at” (per video).
     • Uncheck other locations (e.g., Homepage, Posts, per video).
   • More Icon: Uncheck to disable the “More” button (per video).
4. Save Changes:
   • Click Save Changes (per video).
5. Preview:
   • Visit a product page (e.g., yoursite.com/product/flying-ninja).
   • Confirm: Social share icons (e.g., Facebook, WhatsApp) appear on the product page (per video).

Step 3: Configure Floating Interface (Optional Sidebar)

1. Enable Floating Interface:
   • In Settings > Sassy Social Share > Floating Interface, check Enable Floating Sharing Interface (per video).
   • Placement: Select where the sidebar appears (e.g., left sidebar, per video).
   • Social Platforms: Reuse selections from Standard Interface or customize (e.g., Facebook, Twitter).
   • Appearance: Adjust shape, size, and colors (same as Standard Interface, per video).
2. Save Changes:
   • Click Save Changes (per video).
3. Preview:
   • Visit your homepage or any page (e.g., yoursite.com).
   • Confirm: Floating social icons appear as a sidebar (per video).
4. Disable if Unneeded:
   • Uncheck Enable Floating Sharing Interface to remove the sidebar (recommended for mobile optimization).

Step 4: Test and Optimize

1. Test Social Sharing:
   • Visit a product page in incognito mode (e.g., yoursite.com/product/flying-ninja).
   • Click each social icon (e.g., Facebook, WhatsApp).
   • Confirm:
     • Correct product URL and title are shared.
     • Icons display correctly (e.g., round, default colors).
   • Test floating sidebar (if enabled) on homepage or shop page.
2. Optimize Display:
   • Adjust icon size/shape for visibility (e.g., larger for mobile).
   • Reposition floating interface to avoid obstructing content (e.g., right sidebar).
   • Limit platforms to 3-5 for cleaner design (e.g., Facebook, Twitter, WhatsApp, per video).
3. Troubleshoot:
   • Icons Not Showing?:
     • Verify WooCommerce Product Page is checked in Standard Interface.
     • Ensure plugin is activated and settings saved.
     • Clear cache (from your “Backup and Migration” guide).
   • Incorrect URLs Shared?:
     • Check URL setting (should be “URL of the webpage where icons are located”).
     • Test with default settings.
   • Theme Conflicts?: Test with Astra or Storefront (from your “Astra” or “Creating Products” guides).
   • Contact support at heateor.com/support/ or check heateor.com/documentation/.

Step 5: Enhance with Integrations

1. Sassy Social Share Features:
   • Free:
     • 100+ social platforms, customizable icons (shape, size, color).
     • Standard and floating interfaces.
     • WooCommerce product page support.
   • Premium ($19+/year):
     • Share count analytics, custom icon uploads.
     • Shortcode support for custom placements.
     • Priority support.
   • Purchase at heateor.com/add-ons/.
2. WooCommerce Integration:
   • Enhance product pages with WooCommerce Wishlist (from your “Wishlist” guide).
   • Secure payments with Paytm, Razorpay, or UPI QR Code (from your “Paytm,” “Razorpay,” or “UPI Payment” guides).
   • Optimize images with Smush Pro for faster load times (from your “Image Optimization” guide).
   • Promote sharing with NotificationX or Icegram Express (from your “NotificationX” or “Announcement Bar” guides).
3. Custom Styling:
   • Add CSS in Appearance > Customize > Additional CSS:.heateor_sss_sharing_container { margin: 10px 0; } .heateor_sss_round { background: #f5f5f5; border-radius: 50%; } .heateor_sss_floating { z-index: 9999; } @media (max-width: 600px) { .heateor_sss_sharing_container { text-align: center; } }
   • Align with Astra’s design (from your “Astra” guide).
4. Alternative Plugins:
   • AddToAny: Lightweight, supports 100+ platforms (free, with premium analytics).
   • Social Warfare: Advanced sharing with analytics ($29+/year).
   • Monarch: Elegant icons, floating sidebars ($89/year with Elegant Themes).

Step 6: Best Practices

1. Social Media Setup:
   • Choose 3-5 key platforms relevant to your audience (e.g., WhatsApp for India, per video).
   • Use consistent branding (e.g., round icons, brand colors).
2. User Experience:
   • Place icons prominently on product pages (e.g., below “Add to Cart”).
   • Avoid floating sidebars on mobile to prevent clutter.
   • Test sharing on all selected platforms.
3. Testing:
   • Verify icons on multiple product pages (e.g., “Flying Ninja”).
   • Test in incognito mode and on mobile devices.
   • Check hover effects and color changes.
4. Performance:
   • Plugin is lightweight; cache pages with WP Rocket (from your “Backup and Migration” guide).
   • Optimize images with Smush Pro to complement sharing (from your “Image Optimization” guide).
   • Monitor load times with GTmetrix (target: 90+ score).

Pro Tips

• Engagement: Promote sharing with a Welcome Bar (from your “Sticky Menu” guide) or Join.chat for support (from your “Join.chat” guide).
• Security: Protect product pages with Wordfence or Limit Login Attempts Reloaded (from your “Malware Removal” or “Limit Login Attempts” guides).
• Compliance: Use GDPR Cookie Consent for tracking shares (from your “Cookie Notice” guide).
• SEO: Boost visibility with Yoast SEO and social shares (from your “Yoast SEO” guide).
• Backup: Save settings with UpdraftPlus (from your “Backup and Migration” guide).
• Export Content: Archive product pages with Aspose.Words Exporter (from your “Aspose Exporter” guide).

Congratulations!

You’ve added social media share icons to your WooCommerce product pages with Sassy Social Share and 6fc Live! Your store, like “My Shop,” now drives traffic and engagement through platforms like Facebook and WhatsApp. For analytics or custom designs, explore the Premium version (heateor.com). Combine with your other guides (e.g., “Wishlist,” “Smush,” “Astra”) for a robust platform. Need help with setup, customization, or troubleshooting? Comment below or visit heateor.com/support/!