Here are comprehensive step-by-step instructions on how to install and set up the product designer plugin on your site.
If you haven’t already purchased the plugin, please purchase it here.
Before you start to do anything, make sure you have the required two plugins. You will need WooCommerce and Gateway3D Product Designer installed. To install these plugins, you need to be within the WordPress admin and go to WP Plugins->Add New. This will give you the option to upload a zipped up plugin file or search existing WordPress plugins. Find WooCommerce by doing a search, install and then activate it. Then ‘Add New’ again and select upload, then select the woocommerce-g3d.zip file you have been provided and upload it. Once this is done activate it as well.
Once Gateway3D Product Designer is installed and activated, you will need to enter the license key you will have received when you purchased the plugin. Go to WP Settings->Gateway3D Product Designer and enter both the license key and the license email address. Click save to activate the license. Then the Gateway3D Product Designer settings will be available within Woocommerce->Settings->Personalise-iT.
If at any time there are issues with activating the license and you are sure you have activations available, it may be useful to de-activate the plugin with the WordPress plugin manager, re-activate the plugin, and then try to activate the license. De-activating the plugin resets all internal licensing data.
You may need to use the plugin on several sites, perhaps a development or testing environment prior to going ‘live’. Oncel you have entered the license key on the testing site and you wish to use it on the live site, you will first need to deactivate the license on the testing site. Go to WP Settings->Gateway3D Product Designer and then click on the ‘License Deactivation’ tab. Then check or enable the checkbox and save the changes. This will disable the license on this site and allow you to enter it on another site.
Now you have the plugin installed and the license key active, you’ll want to put in some basic settings. Navigate your way to WooCommerce > Settings > Personalise-iT. Here you will find the fields for setting up the plugin. In most circumstances you will only need to set up a few of them, if you have a more advanced set up please get in touch so we can advise you what to do.
The settings that you need to concern yourself with are the Gateway3D branding, GUID, API Key and App name.
The Gateway3D branding field will need to be set to your company name as this replaces the default `Gateway3D` wording for Order Reference on customer emails and the My-Account page Orders.
The GUID and API are two values that should be provided to you by Custom Gateway, this is to enable the Custom Gateway application to work on your site and are unique to you.
The App name is also provided to you by Custom Gateway. It may be a generic one or one custom designed for you.
The first setting in the list on the Personalise-iT settings page is “Auto Complete Woo Orders“. This setting has two values, “Dispatched” and “Received by Shipper“. These will need to be determined by Custom Gateway for your account. When orders are submitted to Custom Gateway they will then contact your site with Order Status changes as the order progresses though their system. Normally, the final stage is to send a “Dispatched” order status when they have completed the processing of the Order and when they contact your site with this status, our plugin will set the WooCommerce order to “completed” status and that will email the customer with final emails notifying that their order is on the way.
However, if you have shipping set up with Custom Gateway and the shipper supports returning a shipping tracking number, then you can set this setting to “Received by Shipper” and now when they contact your site with a “Dispatched” order status, our plugin will ignore that and instead wait for the final “Received by Shipper” order status. At that time we will then mark the WooCommerce order as “completed” and include the Shipping Tracking Number in final emails to the customer.
Print on Demand – These are just WooCommerce Simple products and should be selected from the Product type drop down. There will be a new data tab for Simple products labeled `Print on Demand`. In this field you should enter the Custom Gateway Print on Demand reference number for this product as provided in the CPP. On the Inventory tab, enter an associated SKU that matches with the CPP.
Variable Print on Demand – These are just WooCommerce variable products. Create attributes and variations following standard procedures for WooCommerce Variable products. On each variation, there will be a new field under the variation data fields for the Custom Gateway Print on Demand reference number. Ensure the Variation has a corresponding SKU to match the product in the CPP.
Personalise-iT Designer – These will be the designer products that allow for user customization such as t-shirts or phone cases. Upon selecting this product type from the drop down, there will be a ‘Personalise-iT’ data tab with a range of settings. The most common one will be the all en-compassing iFrame display URL as obtained from the CPP for this product. You may also enter individual settings. The iFrame URL setting should have App name and Layout configs for desktop usage. Also provide the App names and Layout configs in the `mobile` device settings and these will be used instead for mobile users.
Grouped Personalise-iT Designer – The Personalise-iT designer product type can also have attached WooCommerce Simple products and the parent Designer product acts as a WooCommerce Grouped product. You may have designer capable t-shirts, each with a variety of sizes. Create all the needed Simple products for sizes in WooCommerce with corresponding SKU’s from the CPP. Set the WooCommerce Catalog visibility for these products to ‘hidden’. Create a Parent ‘Personalise-iT’ designer product and on the ‘Perszonalise-iT’ data tab there will be a ‘grouped’ product setting found just under the iFrame URL settings. Search and attach all the ‘child’ products. Use the iFrame URL setting from any one of the CPP products. The ‘grouped’ setting must be enabled in the Custom Gateway layout config in the CPP.
Custom Gateway Stock Items – Custom Gateway provides for standard Stock Items. If your product will be one of these, then ensure the correct SKU is entered on the Inventory data tab and set the WooCommerce product type to this from the dropdown.
Variable Custom Gateway Stock Items – You may have multiple Stock Items that are differentiated by a common value such as t-shirt sizes. You might want to use these Variable products where the variations are created following standard procedures for WooCommerce Variable products. Create your product attributes and assign to the product. Create variations on the product using these attributes. Ensure the correct SKU from the CPP is entered on each variation.
The easiest way to get your products from the Custom Gateway CPP into WooCommerce is by importing the CSV export. We use WP All Import alongside its WooCommerce add-on, this allows you to import a the file from Custom Gateway and map the fields to the correct place in WooCommerce. WP All Import will also store any uploaded files so if you ever have an issue with the import you can redo it without having to reupload the import file.
But before you do anything to help speed things up later you want to download this file. Go to All Import > Settings in the WordPress dashboard. At the top you will see you can choose a file and import a template, import the file you just downloaded. This will later allow us to automatically map the fields from the import file to the correct fields in WooCommerce if you’re using the standard export from Custom Gateway.
Now return to the import and either upload a file or select one you’ve previously uploaded.
Once you’ve either uploaded or select the file you want to import, simply change the post type to be WooCommerce Products.
Once you’ve done this, press “Continue to Step 2”. Step 2 gives you a preview of what you import looks like, so you can see on the left hand side the column title and on the right hand side you can see the row data. Make sure this is as you expect it as this is the data you will be importing into products.
Once you’re happy with this, press “Continue to Step 3”. Step 3 is where you will be matching up the fields from the import file into WooCommerce Products. Now if you just want a standard import you need to scroll to the very bottom of the page. Where it says “Load Template…” change it to “Gateway Product Import”.
You should then notice the page automatically pulls in the fields from the spreadsheet and changes the product type to be Personalise-iT.
One of the most important areas you need to check is the custom fields section. This is how we will be importing the iframe URL. If you open the custom fields tab after you loaded our template you should see that is importing the iframe URL into woocommerce_ec3d_iframe_url field and it’s putting mobile in the woocommerce_ec3d_mobile_app field.
If these aren’t filled in you will not import the iframe URL into the product. If you only have the woocommerce_ec3d_iframe_url your iframe will not work on mobile. When we fill in woocommerce_ec3d_mobile_app with mobile, we’re changing the app layout on mobile to allow the iframe to automatically be responsive.
If you have extra fields for example description, you will need to map these yourself as the base import file we provide is based on one we did for ourselves.
Once you’re happy with this, please click “Proceed to Step 4”. At this point you will see a unique identifier should have been automatically generated. You don’t need to worry too much about this, it just allows each product in your import file to be brought across correctly.
There are also a few more options, the most import one is “Update existing posts with changed data in your file”. What this means is are you import all your data in the products. If you are leave it as it is, but if you’re reimporting all your products because you’ve changed the price for example, you can select “Choose which data to update” and then select which fields you want to update and you won’t lose the rest of the data up reimporting.
If you’re happy, click “Continue”. You’ll now be told if everything is okay and you can run the import. Depend on how large your import is it can vary between a few seconds to a few minutes.
Once this has been completed, it’s best to go into Products and make sure everything has imported correctly.
If you do have any issues whilst doing this, you can always check the developers own video on how to import products.
Shipping is one of the most import steps you need to sort and it will require a chat with your Custom Gateway representative before you can add it. So please ensure you talk to them before attempting this step. The reason we ask you to do this is because your Custom Gateway representative will discuss how you want to ship your products and provide you with codes which allow you to ship using your desired provided.
Navigate to WooCommerce > Settings > Shipping. In here you will set up your shipping options. Select “Add Shipping Zone”.
Enter a name and region(s) based on what this will be, so for example if you are shipping to the United Kingdom you might want to call the zone UK. This shouldn’t even appear on the front end of the site so don’t worry too much.
Once you’ve set up your name and regions, please click “Add shipping method”. In here you will see the standard WooCommerce shipping options and then one that the plugin provides named “Gateway3D Shipping”. Select this and click “Add shipping method”.
You should now see something like the screenshot below.
Hover over the method and you should see some options appear, please click “Edit”. In here you should be able to see some more options for you to fill in. By default the method title is set to be “Gateway3D Shipping” but you will want to change this to be more descriptive of what you want the method title to be. There are two fields for G3D Carrier Code and G3D Method/Service code, these should have been provided to you by your Custom Gateway representative when you spoke to them earlier. You can then set wether or not the shipping is taxable, the handling fee and the cost of the shipping method.
Once completed it should look something like the below screenshot. In this example I’ve used the G3D Carrier Code and G3D Method/Service code for Royal Mail First Class and made up a price. I’ve also set the name to be more descriptive based on the G3D Carrier Code. Once complete hit “Save changes”.
Now if you return to the main shipping zone page you should see you have shipping set up for a particular zone.
Please repeat this step if you are shipping to multiple zones or you have multiple methods. If you have any special requirements for shipping please feel free to get in touch to discuss them with us.
Also note that there are also quantity based rules also available to you. But if you have filled in both only the flat rate will work. So if you do want to use the quantity based rules please do not enter anything for the flat rate.
An easy way to go about testing your products is through coupons. As of the 5.7 release, the cash on delivery payment gateway can be usesd for testing. This way no payment is required and you do not need to enter any coupons. If you do want to test with coupons please follow the guide.
To add a coupon you need to go to WooCommerce > Coupons > Add New.
This will take you to a screen very similar to posts/pages but with a new meta box. You want to start off by naming your coupon something only you and your team will know as it’s for testing purposes and you don’t want any customers knowing this. For the purposes of the documentation I’ve named our’s ‘jigowatt_test’. Once you’ve given it a name you need to change the ‘Discount type’ to ‘Basket %’. This will allow you to set a % of the total basket amount, so in the ‘Coupon amount’ field enter 100, meaning when the coupon is applied it will take 100% off the basket amount. You should then have something set up similar to this:
Once you’ve published the coupon add an item to the cart and make your way to the cart page. You should now notice you have a field for adding the coupon.
You then want to select ‘Apply Coupon’ and you should see the coupon is now applied in the cart calculator and you can test without taking any payment.
Now that your products are imported and your shipping is set up you are going to need to set up other areas of the site like payment gateways. For that I suggest you look at the official WooCommerce documentation. This gives a good guide on how to do this which can be found here.
Jigowatt is a website design agency so if you don’t have a website we can help with that too.