<?php
use Elementor\Plugin;
use Elementor\Widget_Heading;

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

// Ensure Elementor is loaded
if ( ! did_action( 'elementor/loaded' ) ) {
    echo 'Please activate Elementor plugin.';
    return;
}

// Retrieve the widget manager
$widget_manager = Plugin::instance()->widgets_manager;

// Get the Heading widget class
$heading_widget = $widget_manager->get_widget( 'heading' );

// Check if the widget exists
if ( $heading_widget ) {
    // Set the widget settings
    $settings = [
        'title' => 'Your Static Title',  
        'size' => 'xl',                 
        'alignment' => 'center',         
        'header_size' => 'h1',          
    ];

    // Render the widget
    echo '<div class="elementor-widget-container">';
    $heading_widget->render( $settings ); // Render the heading widget with settings
    echo '</div>';
} else {
    echo 'Heading widget not found.';
}
?>

but i could not get the elementor heading widget data in custom template. I would like to know if it is possible to render an Elementor widget in this custom page programmatically, without using the Elementor editor. How can i do this.

Method 1:- Adding Bootstrap through Function.php file
STEP 1:- Before we get started, there are a few things we need to do-

Install WordPress
Download and Unzip Bootstrap
Step 2:- Once you have these things ready, open the directory with all your WordPress files and navigate to

wp-content\themes\twentyseventeen\

Step 3:- Once you navigate to that folder Inside of that folder paste the bootstrap folder which we unzip before.

Step 4:- Now open your ” Function.php ” file and copy below code after the ” register_sidebar ” function.

/…………………………..Copy From Here………………………………………………………./

function theme_styles() 
{
    wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/bootstrap.css' );
    wp_enqueue_style( 'bootstrap_responsive_css', get_template_directory_uri() . '/css/bootstrap-responsive.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_styles');

function theme_js() 
{
    global $wp_scripts;
    wp_enqueue_script( 'bootstrap_js', get_template_directory_uri() . '/js/bootstrap.min.js' );
}
add_action( 'wp_enqueue_scripts', 'theme_js');

/…………………………..Copy To Here………………………………………………………./

Note:- you can paste this code anywhere in ” function.php ” file but i paste it under the ” register_sidebar ” function.
Now your code look like it

 'before_title'  => '',
    'after_title'   => '',
) );
}
add_action( 'widgets_init', 'twentyseventeen_widgets_init' );

function theme_styles() 
{
    wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/bootstrap.css' );
    wp_enqueue_style( 'bootstrap_responsive_css', get_template_directory_uri() . '/css/bootstrap-responsive.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_styles');

function theme_js() 
{
    global $wp_scripts;
    wp_enqueue_script( 'bootstrap_js', get_template_directory_uri() . '/js/bootstrap.min.js' );
}
add_action( 'wp_enqueue_scripts', 'theme_js');

/*................................Copy To Here................................................................*/

/**
 * Replaces "[...]" (appended to automatically generated excerpts) with ... and
 * a 'Continue reading' link.

Step 5:- Now save the “Function.php” file. That’s it now your wordpress theme is fully responsive

Method 2:-Link to Bootstrap CDN
STEP 1:- open your ” Function.php ” file and copy below code after the ” register_sidebar ” function.

/…………………………..Copy From Here………………………………………………………./

function theme_styles() 
{
    wp_enqueue_style( 'bootstrap_css', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_styles');

function theme_js() 
{
    global $wp_scripts;
    wp_enqueue_script( 'bootstrap_js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js');
}
add_action( 'wp_enqueue_scripts', 'theme_js');

…………………………..Copy To Here………………………………………………………./

Note:- you can paste this code anywhere in ” function.php ” file but i paste it under the ” register_sidebar ” function.
Now your code look like it

      'before_title'  => '',
        'after_title'   => '',
    ) );
}
add_action( 'widgets_init', 'twentyseventeen_widgets_init' );

/*................................Copy From Here................................................................*/

function theme_styles() 
{
    wp_enqueue_style( 'bootstrap_css', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_styles');

function theme_js() 
{
    global $wp_scripts;
    wp_enqueue_script( 'bootstrap_js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js');
}
add_action( 'wp_enqueue_scripts', 'theme_js');

/*................................Copy To Here................................................................*/

/**
 * Replaces "[...]" (appended to automatically generated excerpts) with ... and
 * a 'Continue reading' link.

Step 2:- Now save the “Function.php” file. That’s it now your wordpress theme is fully responsive

function twentyseventeen_widgets_init() 
{
/*................................Copy From Here................................................................*/

register_sidebar( array(
        'name'          => __( 'Footer 2', ‘theme-slug’ ),
        'id'            => 'sidebar-1',
        'description'   => __( 'Add widgets here to appear in your footer.', 'theme-slug' ),
        'before_widget' => '',
        'after_widget'  => '',
        'before_title'  => '',
        'after_title'   => '',
    ) );

/*................................Copy To Here................................................................*/

}

add_action( ‘widgets_init’, ‘twentyseventeen_widgets_init’ );
Note:- Here “theme-slug” is your theme name.
This will add footer widget areas to your theme.
If you want to add multiple sidebar in footer then just paste the code double time.But change the ‘name’ and ‘id’.

STEP 2: Now call the sidebar.
So after register the sidebar you can call it where you want but for footer we call it into “footer.php” file.
now paste the below code into your “footer.php” file

/…………………………..Copy From Here………………………………………………………./

`

`
/…………………………..Copy To Here………………………………………………………./

Note:- Widgets always called by its “Id”.
If you want to add multiple sidebar in footer then

/…………………………..Copy From Here………………………………………………………./

`

`
/…………………………..Copy To Here………………………………………………………./

STEP 3: Now add the CSS
Just paste bellow CSS in your “style.css” file

/…………………………..Copy From Here………………………………………………………./

.full-width
{
  width:100%;
  padding:15px;
  float:left;
}
.second-part
{
  width:50%;
  padding:15px;
  float:left;
}
.third-part
{
  width:33.33%;
  padding:15px;
  float:left;
}
.fourth-part
{
  width:25%;
  padding:15px;
  float:left;
}

/…………………………..Copy To Here………………………………………………………./

That’s it.now you can see your new footer with multiple sidebar.

Please follow Below steps to add size attribute or any other attribute you want in same way as :
Step 1 :Set up a new attribute: size

-> The attributes settings are localized under the products tab. Click “attributes” for open the attributes menu.

-> Keep in mind that on the attributes menu tab you will add the ‘name’ of the attribute, not the individual options. Let’s add now Size attribute.

-> Enter name, slug (in lowercase), select from a list or type out the attribute on the product. Here you have the option to have a custom order or to order alphabetically by name or ID. We left it custom for size below so we will order Small, Medium, Large, X-Large.

-> Now that we have added size attribute, Now we will configure the terms of this attribute by clicking “Configure terms”. This is where you will add the terms Small, Medium, Large, or X-Large size values.

-> Now add your sizes. Depending on your theme settings, the description may or may not show on product page. If not, then you don’t have to fill anything out in this field.

Step 2 : Adding a Variable Product in WooCommerce

-> Adding variable products is similar to adding simple product, but with the selection of variable as the product type, additional tabs are added to your product adding section.

General
-> Enter SKU of your product. Note: you will enter SKUs for variations later.

Inventory
-> Here we set the stock quantity of product, or leave blank to use the stock settings on the variable product.

Attributes
-> Select size from the drop down menu and click on add.
Click select all to add all sizes.
If you would like to remove any options, click the x next to the term name.
Select visible on the product page if you would like customers to choose from these sizes.
Then, click used for variations if each size has it’s own sku/price etc.

Be sure to click save attributes as these will not be visible on the variations tab until you save.

Variations
Now First, click the ‘add variation’ button for sizes. Now Select name of your sizes from the drop down menu. Then, fill in the product data for each size variants.

Note: variation price is required to fill or the variation will not show up at front-end of website.

-> If you have filled all the product information for your variations, you will able to see them on the front-end on product page of your web store.

$post = get_post();
get_posts(  array(
                'post__not_in' => array( $post->ID ),
    ));

get_posts( array(
        'posts_per_page' => 10, 
        'post_type' => 'post',
         'orderby'   => 'post_date',
         'order' => 'DESC'
    ));