Print Science Designer plugin inside Woocommerce Tutorial & Guide

This is a demonstration of the Print Science Designer embedded inside a WooCommerce site.

Your customer navigates through your WooCommerce site in the totally standard way.

For those products where the design online process is enabled, we will replace the button normally labeled 'Add to Cart' with a button labeled 'Personalize.' When your customer clicks the personalize button, the Print Science Designer will open in a pop-up window directly in your WooCommerce site.

This particular product is a two-page greeting card.

We're now looking at page one.

You may want to offer your customer a variety of different templates from which the customer can choose.

This particular product offers two design templates: one with stars and another without stars.

To select the version without stars, simply double-click.

On any given page, certain parts will be fixed and certain parts will be variable.

On this page, the tree and the snow are fixed.

Here we see a blue box highlighting a field that is variable and can be changed.

When the customer clicks on a variable field, it brings up a dialogue box which allows them to make changes.

Here we are changing the text itself.

You can allow your customer to change font face.

You can allow your customer to change font size.

And you can allow your customer to change the color of the text.

Now we will move to page two of this holiday card.

This variable field allows the customer to upload an image from his desktop.

The Print Science Designer supports many different image formats: JPEG, PNG, and PDF.

When your customer has completed the design online process, they will hit the 'Approve' button.

The customer is now back in the WooCommerce site, and we see the newly created product in the shopping cart.

Your customer will see a thumbnail image of the newly created PDF file, and if they click on that thumbnail image, they'll see an enlarged version.

If for any reason your customer wants to re-edit the PDF, they can click the re-edit button and they will resume the editing process from exactly where they left off.

The last steps remaining for your customer are to complete the checkout process.

From the customer's side, the entire purchase process is now complete.

Now we have switched to the administrative side of your WooCommerce site.

Here we are navigating to the order detail page for the order just placed by the customer.

This is the standard order detail page.

When the Designer plugin is installed, we modify this page to add an extra icon.

When you click this icon, you will download the newly created PDF from the designer server to your local computer.

Here we are downloading the newly created PDF from the designer server.

Here we can see the PDF file which we downloaded from the designer server to our local computer.

Here we have opened up the PDF using Acrobat, and we can see page one and here we see page two.

This concludes the demonstration of the Print Science Designer embedded inside a WooCommerce shopping cart.