Skip to main content

WooCommerce Integration

Promptless WP works beautifully with WooCommerce, letting you showcase your products in visually stunning sections anywhere on your site. Whether you're highlighting featured products on your homepage or creating category landing pages, this guide shows you how to make the most of WooCommerce with Promptless WP.

What Is WooCommerce Integration?​

WooCommerce integration allows you to display your store's products directly within Promptless WP sections. Instead of just showing blog posts, your Post Grid sections can showcase products with images, titles, prices, and add-to-cart buttons.

Benefits​

  • Showcase products anywhere - Feature products on any page, not just your shop
  • Beautiful presentation - Products display with your site's design language
  • Flexible filtering - Show all products or filter by category
  • Consistent styling - Products match your brand's look and feel
  • Quick shopping - Add-to-cart buttons let customers buy without leaving the page

Setting Up WooCommerce Products​

Prerequisites​

Before using WooCommerce integration:

  1. WooCommerce installed - Install and activate the WooCommerce plugin
  2. Products created - Add products to your WooCommerce catalog
  3. Product images - Each product should have a featured image for best results
  4. Promptless WP active - Promptless WP plugin installed and activated

Accessing Product Display​

Products are displayed through Post Grid sections:

  1. Edit any page in Promptless WP
  2. Add a Post Grid section or edit an existing one
  3. Switch content type to Products in the section settings

Displaying Products in Post Grid Sections​

Step-by-Step Setup​

1. Add a Post Grid Section​

  1. Click "Add Section" in the left sidebar
  2. Select "Post Grid" from the section types
  3. Section appears in your page preview

2. Switch to Product Display​

  1. Click on the Post Grid section to select it
  2. Look for "Content Type" in the Content tab
  3. Select "Products" from the dropdown
  4. Products automatically load in the preview

3. Configure Product Options​

Number of Products:

  • Choose how many products to display (3, 6, 9, 12)
  • More products = more scrolling but greater selection
  • Fewer products = cleaner look, highlights specific items

Grid Columns:

  • 2 columns - Large product cards, great for detailed products
  • 3 columns - Balanced layout, most common choice
  • 4 columns - Compact grid, good for category pages

Product Display Elements​

When you display products, each product card shows:

  • Product Image - Featured image with your global image styling (border radius, shadows)
  • Product Title - Links to the individual product page
  • Price - Current price, or sale price with original price struck through
  • Add to Cart Button - Quick purchase for simple products

Category Filtering​

Showing Products from Specific Categories​

Filter your product display to show items from particular categories:

  1. Edit your Post Grid section
  2. Find "Product Category" in the Content tab
  3. Select a category from the dropdown
  4. Products filter immediately to show only that category

When to Use Category Filtering​

Homepage Featured Products:

  • Create a "New Arrivals" section with products from that category
  • Show "Best Sellers" or "Featured" category products

Category Landing Pages:

  • On your "Summer Collection" page, show only summer products
  • On service pages, show related products

Cross-Selling Opportunities:

  • On blog posts, show related product categories
  • On about pages, highlight your signature products

Multiple Product Sections​

You can add multiple Post Grid sections with different category filters:

Example: Homepage Layout

  1. Section 1: "New Arrivals" - Products from New Arrivals category
  2. Section 2: "Best Sellers" - Products from Best Sellers category
  3. Section 3: "On Sale" - Products from Sale category

Product Button Styling and Alignment​

Button Appearance​

Product "Add to Cart" buttons use your global button styling:

  • Primary Color - Buttons use your brand's primary color
  • Border Radius - Matches your global border radius setting
  • Font - Uses your button font settings
  • Hover Effects - Consistent with other buttons on your site

Button Alignment​

Control how product buttons align within cards:

  1. Edit your Post Grid section
  2. Look for "Align Buttons to Bottom" toggle
  3. Enable for consistent layout - All buttons align at card bottom regardless of title/content length

When to Enable Button Alignment:

  • Products have varying title lengths
  • You want a clean, uniform grid appearance
  • Professional product showcase pages

When to Disable Button Alignment:

  • Minimal design preference
  • Single-row product displays
  • Products with similar title lengths

Design Considerations​

Matching Your Store's Look​

Image Consistency:

  • Use consistent product photo style (background, lighting)
  • Set up global image border radius for unified appearance
  • Consider image shadows for depth on light backgrounds

Color Coordination:

  • Product cards inherit your section's theme variant
  • Use light theme for bright product photos
  • Use dark theme for dramatic product presentations

Typography:

  • Product titles use your heading font settings
  • Prices use your body text styling
  • Button text follows your button font configuration

Theme Variant Recommendations​

Light Theme (Default):

  • Best for most product types
  • Clear visibility of product details
  • Professional, clean appearance

Dark Theme:

  • Great for premium/luxury products
  • Creates dramatic contrast
  • Works well with bright product images

Responsive Behavior​

Products display responsively across devices:

Desktop (1024px+): Full grid layout with chosen column count Tablet (768-1023px): Reduced to 2-3 columns Mobile (Under 768px): Single column for easy scrolling

Best Practices​

Product Photography​

  • Consistent style - Same background, lighting, and angle
  • High quality - At least 800x800px for crisp display
  • Optimized size - Compress images for fast loading
  • Clear subject - Product should be the obvious focus

Content Strategy​

Featured Products Section:

  • Limit to 3-6 products for impact
  • Choose your best sellers or newest items
  • Update regularly to keep content fresh

Category Showcase:

  • Use 6-12 products to show variety
  • Match to page content (e.g., summer products on summer blog posts)
  • Consider seasonal rotations

Cross-Selling:

  • Display 3-4 complementary products
  • Place after informational content
  • Use compelling section headings

Section Headings for Products​

Write compelling headers that encourage browsing:

Good examples:

  • "Shop Our Favorites" (inviting)
  • "New This Week" (timely)
  • "Customers Also Love" (social proof)
  • "Complete Your Look" (cross-sell)

Avoid:

  • "Products" (too generic)
  • "Buy Now" (too aggressive)
  • Empty headings (missed opportunity)

For Agencies & Development Teams​

This section provides technical assurance for agencies recommending Promptless WP with WooCommerce to clients.

Integration Architecture​

Clean Hook Integration:

  • Uses standard WooCommerce template functions
  • No conflicts with WooCommerce core functionality
  • Works with WooCommerce hooks and filters
  • Compatible with WooCommerce extensions

Data Handling:

  • Queries products using standard WC_Product_Query
  • Respects product visibility settings
  • Follows WooCommerce stock status
  • Handles variable products appropriately

Checkout and Cart Compatibility​

No Cart/Checkout Interference:

  • Product displays are read-only views
  • Add-to-cart uses standard WooCommerce AJAX
  • No custom cart modifications
  • Checkout process remains unaffected

Cart Integration:

  • Add-to-cart buttons work with existing cart
  • Cart counts update correctly
  • Mini-cart widgets update in real-time
  • No conflicts with cart page functionality

Theme Compatibility​

Tested with Major WooCommerce Themes:

  • Storefront (official WooCommerce theme)
  • Astra (with WooCommerce module)
  • GeneratePress (with WooCommerce support)
  • OceanWP (with WooCommerce integration)
  • Flatsome and other WooCommerce-specific themes

Custom Theme Compatibility:

  • Uses standard WordPress and WooCommerce APIs
  • No hard-coded theme dependencies
  • Follows WooCommerce coding standards
  • Works with custom theme implementations

Performance Considerations​

Optimized Queries:

  • Efficient product queries with proper limits
  • No unnecessary database calls
  • Caching-friendly implementation
  • Compatible with object caching plugins

Frontend Performance:

  • Minimal JavaScript overhead
  • Lazy loading for product images
  • Works with WooCommerce's asset loading
  • No impact on store page performance

Edge Cases Handled​

Variable Products:

  • Displays price range (e.g., "$19.99 - $49.99")
  • Shows "Select options" instead of "Add to cart"
  • Links to product page for variation selection

Sale Products:

  • Displays original price with strikethrough
  • Shows sale price prominently
  • Handles scheduled sales correctly

Out of Stock Products:

  • Respects catalog visibility settings
  • Can be hidden or shown based on WooCommerce settings
  • Shows appropriate stock status

Product Visibility:

  • Follows WooCommerce visibility rules
  • Hidden products don't appear in grids
  • Catalog-only products handled correctly

Troubleshooting​

Products Not Displaying​

WooCommerce not active:

  1. Go to Plugins → Installed Plugins
  2. Ensure WooCommerce is activated
  3. Check for WooCommerce errors in admin notices

No published products:

  1. Go to Products → All Products
  2. Ensure products are set to "Published" status
  3. Check product visibility settings

Category filter too restrictive:

  1. Try selecting "All Categories" first
  2. Verify selected category has products
  3. Check products are assigned to the chosen category

Wrong Products Appearing​

Check category assignment:

  1. Edit individual products
  2. Verify category assignments in product data
  3. Update and republish if needed

Check product visibility:

  1. Edit the product
  2. Look for Catalog Visibility setting
  3. Ensure it's set to "Shop and search results"

Styling Issues​

Buttons look wrong:

  1. Check global button settings in Promptless WP
  2. Verify button color contrast
  3. Clear any caching plugins

Images inconsistent:

  1. Verify all products have featured images
  2. Check image dimensions for consistency
  3. Use Regenerate Thumbnails plugin if needed

Layout broken:

  1. Test with default WordPress theme
  2. Check for CSS conflicts
  3. Clear browser and server caches

Add to Cart Not Working​

AJAX issues:

  1. Check browser console for JavaScript errors
  2. Verify WooCommerce AJAX is enabled
  3. Test with other plugins deactivated

Cart redirect issues:

  1. Check WooCommerce → Settings → Products
  2. Verify cart behavior settings
  3. Clear WooCommerce transients

Common Use Cases​

Homepage Product Showcase​

Setup:

  • Add Post Grid section below hero
  • Select "Products" content type
  • Choose 3-6 featured products
  • Use 3-column grid
  • Add compelling heading like "Shop Our Best Sellers"

Category Landing Page​

Setup:

  • Create a page for each main category
  • Add hero section with category information
  • Add Post Grid showing products from that category
  • Include 6-12 products for variety
  • Consider adding testimonials below products

Blog Post Cross-Selling​

Setup:

  • On relevant blog posts, add a Post Grid section
  • Filter to show related product category
  • Display 3-4 products
  • Use heading like "Products Mentioned in This Post"

About Page Trust Building​

Setup:

  • Near the end of your About page
  • Show 3-6 signature products
  • Use heading like "Explore Our Collection"
  • Light theme for welcoming appearance

Next Steps​

Now that you understand WooCommerce integration:

  1. Create a product showcase on your homepage
  2. Build category landing pages for your main collections
  3. Add cross-selling sections to relevant content pages
  4. Review Post Grid Sections for more display options

Need More Help?​

Remember: Product displays work best when your WooCommerce catalog is well-organized with great images, clear titles, and proper categorization. The better your product data, the better your Promptless WP product sections will look!