Show LearnDash Course Content Dynamically on WooCommerce Single Product Elementor Theme Builder Template

It’s a mouthful of a title but I honestly couldn’t figure out how to shorten it and still tell you what this post is about. Essentially, if you’re using…

• LearnDash
• WooCommerce
• Elementor

… and you want to use Elementor’s Theme Builder to set up a dynamic Single Product template for all of your WooCommerce products…

… AND you want to display LearnDash course content on that Single Product Elementor template…

… this post will show you exactly how to do it.

I highly recommend watching the video. It will walk you through all the steps, whereas the following text will just cover the basics.

1. Get Course ID

First, you’ll need to locate the course ID for the WooCommerce product that it corresponds to. See this article on how to find the LearnDash course ID.

2. Add Course ID Custom Field to WooCommerce Product

Next, you need to edit the WooCommerce product.

1. Click Screen Options at the top to ensure “Custom Fields” is selected
2. Scroll down to the Custom Fields section
3. Add “course_id” (or something similar) to the Key field
4. Then in the Value field, type the course ID that corresponds to this WooCommerce product
5. Click the Update button at the top to save the information

3. Create a Single Product Theme Builder Template in Elementor

Now we can to create our Elementor Single Product template, or edit an existing one.

1. Navigate to Templates > Theme Builder
2. Create a new Single Product template
3. Give it a name

4. Add the Shortcode Widget

This is what makes it all come together.

1. Add a Shortcode widget anywhere you’d like in the template
2. Click the little icon that looks like 3 pancakes (Dynamic Tags)
3. Choose Post Custom Field
4. If your “course_id” key shows up in the Key dropdown, select it. If it doesn’t, type it in manually in the “Custom Key” field.
5. Click the Advanced tab just below the Settings
6. Enter the following into the Before field:
   [course_content course_id="
7. Enter the following into the After field:
   "]
8. Click the green Apply button

You might not see anything change in the preview. I didn’t either.

5. Preview the WooCommerce Product

You can preview the exact WooCommerce product page by following these steps:

1. Click the settings icon in the very bottom left of the Elementor sidebar
2. Click the Preview Settings tab
3. Type in the name of the WooCommerce product that you want to test. Select it.
4. Click Apply & Preview

Boom! 🙌 You should now see your course content displayed in the preview to the right.

You are now ready to publish this template and set it’s display conditions to all products.

This is one example of how to use dynamic fields for LearnDash shortcodes, but you could theoretically use this method for all other types of shortcodes, too. This should work for anything that requires an ID from a different content type… or any other type of custom field.

Similarly, this would also work if you’re using Advanced Custom Fields (ACF), which in most cases, I would recommend. It’s much more user-friendly and the pro version opens up a world of possibilities with custom fields.

📣 Sound off in the comments if you were able to use this successfully. I’d love to hear about it (and see an example if you’re comfortable sharing a link) 🙂.

Recommended Product