DI Labs eCommerce

3D Printing sales using WooCommerce

I partnered with Redstar Creative to work on this project for a local Minnesota-based 3D Printing company. Redstar was helping them build a site for their company in order to sell their services online. They asked me to help out on the project by setting up the WordPress 3D Printing plugin they found and integrating the plugin correctly with WooCommerce to allow the client to sell their 3D printing service right from their website.

Using the WordPress 3D Printing plugin got us most of the way to the end-goal in terms of functionality, but there were some visual customizations that needed to get made as well as some technical hurdles that needed to be overcome.

The plugin allows the user to upload a 3D file or zip file of 3D files, and then visualizes the files in a <canvas> tag on the page. The user can then scale the size of the object to be printed, as well as choose what printer, material, and material color should be used to make the print.

WooCommerce Product Page Template

Configuring the plugin

The first step needed to integrate the 3D printing plugin for this theme was to add all of the data for the printers the client has available in their shop. For each printer added, we also needed to specify what materials were available to print with. Lastly, for each material available we needed to specify what color options are available in that material.

Modifying the template

The 3D plugin came with a product page template that already integrated with WooCommerce, but did not have any functionality included that would allow us to customize the look and layout of the template.

I ended up forking the entire plugin so that our changes to it would not be overwritten if updates became available for the plugin. Then, using WooCommerce hooks I was able to re-order the WC components of the plugin template to reflect the layout of the design I was given.

Lastly, I wrote some custom CSS to adjust the look and feel of the plugin so that it matched the visual aesthetic of the site as best as possible. This included styling the javascript-generated select menus for printers/materials.

Fixing plugin bugs

The plugin, while it did do a bunch of the heavy lifting for us, had some issues. Part of the functionality the plugin needs to provide in order to integrate correctly with WooCommerce is to determine the amount [volume] of material needed in order to print the file the user uploads.

This is how the sale is able to be priced based on the cost of printing time of the printer and also the cost of the material being printed with. While this functionality worked, somehow the weight of the printed object based on the material being used was not being passed back to WooCommerce, and therefore was not available to the shipping add-on we were using.

I ended up do a bunch of troubleshooting to find out how to expose the PHP/JS data in order to get the calculated weight of the object(s) to be printed and send that data to the shipping add-on in order to calculate the weight and get a shipping quote (instantly) to the user during the checkout process.