Skip to content

Product Pricing

Overview

Section titled “Overview”

Displays the price for a single product on product detail pages. Shows the current price with proper currency formatting, and may include sale prices or variant-specific pricing.

Requirements

Section titled “Requirements”
  • Parent block: Must be inside commerce-connect/product-details-page
  • BigCommerce data: Product price, sale price, currency settings

Configuration

Section titled “Configuration”

Attributes

Section titled “Attributes”
  • settingsId (string) - Settings configuration identifier
    • Default: ""
  • dropzone (string) - Dropzone identifier for block placement
    • Default: ""

Block Support

Section titled “Block Support”
  • HTML editing: Not supported
  • Multiple instances: Not allowed (only one per product page)
  • Spacing: Margin control available

Usage

Section titled “Usage”

Placement

Section titled “Placement”

This block must be placed inside the Single Product template (Product Details Page block). It cannot be used outside of this context.

Common Patterns

Section titled “Common Patterns”

From the demo video script, the pricing block typically appears near the top of the product page:

Product Title
→ Product Pricing ← (Price with currency)
[Variant Selector if applicable]
Product Buy Button
Product Description

The pricing block respects the global currency display settings configured in the Commerce Connect plugin settings:

  • Currency symbol (e.g., $)
  • Currency code (e.g., USD)
  • Narrow symbol
  • Spelled out currency name

Technical Details

Section titled “Technical Details”

CSS Classes

Section titled “CSS Classes”
  • Uses standard block wrapper attributes
  • Dropzone ID applied when specified

Data Source

Section titled “Data Source”

The block uses context provided by the parent Product Details Page block:

  • commerce-connect/singleProductRefinedPayload - Simplified product data including price
  • commerce-connect/singleProductFullPayload - Complete product information
  • commerce-connect/singleProductSelectedProduct - Currently selected product variant (for variant-specific pricing)
  • commerce-connect/singleProductDropzones - Available dropzone positions
  • commerce-connect/singleProductIsFetching - Loading state indicator

Pricing data is synced from BigCommerce and stored in WordPress®. When a product’s price changes in BigCommerce, the update syncs to WordPress® automatically.

Troubleshooting

Section titled “Troubleshooting”

Price not displaying

Section titled “Price not displaying”
  • Verify the block is inside a Product Details Page parent block
  • Check that the product has pricing set in BigCommerce
  • Ensure the product data has synced from BigCommerce

Wrong currency or formatting

Section titled “Wrong currency or formatting”
  • Check the currency display settings in Commerce Connect plugin settings (Products tab)
  • Verify the BigCommerce store currency configuration
  • Clear cache if pricing format changes aren’t reflecting

Variant prices not updating

Section titled “Variant prices not updating”
  • Ensure the product has variants configured with different prices in BigCommerce
  • Check that the variant selector is present on the page
  • Verify the selected product context is being passed correctly