2. How to setup product & page

In this section we will show you how to add some product attributes and a shortcode to a custom page.

First of all, you need to create a new product and a new page.
Now we open the product detail and add 2 custom attributes. These two fields must be created accordingly in your shop.

• pod_woocommerce_product_id:
  We will add the item-id from the POD system (make a relationship between eCommerce-Product & POD-Item)
  
• pod_woocomemrce_page_id:
  We add the new PAGE-ID from eCommerce.
  We will come back to this attrbitute later in How to edit item in cart

Imagin that in eCommerce we have

• Product-Id : 259
• Page-Id: 260

Example:

• pod_woocommerce_product_id is 23.
  This is the item-id from POD system.
• pod_woocomemrce_page_id is 260
  This is the page-id from eCommerce.

Secondly, we will add a short code in the new page which we already created above.
The goal is, we would like to load the custom product in the custom page

[product_page id="259" /]

And there is an important point.
We need to create an additional file in the eCommerce system and register that file as a template.

configuration.php

<?php
    /*
    * Header section
    */
    get_header();
?>

<!-- Adding an iFrame -->

<?php
    /*
    * Footer section
    */
    get_sidebar();
    get_footer();
?>

Register as template

$this->templates = array('/woocommerce/configuration.php' => 'Configuration Page');    

Then you can see an option in the page detail.

Why we have to register a new file as a template ?
The goal is, we would like to embed an iframe in the custom page.
Because we apply the template for the new custom page, we are able to customize UI or add some special logic in this case.

Finally, if we open the custom page on browser, we are able to load the defined product (shortcode) in the background.

<?php
    /*
    * Header section
    */
    get_header();
?>

<!-- Adding an iFrame -->

<?php
    $atts = shortcode_parse_atts($post->post_content);
    $id = $atts['id'];
    $_product = new WC_Product($id);
    $pod_product_id = $_product->get_attribute('pod_woocoomerce_product_id');
    echo $pod_product_id; // we got 23
?>

<?php
    /*
    * Footer section
    */
    get_sidebar();
    get_footer();
?>

Conclusion, we are able to

1. Setup, customize product and page in eCommerce (WordPress)
2. Setup template and apply for custom page
3. Load product in custom page