How to Use Dynamic Content with WooCommerce Products

You can use WooCommerce Product Fields with Stackable’s Dynamic Content feature, and inside the native Query Loop block. You can also use it as display conditions with the Conditional Display feature.

How to Use Dynamic Content with WooCommerce Products

1. Set up your Product in WooCommerce

First, you will need to set up your Product pages and add your Product data to see your WooCommerce Product Fields in the Dynamic Fields dropdown list.

On the left menu panel of your WordPress dashboard, click on Products > Add New

Next, fill up the Product data in the "Add new product” page

2. Use Stackable Dynamic Fields to Fetch WooCommerce Product Data

After you’ve filled out your Product data, go to the Editor then add any Stackable block.

In this example, we fetched the Product Image in the Image block by selecting the Product Image product field.

To do this:

1. Click on the Dynamic Fields icon next to the Upload button in the Style tab of the Image block.
2. Under Dynamic Source, select Other Posts
3. Under Post/Pages, select the Product page
4. Under Field, select Product Image

In this next example, we fetched the data for the Sale Period in the Text Block by selecting the Product Date From and Product Date To product fields.

To do this:

1. Select the text field, or highlight the text
2. Click on the Dynamic Fields icon on the block toolbar
3. Under Dynamic Source, select Other Posts
4. Under Post/Pages, select the Product page
5. Under Field, select the appropriate WooCommerce Product Fields
6. Repeat the steps to add the other Product data into your Stackable blocks

Using WooCommerce Product Fields in the Query Loop Block

You can use WooCommerce Product Fields inside the native Query Loop block.

In this example, we listed the steps to create a product listing section:

1. Add the native Query Loop block
2. Under Post Type, select Product

3. Select Post Template and click the Grid layout on the toolbar
4. Add the Columns block, select One Column, then add an Image block inside
5. Remove the default native blocks inside the Query Loop
6. Click on the Dynamic Fields icon next to the Upload button in the Style tab of the Image block
7. Under Dynamic Source, select Current Post
8. Under Field, select Product Image

9. Repeat the steps for the other product details and select the appropriate Product Fields

WooCommerce Product Fields as Display Conditions

You can use the WooCommerce Product Fields as display conditions.

This is useful if you want to show specific information about a product only when certain conditions are met.

1. Select the block where you will apply the display condition
2. Go to the Advanced tab and under the Conditional Display panel, click on “Add New Condition”

3. Select WooCommerce in the Condition Type

4. Choose the Product where the display condition will take effect. Select Current Post if you are using the Query Loop block. Otherwise, select the appropriate product page.

5. Set the conditions for Property and Value. In this example, we’ve applied conditions where an “Out of Stock” text will be shown, and the Add to Cart button will be hidden when a product is out of stock.