WooCommerce Product Price Block

The WooCommerce Product Price Block allows you to display the price of a selected WooCommerce product anywhere inside the Block Editor.

This block dynamically retrieves the product’s price directly from WooCommerce, ensuring it always stays updated when the product price changes.

Overview

Use this block when you want to:

• Display a product price inside posts or pages
• Build custom pricing sections
• Create landing pages for specific products
• Showcase subscription or recurring pricing

The block outputs WooCommerce’s native price_html, ensuring compatibility with themes and extensions.

Requirements

• WordPress 6.0+
• WooCommerce installed and activated

How to Use

1. Open the Block Editor.
2. Click the “+” Add Block button.
3. Search for WooCommerce Product Price.
4. Insert the block.
5. Select a product using the Product Selector.
6. Adjust alignment or formatting if needed.

The price will automatically update if the product price changes in WooCommerce.

Block Settings

Depending on your configuration, the block may include:

• Product Selector
  Choose which WooCommerce product to display the price for.
• Text Alignment
  Align the price left, center, right, or justify.
• Custom Placeholder (Editor Only)
  Display preview text when no product is selected.

How It Works

The block retrieves WooCommerce’s formatted price HTML ($product->get_price_html()), which means:

• Sale prices are automatically handled.
• Subscription pricing (if supported by your subscription plugin) displays correctly.
• Taxes and display settings follow WooCommerce configuration.
• Currency symbol and formatting are preserved.

Because it uses WooCommerce’s native formatting, it remains fully compatible with:

• Theme styling
• Pricing filters
• WooCommerce hooks

Supported Pricing Types

• Regular price
• Sale price
• Subscription pricing (e.g., $50 / year)
• Variable product price ranges
• External product price display

The output depends entirely on WooCommerce’s price configuration.

Styling

The block inherits styles from:

• Your active theme
• WooCommerce default styles
• Any custom CSS you apply

You can customize appearance by:

• Using block alignment tools
• Adding custom CSS
• Targeting the block class in your theme

Example Use Cases

• Pricing tables
• Landing pages
• Sales sections
• Blog posts promoting a product
• Feature comparison layouts