Search Knowledge Base by Keyword

Theme Integration – WooCommerce Canada Post plugin with XStore Theme

WooCommerce Canada Post Shipping plugin is among the best shipping plugins out there. It provides advanced features that are essential for any E-commerce store. With its ability to get real-time Canada Post shipping rates, to 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 the 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 doesn’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 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 and 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 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 the discounts or sale on special occasions. Below is an image showing the Sale Badge on the product page.

Sale Badge
Sale Badge

Now let’s move onto the Cart Page. One of the most important aspects while working with the shipping plugin, the shipping rates, are 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 towards 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 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 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 in My Account Page

 

Customization

As discussed in the previous sections, we found shipping rates to be misaligned towards 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 “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 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 organised thn 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 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 query related to the integration and want some suggestions, feel free to let us know. If you have any query or some suggestions for the article, you can share your views in the comment section below. We will be more than happy to ponder upon your suggestions and will definitely add them to the current as well as future articles.

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 Invoice for International Shipments.
  • Allows store owners to print Canada Post Shipping Labels.
  • Supports Shipment Tracking.
  • Real-time Email Notifications for customers, containing 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
Last Updated On September 21, 2018