PSD TO WooCommerce | Figma to WooCommerce Theme Conversion

Project Goal

The client owns a WooCommerce store of custom map printing for athletes and adventurers where the users can create posters of their routes with ready-made frames but it does not provide a wide range of customization to the users.

Therefore, the client approached our development team to have a custom map builder plugin that provides complete customization of the map to the users and allows the merchant to manage the personalization and keep the record of all the customization done by the user. We provided a custom solution in which we added:

• Theme Colors
• Route colors
• Label placements
• Picture orientation

Solution

After grasping all the information regarding the requirement, our development team started the process. We developed a custom-designed print-on-demand WordPress plugin. Our main objective of creating a custom WordPress map plugin, is to provide endless customizing options to the customers. We divided the development process of the custom plugins into two modules:

• User
• Admin

✔️ User

With our custom-designed WordPress plugin, the consumer can create a map for any location with their choice.

The WordPress Map Plugin generates a high-quality printed map with streets and precise geographic coordinates. With this, the user can zoom in and zoom out the map. We integrated the map plugin with the Mapbox API.

✔️ Mapbox API

We used Mapbox API for the WordPress map plugin to offer geographical information about the location. The integration gives precise map results for any place users choose. Users can zoom the map to ensure that it is perfectly aligned with their needs. As a result, they can print the specific region with enough map detail.

By default, the Mapbox API offers 1280×1280 pixels and if the user asks for a larger dimension than the quality of the map will be impacted. We used the Mapbox Account dashboard to print a high-resolution image with dimensions 8000×8000 pixels. Therefore, we created a dynamic functionality to generate a link where a vendor can download the high-resolution maps directly from the button.

✔️ Custom Color Theme

The ability to deliver color themes is one of the best features of our custom WordPress map print plugin. The user has complete control over the colors of the landforms and seas. They can choose the color from a variety of options.

✔️ Change the title and subtitles

Users can add text to their maps with the help of the custom WordPress Map print plugin. They can customize the map by adding a title, subtitle, and tagline, we have illustrated it in the GIF below.

The customers may see a live preview of all the changes. The fields begin changing the map properties on the live screen right away.

✔️ Customize the poster layout

The user can now choose the final layout of the personalized map poster after completing the basic designs. The map’s layout, orientation, and measurements are all included. The user can customize the position of the title and subtitle, as well as the map’s form, borders, and orientation.

The map’s location, as well as the text spaces beneath it, can be adjusted by the user. Depending on their needs and the format of the final design, they can switch between Portrait and Landscape mode. The user can then save the final design and order a personalized map print. 

✔️ Manage personalization

WordPress is without a doubt the greatest CMS available. Owners have complete control over all front-end activities via the admin interface. Furthermore, the panel gives complete control over plugins.

We built a custom Map builder plugin to benefit the WordPress admin. It’s simple to set up and integrates seamlessly with your store. The plugin provides merchants with a wide range of features that allow them to manage every aspect of their custom Map creation and convert the site into a revenue-generating store.

✔️ Colour schemes

The map’s administrators can designate common color combinations. The color combinations are unrestricted with the WordPress print-on-demand map plugin. Custom combinations can be easily applied to the live map.

We set up different colors for streets, water areas, landforms, and buildings so fo the city.

The admin can preview the combinations in real-time in the panel and store them as a “Style.” And also the admin can delete or edit them.

✔️ Fetch details

Our custom map WordPress plugin also passes the information of the customer to the merchant in the form of attributes. The administrator can keep track of every single request made by the user. The admin panel receives all of the map’s details, including the title, subtitle, and tagline, as well as the measurements.

In addition, we also provided a custom-designed “Export Image” button alongside the properties. Further, it opens up the Mapbox studio editor, from where the vendor can print a high-resolution map with the customer’s chosen location and style.

✔️ Final Thoughts

We delivered a WordPress plugin for custom map printing to our client, where the user has to pay for the custom map print once the map is customized.
If you are also operating the same business and want to expand through online channels, then you can hire WordPress developers to build a clutter-free and highly manageable website.

Client’s Feedback

5.00

“Was all good. They are a nice team to work with.”

Project Goal

Product Customization tools can be a viable option for every e-commerce store. It can aid online retailers in increasing conversion rates. Moreover, it allows the customer to choose from various options available. 

The client had an offline business of custom book printing, but it did not help gain customer recognition. To make this successful the only option is to build a WordPress Website. The customers can personalize the existing storybooks and can add their information to them.

Therefore, the client approached us to build a website and add a custom WordPress plugin to customize books for kids.

Solution

️To meet the client’s requirements, we created a PHP-based website on which our development team used Turn.Js to provide a live book preview option to the buyer. The Cover Page of the storybook will be accessible to users.

In the live preview, the user can turn the pages like a real book. They can look through the book’s content. Additionally, the customer has the option to evaluate the final customizations. Taking into account the client’s requirements we offered some custom features.

✔️ Users can personalize the whole book

We designed a custom WordPress plugin through which the users can now see their name on the cover page and select the character’s name and the avatar they want on the book. The client provides tailored books for both boys and girls.

As a result, we have created various alternatives for choosing the proper book. I placed the likes of Veils and shoulder attachments under Removable accessories or optional customization.

✔️ Added custom fields for more characters

The user can add custom names for more characters like father, mother, and closest friend of the reader. The whole content is customized along with the presence of the character.

✔️ Custom message for the reader

️The buyer of the book can add a custom note for the reader on the first page. For which we have created a separate form where the user can add the message and save it.

Apart from customization, we have also offered a live chat option, Ground Shipping, multiple language options, and added PayPal for the payment.

✔️ Final Words

️We found that our WordPress book preview tool is helping our client to achieve worthier conversion. Therefore, if you are also running an e-commerce store and want to develop a product customization tool for unprecedented business growth, then our team can help you in the development of a similar platform customized to your needs.

Client’s Feedback

5.00

“Highly Qualified team that will go above and beyond to ensure they resolve any outstanding tasks. Did an amazing job with our highly customized website. They are very courteous and a pleasure to work with.”