Setting up Shopify and WordPress for Multi-Currency

Custom Product Pages

We have set up products in WordPress by setting up custom Post Types that store the Product IDs through Advanced Custom Fields and using that we are able to use the Shopify SDK to build and add products to a cart that the user can use to then checkout through Shopify. This is essentially allowing us to build our own custom Product Pages that are not limited by the Shopify Store Set-up.

Location-based store default

Since the SDK did not support what we wanted, we had to find some creative solutions to ensure that a user can change the cart to the correct store and for the products in the cart to preserve across the change. As an extension we also built in an IP address check that determines which store the user should default to based on the region they are in: within the UK this would lead to the UK Store; any other EU country would lead to the EU store and all other regions to the US store. We did this using the PHP Library “Geo IP Location”.

A little backstory on how we have gone about setting up Shopify in our site: We used the SDK to build a cart model and have Post Types in WordPress that include a variant selector and “add to cart” button that picks out the products based on what variant the user has selected and what product page they are on.

We did this by first setting up a global variable that can keep track of which currency the user wanted to be in. This was straight forward to just store as a cookie of the site and reload the page. The reason we wanted to reload the page is to make sure any products on the page and the cart display the correct pricing and are regenerated in the cart correctly.

Once the currency is set we needed to guarantee the cart is generated correctly for the right store. This was done by removing the old cart ID and creating a new one. We did this by setting up a function to get the cart model. The function first gets the local stored Cart IDs, then based on what the current currency is removes them and creates a new cart with a new ID for the correct store’s currency.

As you can see the code can become quite long based on how many stores you are going to need. The idea is to make sure the cart model is correct for whichever currency the user needs and that cart is correct for the corresponding store.

The next part is to handle the cart change by passing the products over and correctly picking out the ones the user has selected. The way we did this was by capturing what the user was adding to the cart and storing it in a local storage variable, keeping the product name and size, and the Post ID keeping the product and quantity. Using WordPress built in Ajax, we are able to re-select all the same products for each story using PHP callback that uses the Post ID to look up the field data and return an array with the Product ID, size and quantity. With this array in the Ajax response we are able to use the Shopify SDK to re-add the items to the new cart.

With all this set up we are able to provide a multi-currency store selector in a WordPress Framework using the Shopify SDK. We can extend this to support any number of currencies and products. This gives the user the experience of a multi currency store but allows us to still deliver rich content and store layout. Using this system allows us to display different prices based on the user’s location.

This functionality is being well received by users who are now placing orders via these new stores, whilst experiencing a seamless browsing and buying journey.

To see more about how we used this and other strategies to build an award-winning website, take a look at our Vollebak case study.