Advanced Open Graph meta tags and social sharing for WooCommerce Boost social media engagement with automatic Schema.org markup and beautiful share buttons.
Open Graph for WooCommerce is a comprehensive WordPress plugin that helps your WooCommerce products look perfect when shared on social media. It automatically generates optimized Open Graph meta tags, Twitter Cards, and Schema.org structured data to boost your social media presence and SEO.
- 🎯 WooCommerce-Focused: Built specifically for e-commerce with product pricing, availability, and inventory data
- ⚡ Performance Optimized: 70% smaller asset size, conditional loading, optimized queries
- 🎨 Beautiful UI: Modern WordPress-native admin interface with 3 share button styles
- 📱 Mobile First: Responsive design with touch-optimized social sharing
- ♿ Accessible: WCAG 2.1 compliant with full keyboard navigation and screen reader support
- 🔧 Developer Friendly: 20+ hooks, extensive customization options, and comprehensive API
- Facebook - Complete Open Graph with App ID integration
- Twitter - Optimized Cards with product data
- LinkedIn - Professional network optimization
- Pinterest - Rich Pins with product information
- WhatsApp - Mobile-optimized sharing
- Email - Traditional sharing with formatting
- Copy Link - Modern clipboard API integration
- Product schema with offers, reviews, and ratings
- Organization and brand information
- Breadcrumb navigation markup
- Rich snippets for search engines
- 3 Stunning Styles: Modern, Classic, Minimal
- Flexible Positioning: 4 built-in positions + shortcode
- Smart Image Handling: Multiple sizes with fallbacks
- Copy Functionality: Working clipboard integration
- Conditional loading (only when needed)
- Optimized database queries
- Smart caching system
- Minimal page load impact (< 0.1s)
# From WordPress admin
Plugins → Add New → Search "Open Graph for WooCommerce" → Install → Activate# Download and extract
wp plugin install open-graph-for-woocommerce.zip
wp plugin activate open-graph-for-woocommercecomposer require wbcomdesigns/open-graph-for-woocommerce- Install & Activate the plugin
- Navigate to WooCommerce → Social Media
- Enable Platforms you want to support
- Choose Style for share buttons
- Configure Settings as needed
- Test with social platform validators
// Plugin automatically generates meta tags for all products
// No code required - just configure in admin// Display share buttons anywhere
[wog_social_share]
// In templates
echo do_shortcode('[wog_social_share]');// Modify product meta data
add_filter('wog_product_meta_data', function($meta_data, $product) {
$meta_data['custom_field'] = 'custom_value';
return $meta_data;
}, 10, 2);
// Add custom platform
add_filter('wog_social_platforms', function($platforms) {
$platforms['custom'] = array(
'name' => 'Custom Platform',
'url' => 'https://custom.com/share?url={{url}}'
);
return $platforms;
});
// Track share events
add_action('wog_social_share_tracked', function($platform, $product_id, $url) {
// Your tracking logic here
});- WordPress: 5.0+
- WooCommerce: 4.0+
- PHP: 7.4+ (8.0+ recommended)
- Node.js: 14+ (for development)
# Clone repository
git clone https://github.com/wbcomdesigns/open-graph-for-woocommerce.git
cd woo-open-graph
# Install dependencies
npm install
composer install
# Start development
npm run dev
# Build for production
npm run buildwoo-open-graph/
├── 📄 woo-open-graph.php # Main plugin file
├── 📁 includes/ # Core functionality
│ ├── class-wog-settings.php # Settings management
│ ├── class-wog-meta-tags.php # Meta tags generation
│ ├── class-wog-schema.php # Schema.org markup
│ ├── class-wog-sitemap.php # XML sitemaps
│ ├── class-wog-social-share.php # Social sharing
│ └── class-wog-meta-boxes.php # Admin meta boxes
├── 📁 admin/ # Admin interface
│ └── class-wog-admin.php # Admin panel
├── 📁 assets/ # Frontend assets
│ ├── css/ # Stylesheets
│ └── js/ # JavaScript
└── 📁 languages/ # Translation files
| Metric | Before v2.0 | After v2.0 | Improvement |
|---|---|---|---|
| Asset Size | ~105KB | ~28KB | 73% smaller |
| DB Queries | +8 avg | +3 avg | 62% reduction |
| Load Time | +0.3s | +0.1s | 67% faster |
| Memory Usage | ~5MB | ~2MB | 60% less |
# Run PHP tests
composer test
# Run JavaScript tests
npm test
# Run linting
npm run lint- Meta tags generate correctly on product pages
- Share buttons appear in configured position
- Copy link functionality works
- Schema markup validates
- Mobile responsiveness
- Performance impact < 0.1s
| Browser | Version | Status |
|---|---|---|
| Chrome | 70+ | ✅ Fully Supported |
| Firefox | 65+ | ✅ Fully Supported |
| Safari | 12+ | ✅ Fully Supported |
| Edge | 79+ | ✅ Fully Supported |
| iOS Safari | 12+ | ✅ Fully Supported |
| Chrome Mobile | 70+ | ✅ Fully Supported |
/* Override share button styles */
.wog-social-share .wog-share-btn {
/* Your custom styles */
}
/* Style specific platforms */
.wog-share-facebook {
background: #1877f2;
}// Listen for share events
document.addEventListener('wog_social_share', function(event) {
console.log('Shared on:', event.detail.platform);
});
// Custom copy functionality
window.EWOGSocialShare.copyLink(url);Meta tags not showing?
- Verify WooCommerce is active
- Check on product pages only
- Clear caching plugins
Share buttons not appearing?
- Enable social sharing in settings
- Check theme compatibility
- Verify position setting
Copy button not working?
- Requires HTTPS for modern browsers
- Fallback provided for HTTP
// Enable debug logging
define('WOG_DEBUG', true);
// Or via admin
WooCommerce → Social Media → Advanced → Debug ModeWe welcome contributions! Please see our Contributing Guidelines for details.
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow WordPress Coding Standards
- Use PHPStan for static analysis
- Write tests for new functionality
- Update documentation as needed
- User Guide: Plugin Documentation
- API Reference: Developer Documentation
- Video Tutorials: YouTube Playlist
- FAQ: Frequently Asked Questions
- WordPress.org: Support Forum
- GitHub: Issues & Bug Reports
- Documentation: Knowledge Base
- Priority Support: Contact Form
- Custom Development: Services Page
- Consultation: Book a Call
This project is licensed under the GPL-2.0+ License - see the LICENSE file for details.
- Lead Developer: Wbcom Designs
- Contributors: See Contributors
- WordPress & WooCommerce communities
- Beta testers and feedback providers
- Translation contributors
- Simple Icons for social media icons
- Instagram sharing support
- TikTok integration
- Advanced analytics dashboard
- Bulk product optimization
- Custom meta box fields
- AI-powered content optimization
- A/B testing for share buttons
- Advanced image optimization
- Multi-site network support
- REST API endpoints
- Shopify integration
- Mobile app
- Enterprise features
- White-label options
Website • Documentation • Support • Donate
Made with ❤️ by Wbcom Designs