How to create an Online Course with Elementor and WooCommerce

Learn how to create and sell an online course with Elementor and WooCommerce without using a Learning Management System (LMS) plugin. Web Squadron will show you how to set up an online course using Elementor, WooCommerce, Page Restrict for WooCommerce, and Code Snippets. This setup is particularly useful for those who want to sell courses and allow immediate access to the content upon purchase.

Tutorial Steps

1. Installing Necessary Plugins:
   Ensure that you have WooCommerce and Code Snippets plugins installed and activated on your WordPress site.
2. Creating a Product:
   In your WooCommerce settings, create a new product that corresponds to your online course. Set it as a virtual product and determine your pricing.
3. Installing Page Restrict for WooCommerce Plugin:
   Install the free plugin “Page Restrict for WooCommerce“. This plugin allows you to restrict access to certain pages until a product is purchased.
4. Restricting Course Page:
   In your course page settings, use the Page Restrict for WooCommerce settings to lock the page with the product you created. This means the page can only be accessed once the product (your course) is purchased.
5. Designing Your Course Page:
   Design your course page using Elementor. This is where your course content will be displayed once a customer purchases the product.
6. Adding AutoComplete Code Snippet:
   To allow immediate access to the course upon purchase, add a specific code snippet that auto-completes the purchase of virtual products. Create a new Code Snippet and copy & paste the following code:

   function auto_complete_virtual_orders( $payment_complete_status, $order_id, $order ) {
   $current_status = $order->get_status();
   // We only want to update the status to 'completed' if it's coming from one of the following statuses:
   $allowed_current_statuses = array( 'on-hold', 'pending', 'failed' );
   
   if ( 'processing' === $payment_complete_status && in_array( $current_status, $allowed_current_statuses ) ) {
   
   $order_items = $order->get_items();
   
   // Create an array of products in the order
   $order_products = array_filter( array_map( function( $item ) {
   // Get associated product for each line item
   return $item->get_product();
   }, $order_items ), function( $product ) {
   // Remove non-products
   return !! $product;
   } );
   
   if ( count( $order_products > 0 ) ) {
   // Check if each product is 'virtual'
   $is_virtual_order = array_reduce( $order_products, function( $virtual_order_so_far, $product ) {
   return $virtual_order_so_far && $product->is_virtual();
   }, true );
   
   if ( $is_virtual_order ) {
   $payment_complete_status = 'completed';
   }
   }
   }
   return $payment_complete_status;
   }

   Source: Code Snippets

Benefits of Creating an Online Course with Elementor and WooCommerce

This setup not only simplifies the process but also offers several significant advantages. Here are some benefits of creating an online course without using an LMS.

Simplified Course Creation

Creating an online course without an LMS simplifies the process and gives you more control over the design and presentation of your course.

Immediate Access for Customers

By using the AutoComplete code snippet, customers can access the course content immediately upon purchase, improving the user experience.

Cost-Effective Solution

This method avoids the need for expensive LMS plugins or platforms, making it a cost-effective solution for small businesses or individual educators.

Full Control Over Course Design

By designing your course page yourself, you have full control over the look and feel of your Elementor online course, allowing you to align it with your brand and style.

Troubleshooting Common Issues with Creating an Online Course without Using LMS

1. Course Page Not Restricted
   If your course page is not restricted after setting it up with the Page Restrict for WooCommerce plugin, double-check the plugin settings and ensure that the correct product is selected for restriction.
2. Customers Can’t Access the Course After Purchase
   If customers can’t access the course immediately after purchase, ensure that the AutoComplete code snippet is correctly added and activated.
3. Course Product Not Displaying Correctly
   If your course product is not displaying correctly in WooCommerce, check the product settings and ensure that it is set as a virtual product.
4. Course Page Design Issues
   If you’re having issues with the design of your course page in Elementor, check the Elementor settings and ensure that all elements are correctly configured.