Woven Labels Direct

Woven Labels Direct is a family-owned business, based in beautiful South-West WA. Woven Labels specializes in custom printed and woven tags and labels across the textiles industry. Daily operations for Woven Labels direct includes taking orders both online and offline via both B2B and B2C channels, as well as printing/weaving orders, & dispatch nationwide.

When Woven Labels had first contacted Data Fidelity, there was an existing website which was completed approximately 2004. The site itself was entirely bespoke, however its success was centralised around a custom product previewing system, which was integral to its success. This custom product preview system would generate in real-time, a preview of a finished label or tag product on screen, based on a customers input. We had to rebuild this to be optimised and functional on a mobile, as well as create an E-commerce system inline with the label previewing system. The project goals with this were as follows:

1. Create a modern, mobile-responsive website which kept all the same bespoke functionality from the existing site
2. Incorporate E-commerce functionality along with the label previewing, including providing Woven Labels an order form with customer-specific product customisation (i.e. what text, font style, colour & motifs to print on orders)
3. Ensure the site is easily navigable, as many existing customers are not frequent users of a PC, and will need to be able to easily order products without getting lost on the site

The initial consultation was very straightforward as a website with E-commerce functionality was fairly commonplace. The E-commerce system however had to incorporate a custom product previewing system, so we had to ensure whichever technologies we used would allow for such a system, without being overly difficult to create or potentially modify, and be a robust solution which would not require constant updates.

Once the goals were in place, we went ahead and provisioned the hosting plan and set a staging environment to allow the new site to be viewable from a web browser, separate from the existing live site. We had chosen to build the platform on WordPress due to its enormous community-driven support, its accessibility, robustness, security and flexibility. As for the E-commerce system, we chose to use WooCommerce as the E-commerce system for Woven Labels new E-commerce site. This was for a few reasons:

1. WooCommerce powers well over a million existing sites globally
2. The technology is open-source, can be peer-reviewed and updates viewed on their Github Repository
3. WooCommerce has the capacity to incorporate a Variable product type, which enables products to be sold online with custom MetaData relating to specific orders, which can be forked to append custom information for specific orders.

Once WooCommerce was set up, labels and tag products could easily be published and made available for purchase, however we still had to create a means of a custom form to append to products. In addition to this, each product had its own preview dimensions, its own series of available fonts, colours, and motifs. This meant in order for the preview system to work, we had to be able to create a custom form, each form unique to each product.

To create such a system, we began by creating a series of HTML forms. These forms were created and configured separately to the products, but were appended to the product pages via means of a custom PHP script. This custom script would:

• Append an additional database column to the product_meta database table, called ‘Form’
• Insert a HTML form onto a product page, if the ‘Form’ database column was not blank, displaying the form ID which is present in the database column
• Parse form submission data into the product information as custom order_meta with form headings as meta headings, and form field entries as meta entries

Once the form system was created, it was on to creating the forms. There was an enormous amount of options available for label options! There was in total, a little under 58,000 potential combinations of font colours, styles, as well as background colours, motif images and colours. Each of these potential preview combinations had to generate in real-time on a product page, and display different combinations based on user input from text fields, radio buttons and dropdown fields.

Because of the sheer volume of form fields, and the volume of conditional logic for each form to show or hide based on user input, quickly maxed out common hosting processing power. We were then able to upgrade the hosting platform to a more powerful site host, and in addition to this we created a custom config.php file for WordPress, which manually forced a maximum PHP memory limit to match close to the maximum RAM available for the site host. This enabled enormous forms on the site (one particular form having 12,250 fields in one page alone) to load at a speed similar to a standard E-commerce site with a standard hosting plan.

In addition to the size of the product preview forms, using default WordPress admin dashboard pages with drag-and-drop editors were simply too large to load in a single sitting, many times well over 30 minutes to load a single form; To save time on the project, we chose to create and edit the HTML forms in XML format using NotepadQQ which is a powerful, linux-based code markup tool. From here the forms could be imported into the database once updated.

Although the forms and previewing system was very large and required much bespoke development, there were still standard webpages and web design to be completed on the site build. The site was built using Elementor which is a very powerful, robust front-end editing tool for WordPress. Elementor enables sites to be built very beautifully, with mobile responsiveness with a drag-and-drop design. One of the more popular reasons we used Elementor was because of its editing simplicity, with no code required it is simple for site owners to make changes autonomously, without the need for dependence on a web developer on hand for any updates.

In addition to using Elementor as a page builder, the final design & marketing campaign was launched by the team at Masters Of Digital, which ensured Woven Labels a consistent source of leads and sales generated from the new E-commerce site.

Once the project was completed, we ran a Pen Test on the portal to ensure there were no known vulnerabilities on the E-commerce site, and Woven Labels was provided a copy of the Data Fidelity Security E-book to provide staff and stakeholders. The estimated project time was 80 hours for completion and we were able to complete over a period of six weeks, including a number of minor revisions and feedback from Woven Labels on accessibility, function and appearance.