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, please visit the WordPress Permalinks (Admin->Settings->Permalinks) and ensure that your site uses ‘pretty permalinks’. Any other choice besides ‘Plain’ or default will do. Select one and save the permalinks.
Also, you will not be able to use ‘caching’ on the WooCommerce single product page. If your site uses any WordPress page caching plugins, or perhaps caching mechanisms employed by your hosting service, they will need to deactivated for the single product page. Anything that begins with:
Please disable caching for all product pages. Otherwise, your customers will not be able to add products to the Cart with an error of `rest_cookie_invalid_nonce`.
Finally, make sure you have the required two plugins. You will need WooCommerce and Smartlink 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 smartlink-product-designer.zip file you have downloaded and upload it to your Shop. Once this is done activate it as well.
Once the plugin is installed and activated, you will need to enter the license key you will have received when you purchased the plugin. Go to Admin->Settings->Smartlink Product Designer Activation and enter your ‘Master API’ license key. Click ‘Activate’. Then the settings will be available within Woocommerce->Settings->Smartlink. As well, under the Products menu there will also be a ‘Smartlink’ submenu which is your CPP control panel.
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’. Once 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 Admin->Settings->Smartlink Product Designer Activation and then click on the ‘API Key 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.
You can see your Subscription and API Keys from your account page on our server. Here you can see any sites you have and delete any API Key activations as well.
The plugin makes used of a background process that contacts the license server once per hour to validate the license key you have entered for activation. This is to ensure that you have an active subscription to the Smartlink Product Designer plugin. On occasion, the license server will be busy and the license check process can fail. Or perhaps you have cancelled your subscription on your account Dashboard on our server. The license check failure will display a message in the Admin similar to:
The plugin will not function for very long (<24hr) without an active license subscription …
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 > Smartlink. 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 Smartlink branding, GUID, API Key and perhaps the App name.
The 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 Key are two values that should be provided to you by the Smartlink service platform. This enables the application to work on your site and are unique to you.
The App name is also provided to you by the Smartlink service. It may be a generic one or one custom designed for you.
There are a number of settings on this page and most all of them can be ignored other than the ones mentioned already. There are there mostly for legacy purposes for existing long term customers. Generally, product ‘Smartlink’ settings should be used to replace all of these.
One of the first settings in the list on the Smartlink settings page is “Auto Complete Woo Orders“. This setting has two values, “Dispatched” and “Received by Shipper“. These will need to be determined by the Smartlink service for your account. When orders are submitted to the service 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 the Service 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.
Smartlink – 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 ‘Smartlink’ data tab with a range of settings. The most common one will be the all en-compassing iFrame Smartlink as obtained from the CPP for this product. Ensure only CPP exported values are entered here. Do -not- place any site specific values, such as URL’s for site callbacks. You may also enter individual settings, but those too are mostly legacy at this point. The iFrame Smartlink 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 Smartlink Designer – The Smartlink 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 ‘Smartlink’ designer product and on the ‘Smartlink’ data tab there will be a ‘grouped’ product setting found just under the iFrame Smartlink settings. Search and attach all the ‘child’ products. Use the iFrame Smartlink setting from any one of the CPP products. The ‘grouped’ setting must be enabled in the Custom Gateway layout config in the CPP.
Stock Items – The Smartlink service 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.
Variable 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.
Textual – The Smartlink service provides for Textual products. If your product will be one of these, then ensure the CPP Product ID is entered on the Textual data tab.
Under the Products menu you can find the Smartlink Control Panel. This contains both Downloader and Importer background processes that can be used to access and import products from your CPP into WooCommerce. The Control Panel has a Help tab that further discusses how to use it.
You can get your products from the Smartlink CPP into WooCommerce by importing a CSV that is exported from your CPP. We use WP All Import alongside its WooCommerce add-on, this allows you to import 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 re-upload 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 the Smartlink service.
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 Smartlink.
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 Smartlink service 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 Smartlink service representative will discuss how you want to ship your products and provide you with codes which allow you to ship using your desired methods.
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 outr plugin provides named “Smartlink Shipping”. Select this and click “Add shipping method”.
Here is an example with several Smartlink Shipping methods added already that are re-labeled to better Title their function on the Cart and Checkout:
Hover over the method Title 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 “Smartlink Shipping” but you will want to change the Title for this to be more descriptive of what you want the method title to be. This is what will appear on the Cart and Checkout. You will also need to set the ‘Type’ of the method, Flat Rate or Table Rate.
There are two fields for Carrier Code and Method code that should have been provided to you by your Smartlink service representative. You can then set whether or not the shipping is taxable, the handling fee and the cost of the shipping method.
Enter the flat rate Cost for the Shipping. This can be a numeric value or calculated via a shortcode. (Use [qty] for the number of items, [cost] for the total cost of items, and [fee percent=”10″ min_fee=”20″ max_fee=””] for percentage based fees) eg:
5.00 * [qty]
You may also have differing rates based on product Shipping classes in WooCommerce.
Create ‘min’ and ‘max’ value rules with associated costs. These are based on Cart quantities:
As you can see, there can be rules for product Shipping classes here as well. Certainly there can be rules that do not use shipping classes if you prefer.
If you want either the min or max to be open ended, above or below, then leave the cost value for it empty. In the image above, there is no rules to handle a quantity above 3 for the ‘one’ shipping class. On the cart, a quantity of 4 then, will not provide shipping rates and the order can’t be processed. Remove the ‘max’ value on the second ‘one’ rule to prevent this.
An easy way to go about testing your products is through coupons. The cash on delivery payment gateway can be used 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 Checkout 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 and you can test without needing 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.