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…
- 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.
- 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:
[course_content course_id="
- 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.
Rapyd just launched the fastest BuddyBoss, LearnDash & WordPress LMS hosting on the planet. Get 25% OFF with their early bird discount and lock-in up to 2 years of discounted pricing. From the creators of BuddyBoss.
Get 25% OFF Rapyd Today →
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) 🙂.
Uncanny Owl has been making the best LearnDash plugins since the day LearnDash was born. Their LearnDash Toolkit is used on over 30,000 sites and adds 20+ features specifically for LearnDash. They also sell the popular plugins:
• Uncanny Groups - group/corporate sales, group reporting & more.
• Tin Canny Reporting - one of the best reporting plugins for LearnDash
• Uncanny Automator - automate LearnDash & connect with 150+ WordPress plugins & third-party services
Automate your LMS site with over 150+ plugins & apps. Uncanny Automator is the perfect no-code automation tool to replace dozens of WordPress plugins.
• Supports LearnDash, Tutor LMS, LifterLMS, and most membership plugins
• Trusted by 30,000 companies
Get 10% OFF with code affiliate10-dwarfel
Claudio
Done!
Thank you so much!
I’d like to know ho to use this method in the grid lesson widget.
Claudio 🙂
Dave Warfel
Sorry but I don’t know what you mean.
Claudio
Hi Dave!
😀 Sorry for my English.
I would like to insert a lesson grid according to the same method.
I try to explain myself better: on the Single Product page, I would like to show the lessons of the related product / course in a grid style.
I hope I was a little clearer.
Sorry 🙂
Claudio
Dave Warfel
I understand now.
I’m not sure if it’s possible because I don’t know if LearnDash allows for a
course_id
parameter in its grid shortcodes. But here are two things you can try. LearnDash has two different grid shortcodes – one for the older grid layout, and one for the new layout.[ld_lesson_list course_id="7"]
or
[learndash_course_grid post_type="sfwd-lessons" course_id="7"]
In both cases, you would replace the 7 with your course ID, just as you did in the existing tutorial you followed for the course content.
Claudio
PS
This is the result on my site following your instructions.
https://napieracademy.eu/prodotto/social-media-marketing-e-advertising-per-lentertainment/
Now, I’d like to show lessons in a grid!
Thanks again,
Claudio
Claudio
Hello Dave!
It works (!) but with a (little) problem: while the grid rendering is correct in the elementor backend, it is messy in the frontend. I will investigate the problem. It may be due to the BuddyBoss Theme which has several bugs.
I will keep you up to date.
In the meantime, thank you for your help. You are very kind and super professional.
Thanks again.
Claudio
Dave Warfel
You’re welcome 🙂.
Yes, it could be the BuddyBoss theme, as they rewrite all of LearnDash’s course grid code to make it their own. There have also been issues with LearnDash’s grid in Elementor (without the BuddyBoss theme), so that could be part of the problem as well. If BuddyBoss doesn’t admit it’s their issue, I would reach out to LearnDash support.
Niki
This is Great! I am doing this, but with the Divi-Builder (mainly because that’s what I have a licence for)
Claudio – I’m using Buddyboss as well. How did you get the Course Content list to display with the same formatting as the regular Buddyboss formatting? Did you have to re-create it, or were you able to tap into it?
Cheers! Niki
attiah aly
hello
is any way to show the product price inside the course that linked with it ?
Dave Warfel
Sorry but I don’t understand exactly what you’re asking.
attiah aly
when we set the course to close to link it to woocommerce product for payment
is any way to display the woocommerce product price inside the course page and Course cards in Course Grid
is my question is now clear ?
Dave Warfel
Yes, there is a way to do that, but it requires some custom coding and is too complex to try and explain here.
I’m pretty sure WooCommerce stores the product price in post_meta fields. You would need to extract the data, and then convert it to a shortcode or block and insert onto your course page. Or alternatively, you could create a custom template for course pages, add that to your child theme, and insert the appropriate code to display the value in the template file.
For displaying it in the course grid, you would need to customize the course grid template files and add the code in there. The easier way to do this with the course grid is to simply add the price to the short description. See my article on course grid short descriptions to learn more about that.
Vlad
Hello! Thanks for the great solution. There is a question.
All sections and lectures in sections are shown. How can I make it possible to collapse and expand content in sections? Otherwise, a large canvas is obtained.
Dave Warfel
Hi Vlad. Unfortunately, LearnDash does not provide this feature. There is no way to collapse the content within a section. It can be achieved, but it would require custom development and customization of the LearnDash template files. You could hire a developer to do this for you. It’d say it’s beyond beginner level, but also not the most advanced project I’ve ever seen.
Best of luck with it.