This guide will help you set up and use SureCart e-commerce functionality with your BuddyX theme. The integration provides a seamless shopping experience while maintaining your community-focused design.
Getting Started
Prerequisites
- BuddyX Theme – Ensure BuddyX theme is installed and activated
- SureCart Plugin – Install and activate the SureCart plugin from WordPress repository
- Initial Setup – Complete SureCart’s initial setup wizard
Key Features
1. Shopping Cart Icon in Header
- Automatic Display: Cart icon appears automatically in your site header
- Real-time Updates: Shows current number of items in cart
- Smart Detection: Shows SureCart cart when active, falls back to WooCommerce if both are installed
2. Optimized Page Layouts
All SureCart pages automatically use full-width layout for distraction-free shopping:
- Shop page
- Checkout page
- Cart page
- Customer Dashboard
3. Clean Product Pages
- No duplicate titles or featured images
- No sub-header or breadcrumb sections
- Full-width layout without sidebars
- Seamless integration with your theme’s design
- Mobile-responsive layouts
Configuration Guide
Enable/Disable Cart Icon
The cart icon in BuddyX is controlled by your header settings:
- Go to Appearance → Customize
- Navigate to Site Header
- Find Enable Cart Icon?
- Toggle On to show cart icon (works for both WooCommerce and SureCart)
- Click Publish to save changes
Note: This setting controls both WooCommerce and SureCart cart icons. When WooCommerce is active, it takes priority.
Product Page Display
SureCart single product pages are automatically optimized with:
- Full-width layout (no sidebars)
- Hidden duplicate elements
- Clean presentation focused on your product content
No configuration needed – these optimizations are applied automatically!
Page Layout Customization
While SureCart pages use full-width layout by default, you can change them:
- Go to Pages in WordPress admin
- Find your SureCart page (Shop, Checkout, etc.)
- Click Edit
- In the Page Attributes box:
- Template: Select desired layout
- Options: Default, Full Width, Full Width Stretched
- Update the page
Setting Up Your Store
1. Essential Pages
SureCart automatically creates needed pages during setup. To verify:
- Go to SureCart → Settings → Pages
- Ensure these pages are set:
- Shop Page
- Checkout Page
- Cart Page
- Customer Dashboard
2. Adding Products
- Go to SureCart → Products
- Click Add New
- Add product information:
- Product name
- Description
- Images (featured + gallery)
- Pricing
- Inventory (optional)
- Publish your product
3. Organizing with Collections
- Go to SureCart → Products→ Collections
- Create collections to group products
- Add products to appropriate collections
- Use collections for navigation menus
Design Tips
Header Cart Styling
The cart icon automatically:
- Matches your header color scheme
- Aligns with other header elements
- Works with sticky headers
- Adapts to mobile view
Mobile Optimization
- Cart icon appears in mobile header
- Touch-friendly cart interactions
- Responsive checkout process
- Product galleries optimized for mobile
Custom Styling
Add custom CSS for SureCart elements:
- Go to Appearance → Customize
- Navigate to Additional CSS
- Add your styles
Example customizations:
/* Custom cart icon color */
.cart-widget-wrapper .cart sc-cart-icon {
color: #ff6b6b;
}
/* Style cart count badge */
.cart-widget-wrapper .cart sc-count {
background: #ff6b6b;
color: white;
}
/* Product button customization */
.sc-product-buy-button {
background: #7c3aed;
border-radius: 8px;
font-weight: 600;
}
/* Adjust single product spacing */
.single-sc_product .site-main {
padding-top: 2rem;
}
Community Integration
BuddyPress Compatible
- Products can be shared in activity streams
- Members can discuss products
- Create product-related groups
Member Features
- Member purchase history
- Product recommendations
- Community reviews
Troubleshooting
Cart Icon Not Showing?
Check these items:
- ✓ SureCart plugin is active
- ✓ “Enable Cart Icon?” is ON in Customizer → Site Header
- ✓ Clear any caching plugins
- ✓ Check JavaScript console for errors
Page Layout Issues?
Try these solutions:
- Re-save permalinks: Settings → Permalinks → Save
- Check page template setting
- Clear browser cache
- Temporarily disable other plugins
Products Not Displaying?
Verify:
- Products are published (not draft)
- Shop page is correctly set in SureCart settings
- No conflicting shortcodes on the page
Single Products Show Sidebar?
This shouldn’t happen as the integration automatically removes sidebars. If it does:
- Clear all caches
- Check for theme updates
- Ensure no custom code is overriding settings
Advanced Features
Using SureCart Blocks
BuddyX fully supports SureCart’s block features:
-
Product Grid Block
- Add to any page or post
- Customize layout and columns
- Filter by collections
-
Cart Icon Block
- Place cart icon anywhere
- Shows dynamic count
-
Checkout Form Block
- Embed checkout anywhere
- Customize form fields
Page Builder Compatibility
BuddyX works with popular page builders:
- Elementor
- Beaver Builder
- Gutenberg (native)
Performance
Built-in Optimizations
BuddyX’s SureCart integration is optimized for performance:
- Singleton pattern prevents duplicate processing
- Event-based hooks minimize resource usage
- Conditional loading based on active plugins
- Efficient CSS with minimal overhead
Additional Performance Tips
- Image Optimization: Use compressed images
- Lazy Loading: Enable for product galleries
- Caching: Use caching but exclude:
- Cart page
- Checkout page
- Customer Dashboard page
Speed Improvements
- Minify CSS/JS (test with SureCart first)
- Use a CDN for product images
- Enable browser caching
Best Practices
Product Setup
- High-Quality Images: Use consistent sizing
- Clear Descriptions: Focus on benefits
- SEO-Friendly URLs: Use descriptive slugs
Customer Experience
- Simple Navigation: Use clear menu structure
- Quick Cart Access: Keep cart visible
- Trust Badges: Add security icons to checkout
Community Engagement
- Product Discussions: Enable comments
- Member Reviews: Encourage feedback
- Share Buttons: Add social sharing
Frequently Asked Questions
Q: Will SureCart work with BuddyPress?
A: Yes! SureCart works seamlessly with BuddyPress and other community features.
Q: Can I use SureCart with WooCommerce?
A: While technically possible, we recommend using one e-commerce solution for best performance. When both are active, WooCommerce takes priority for the cart icon.
Q: How do I customize the cart icon?
A: Use Additional CSS in the Customizer to style the cart icon and count.
Q: Are subscriptions supported?
A: Yes, SureCart supports recurring payments and subscriptions.
Q: Can I restrict products to members?
A: Yes, combine with BuddyX’s membership features for exclusive products.
Q: Does it work with RTL languages?
A: Yes, SureCart and BuddyX both support RTL languages.
Q: Why don’t I see sidebars on product pages?
A: The integration automatically applies full-width layout to single product pages for better presentation.
Getting Help
Support Resources
- SureCart Documentation: docs.surecart.com
- BuddyX Support: Through theme support channels
- Community Forum: Join the BuddyX community
Before Contacting Support
- Check this guide for solutions
- Ensure all plugins and theme are updated
- Test with a default WordPress theme
- Disable other plugins to check for conflicts
- Document any error messages
Quick Tips
💡 Performance Tip: The integration uses efficient event-based hooks for optimal speed
💡 Design Tip: Use consistent product image ratios for clean grids
💡 SEO Tip: Add unique meta descriptions to all products
💡 Community Tip: Create a products discussion group in BuddyPress
💡 Mobile Tip: Test the entire purchase flow on mobile devices