Enabling WordPress and WooCommerce to create and sell unique products on demand.

Empowering webshops to create and sell unique products on demand

Most webshops allow diverse abilities to provide product selectables, like size, color and quantity etc. These shops are generally based on real physical products available from a storage wharehouse, which when selected are called on and shipped.

What about selling products that do not exist yet on demand. Or offering base products where users can adapt and customize it by adding text and graphics. As example a printshop wanting to allow users to create business cards from a blank template.

Looking around I could not find one affordable webshop application that has this ability so decided to try and apply it to WordPress and WooCommerce. As both are 'free' open source based applications

Cost effective simple implementation

Using free software to setup the webshop, I wanted the process to be 'free' as well. So, no this is not a 'plugin', just a simple 'punch-out' and 'punch-in' process that allows WordPress and WooCommerce to leaverage external value added services to create and sell products on demand.

The rules are simple. Don't break WordPress PHP by editing source files, but overload it with your own template, same goes for WooCommerce. Overloading ensures that if there are updates, you code will still work and nor be overwritten.

What steps are needed to create a closed loop remote product ordering system.

  • Ability for the webshop to expose remote value added service(s)
  • Ability for the remote service to create a SKU and supply all related information when the user presses the order button
  • Maintain integrity of webshop product/shopping cart processes
  • Ability for webshop to signal remote service for production once payment has been received
  • Ability for remote service to provide digital/physical product dispatch
Variable Product Webshop Process

Two ways to deal with a closed loop remote product configuration and sales environments

A closed loop system must be present to be able to ensure that if a product is ordered, the webshop and the producer know what needs to be made and delivered for which order

1. WebShop initiated order tracking system

The webshop creates a unique tracking number and passes this to the producer at handover. The user configures, checks and tests to ensure this is the product they want. If the user accepts the product and presses 'order' in the producers product environment, the users product information, preview materials as well as the unique tracking number. This way the webshop knows what information is for whaich order coming in.

2. Producer initiated order tracking system

In this scenario the webshop offers the producers interface for anyone and everyone to select and configure products. If the user presses the 'order' button in the producers environment,producer generates a unique identification and passes this along with the product information and preview material to the webshop. If the webshop responds with a 'payment received' with a corresponding producer id, the product is accepted for manufacturing and dispatched.

I prefer version 1 (webshop in control), but as we are dealing with WordPress and WooCommerce, I was in for a surprise. Many call themselves WordPress Guru's but as I found out few are true to this term for real 'under the hood' knowledge. Result, none of my WordPress colleagues had a workable solution to offer, but gave me great starting points to work with.

  • Don't mess with the foundation of WordPress and also WooCommerce.
  • WordPress Guru's are system configurators and maintainers, not programmers and 'plugin' developers.
  • Learn the Wordpress framework and correct development processes in 24 hours.

Why? Because non-programmers will opt for option 2 (and it has proven to be the case 100% to date). It puts the producer in charge of order generation, alleviates the webshop webmaster of nasty 'under the hood' stuff they have to do, and allows them to carry on managing the webshop as normal. Perfect solution! Right.

Remote Unique Product Ordering

How to integrate remote on demand products into a woocommerce environment using solution 2. The following is required.

  • A page in the shop website with an iframe to the remote product configuration site. (Note: for cross domain iframe handling a cookieless process is recommended)
  • A (new) PHP page on the shop site the remote production system can call to pass it SKU, order details, description and a thumbnail of the ordered product.

In our example we want to create a 'product page' for this unique new product and allow the user to configure any other selectables like size and color before going to the shopping basket.

<!DOCTYPE html>

<html>

  <head>

    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

  </head>

  <body>

<?php

require( dirname(__FILE__) . '/wp-load.php' );

/**

     * Add a product to the cart.

     *

     * @param string $product_id contains the id of the product to add to the cart

     * @param string $quantity contains the quantity of the item to add

     * @param int $variation_id

     * @param array $variation attribute values

     * @param array $cart_item_data extra cart item data we want to pass into the item

     * @return bool

     */

 

        global $woocommerce;

 

        $my_post = array(

      'post_title'    => 'Persoonlijke Wijndoos Ontwerp - ' . $_REQUEST['sku'] ,

      'post_content'  => 'Variablele wijndoosontwerp' . $_REQUEST['sku']  .'.',

      'post_status'   => 'publish',

      'post_author'   => 1,

      'post_type'     =>'product'

    );

 

    // Insert the post into the product database

    $product_ID = wp_insert_post( $my_post );

    if ( $product_ID ){

 $category_ids = array((int)66);

 wp_set_post_terms( $product_ID, $category_ids, 'product_cat');

   add_post_meta($product_ID, '_sku', $_REQUEST['sku'] );

  add_post_meta($product_ID, '_regular_price', 6.95 );

  add_post_meta($product_ID, '_price', 6.95 );

  add_post_meta($product_ID, '_stock_status', 'instock' );

 

 

 // Too Cart

   /*if ($woocommerce->cart ){

      $woocommerce->cart->add_to_cart( $product_ID );

     exit( wp_redirect( get_permalink( woocommerce_get_page_id( 'cart' ) ) ) );

}*/

 

 // Image

 $image_url  = "http://xebius.odoa.eu/Previews/".$_REQUEST['tmb'];

 $upload_dir = wp_upload_dir();

 $image_data = file_get_contents($image_url);

 $filename   = basename($image_url);

 if( wp_mkdir_p( $upload_dir['path'] ) ) {

  $file = $upload_dir['path'] . '/' . $filename;

 } else {

  $file = $upload_dir['basedir'] . '/' . $filename;

 }

 file_put_contents( $file, $image_data );

 $wp_filetype = wp_check_filetype( $filename, null );

 $attachment = array(

  'post_mime_type' => $wp_filetype['type'],

  'post_title'     => sanitize_file_name( $filename ),

  'post_content'   => '',

  'post_status'    => 'inherit'

  );

 $attach_id = wp_insert_attachment( $attachment, $file, $product_ID );

 require_once(ABSPATH . 'wp-admin/includes/image.php');

 $attach_data = wp_generate_attachment_metadata( $attach_id, $file );

 wp_update_attachment_metadata( $attach_id, $attach_data );

 set_post_thumbnail( $product_ID, $attach_id );

 

 

 // Too Product Page

 wp_safe_redirect( get_permalink($product_ID), 302 );

 exit;

    }     

?>

  </body>

</html>

Using woocommerce hooks and predefined onload and offload spects (between shop and producer - see variable image URL, static description and price, etc.) this routine will create a new product for woocommerce and send the user to the product page. You can also choose to send the user straight to the shopping cart (uncomment 'To Cart' section) if no further action is needed on the user side.

Place the code above into a new PHP file and direct the remote shop to call this when the order button is pushed, including the parameters you need to pass to the shop. A working example of this process can be seen at http://mijnwijndoos.nl, allowing users to create and order unique wine box designs.

Working Process

(Shop) Enter Site

Woocommerce Shopfront

(Remote) Iframe editor

Online Design Editor

(Remote) 3D Preview

3D Product Preview

(Shop) Order

Woocommerce Order Product Page