WooCommerce Canada Post Plugin compatible with XStore Theme

xstore theme

WooCommerce Canada Post Shipping plugin is among the best shipping plugins out there. It provides advanced features that are essential for any Canadian E-commerce store. With its ability to get real-time Canada Post shipping rates, that of letting store owners print Canada Post shipping labels, this is a complete shipping solution. However, to run an online store successfully, accuracy must be accompanied by elegance. To attract customers, the content on the website needs to be relevant as well as beautifully displayed. This way it will be easier to attract not only existing customers but new customers also. There are a lot of themes available to personalize your store, but most of them are either too difficult to work with or don’t provide must customizability.

In this article, we will be discussing one such theme with which you can easily beautify your WooCommerce store. This article will cover how you can combine the accuracy and advanced functionality of the WooCommerce Canada Post Shipping plugin with the personalization of XStore Theme.


The Product and the Cart Page

While working with any shipping plugin, the real action does happen in the store’s back office. Be it Order confirmation, printing shipping labels, or getting the tracking details, everything seems to be on the back end. However, to reach that far, one has to add some products to the cart and purchase them. The product page is one of the most important pages for any store. Using the XStore theme you can easily enable the “Catalog Mode” to hide the ‘Add to Cart’ option. Moreover, the theme also provides the option to customize the Sale Badge. The sale badge allows store owners to highlight discounts or sales on special occasions. Below is an image showing the Sale Badge on the product page.

Sale Badge
Sale Badge

Now let’s move on to the Cart Page. One of the most important aspects while working with the shipping plugin, the shipping rates, is visible to the customers on the cart page. Hence, it is very important that there should be nothing unpleasant on the Cart Page when it comes to design. However, while working with the theme, we noticed that the Canada Post shipping rates are aligned to the right side. The image below shows the shipping rates on the cart page.

Cart Page showing Right-Aligned Shipping rates
Cart Page showing Right-Aligned Shipping rates

Checkout Page

After selecting the shipping method, the buyer proceeds to the checkout page. This is where he needs to enter the Billing Address and select the mode of payment. However, the issue that we faced on the cart page, was again visible on the checkout page. The shipping rates alignment seems to be toward the right. Here is an image showing the checkout page and the shipping rates.

Checkout Page showing Right-Aligned Shipping rates
Checkout Page showing Right-Aligned Shipping rates

XStore theme allows the addition of custom CSS to customize the theme. We will be addressing the alignment in the later section of the article. Now let us see how the My Account page looks with the theme.


My Account page

My Account page on any website contains important information about the buyer. It also contains the details of the buyer’s previous order history. It is very important that the details on the My Account page such as Order List, Tracking Details, etc are visible without any flaw. We have attached the images showing the My Accounts page, Order List, and the tracking details of one of the orders placed using the WooCommerce Canada Post Shipping plugin.

My Account Page
My Account Page

Order List under My Account Page
Order List under My Account Page

Order Details in My Account Page
Order Details on My Account Page

Customization

As discussed in the previous sections, we found shipping rates to be misaligned toward the right side. But the best thing about the theme is that it allows you to customize the elements on the page independently. While editing the page, you need to go and select the “Additional CSS” option. This allows you to add custom CSS code to the theme. The following image shows the CSS that we added to the theme to align the shipping rates properly.

Adding CSS to the theme
Adding CSS to the theme

Using this option you can personalize your website in a detailed manner along with the features built-in in the theme settings. Once applying the CSS code to the theme, the cart, as well as the checkout page, looks something like the images below.

Cart Page After Customization
Cart Page After Customization

Checkout Page After Customization
Checkout Page After Customization

You can clearly see in the above images that the shipping rates are properly aligned and look more organized than before. For easy understanding, we have attached a video tutorial showing the whole process. You can check out the video below.


Summary…

So this article is about the integration between the WooCommerce Canada Post Shipping plugin with XStore Theme. In this article, you will see the compatibility of the plugin when it is installed in a WooCommerce Site running XStore Theme. This integration involves some customization based on the store owner’s preferences. We have attached a video of some of the customizations that we had to do in order to achieve full compatibility. But again, this depends on the WooCommerce store. If you have any queries related to the integration and want some suggestions, feel free to let us know.


For your convenience, we have attached the plugin as well as the theme’s link down below along with some key features. Go and check them out.

WooCommerce Canada Post Shipping Plugin

  • WooCommerce shipping plugin supporting real-time Canada Post shipping rates.
  • Supports Price Adjustment for both adding handling charges and providing discounts.
  • Supports Invoices for International Shipments.
  • Allows store owners to print Canada Post Shipping Labels.
  • Supports Canada Post Tracking.
  • Real-time Email Notifications for customers, containing shipment tracking details and shipping label.
  • Supports a Basic Version of the plugin.
  • Premium Version – $69

XStore Theme

  • Easy 1-minute Installation.
  • High-resolution, widget-ready theme.
  • Blog Layout and Dark-Light Version.
  • Compatible with all the popular browsers like Chrome, Safari, Edge, Opera, IE(10, 11), etc.
  • Regular License – $49