LearnDash Design & Tutorials

LearnDash Design & Tutorials

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

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.

  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) 🙂.

Sponsor

Finally Revealed...

NEW breakthrough solution allows you to IMMEDIATELY GROW student engagement and SELL more courses by creating a state of the art mobile application in 60 MINUTES OR LESS without ANY coding knowledge!

5 out of 5 stars

Proven and tested by over 1,000 LearnDash customers.

Learn More →

Previous

The Uncanny Toolkit vs. PowerPack for LearnDash

Next

Limit the Width of the LearnDash Login Modal

8 Comments

  1. Done!
    Thank you so much!

    I’d like to know ho to use this method in the grid lesson widget.
    Claudio 🙂

  2. 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

    • 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.

  3. 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

  4. 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

    • 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

Leave a Reply

Your email address will not be published.

Powered by WordPress & Theme by Anders Norén