Affiliate Disclosure: We may be compensated if you use our links to make a purchase. We are extremely selective in who we partner with & only recommend products we believe in. Our affiliate relationships do not influence our recommendations.
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…
… 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.
- Click Screen Options at the top to ensure “Custom Fields” is selected
- Scroll down to the Custom Fields section
- Add “course_id” (or something similar) to the Key field
- Then in the Value field, type the course ID that corresponds to this WooCommerce product
- 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.
- Navigate to Templates > Theme Builder
- Create a new Single Product template
- Give it a name
4. Add the Shortcode Widget
This is what makes it all come together.
- Add a Shortcode widget anywhere you’d like in the template
- Click the little icon that looks like 3 pancakes (Dynamic Tags)
- Choose Post Custom Field
- 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.
- Click the Advanced tab just below the Settings
- Enter the following into the Before field:
- Enter the following into the After field:
- 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:
- Click the settings icon in the very bottom left of the Elementor sidebar
- Click the Preview Settings tab
- Type in the name of the WooCommerce product that you want to test. Select it.
- 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) 🙂.