How we customized WooCommerce with the help of plugins – print4display case study

It sometimes happens that when building an online shop, you’re not able to find the perfect theme that meets all your needs – both from the visual and functional perspective. Especially when the options you need go beyond the default possibilities of WooCommerce. So the best thing to do is to choose a theme that comes closest to your ideal page and to install appropriate extensions (plugins), which will enrich your website with custom functions.

On the basis of a web service we have created, we’ll show you how to customize WooCommerce with the help of plugins. Our shop www.print4display.co.uk was created using the WoodMart theme.

The website’s purpose is to sell advertising material, such as banners, stands, etc.  In its case, however, WooCommerce options were insufficient. We needed creative solutions in the shape of plugins (described below) and sometimes even additional lines of code.

Plugins we used during the web service customization, which extended default WooCommerce functions:

1. Price calculator of different product variants – Uni Woo Custom Product Options (Premium)
2. Shipping cost estimation based on the weight of products from the shopping cart – Flexible Shipping for WooCommerce
3. Creating your own order status – Custom Order Status for WooCommerce

1. Product price calculator

Because our shop offers a wide range of products and numerous possibilities of product modifications, one of the most important elements of the website is the price calculator of different product variants.

The basic plugin function allows to increase the number of possible product variants which sum up into the final price. To come up with the perfect solution, it was also important to enable clients to convert different units of measurement so that they could enter them in the most convenient way possible.   

What’s more, the product variants (such as width and height) chosen by the client had to fit within the measurement limits of a specific product. Therefore, the adopted solution not only had to have a price calculator but also had to offer the possibility to set appropriate validation rules.

It was also necessary to customize the size of the main product photo so that it changed accordingly with the chosen product variant. This seemingly trivial option was the main cause of why we have rejected most free plugins.

Most plugins, however, didn’t have any problems to multiply prices on the basis of a given variant.

In the case of print4display.co.uk, we used, among others, a price multiplier that changes depending on the shipping time. The shorter the shipping time is, the higher is the price multiplier and, consequently, the final product price. After reviewing available extensions and matching them with our requirements, it turned out that the best solution was the Woo Custom Product Options (Premium) plugin.

Apart from requirements connected to price calculation, our final choice of the plugin was also influenced by:

• compatibility with the newest WooCommerce version,
• web browser support,
• no contraindications for using the plugin with the chosen page template,
• product support offered by the plugin authors in the case of website errors caused by the extension.

After choosing the plugin, we moved on to the implementation. Unfortunately, in the case of these types of plugins, installation and basic configuration won’t be enough. Apart from general rules connected to price calculation and activation of the necessary plugin options, each product had to have a separate calculator formula that took different product variants into account.

It was a pleasure to work with this tool, as it opens up many customization possibilities. At the same time, it was challenging because we had to carefully read the plugin documentation and learn about the correct ways to use the extension before implementing calculators on given product pages. As to the option that allows for product image resizing according to chosen product variants, it was also necessary to have a basic knowledge of CSS selectors in order to indicate a specific “Settings” element responsible for displaying the image.

The plugin has inbuilt CSS styles that give it a default appearance. The last step was to add our own style sheets that would change the appearance of calculator elements to match them with the chosen WooCommerce theme.

2. Additional shipping cost estimation options

Another problem we had to face was connecting shipping costs with the product weight. The product weight was to be dependent on the options chosen on a given product page, for example, size or type of stand.

For this purpose, we also used the earlier discussed Uni Woo Custom Product Options (Premium) plugin. After setting all the rules connected to product weight, we started looking for the appropriate extension.

We chose the Flexible Shipping for WooCommerce plugin because it met our needs perfectly. It was easy to use and it matched the appropriate shipping cost in accordance with the weight of all products from the shopping cart.

We chose this plugin not only because of good ratings, but primarily because of ongoing technical support and regular updates, which can be useful if there later arises a need to create more advanced shipping methods. The Premium version of the plugin offers more options, among others:

• shipping classes support,
• shipping cost estimated on the basis of product item count and/or cart line item count,
• additional costs for price, weight, item, cart line item,
• stopping a rule (if the rule matches, the following rules are not calculated)
• cancelling a rule (if the rule doesn’t match, the shipping method is turned off),
• additional ways of estimating costs (sum, lowest and highest cost),
• maximum shipping cost per shipping method,
• coupons support for free shipping,
• CSV export.

Custom order status

By default, WooCommerce has several order statuses that allow clients to track their packages, that is:

• Pending payment,
• Failed,
• Processing,
• Completed,
• On-Hold,
• Cancelled,
• Refunded.

The additional option that our website lacked was related to custom order statuses that would match with the order process. Since the shop sells also virtual products, we could set our own order statuses, like graphic image delivery and client’s acceptance. For this purpose, we chose Custom Order Status for WooCommerce. The plugin is easy to use and offers precisely what we needed – without any unnecessary options that would increase the weight of your website and slow it down.

Summary

Using plugins for extending default WooCommerce functions is a great way to save time on writing codes by yourself. What’s more, plugins usually don’t require advanced technical knowledge. Remember that using different types of extensions may cause plugin conflicts, slow your page down, or affect its security. That’s why, when choosing possible solutions, you should consider:

• the plugin quality, which is often reflected in user ratings,
• the amount of time that has passed since the recent plugin update,
• plugin versions that support WordPress and WooCommerce,
• the number of installations,
• if the plugin authors reply to problems reported by its users.

This, however, is only the tip of the iceberg. More problems may arise. It all depends on the complexity of your project and the customer’s needs. If you have any questions regarding WooCommerce customization, we’d be happy to answer.