WooCommerce integration
- Last updated on March 26, 2025 at 4:32 AM
There's no plug-and-play integration yet for WooCommerce, but with this guide, you can easily set up a WooCommerce custom card that looks up data based on the end user's email address.
With Custom Cards, you can display information from external sources, for instance, WooCommerce in the conversation view in Dixa, so the agent has all the necessary information available to them without having to switch between systems.
In order to get started, you'll need to have administrator access to your WordPress WooCommerce shop.
In the WordPress administration panel, go to WooCommerce > Settings > Advanced > Rest API (it might also be under WooCommerce > Settings > API > Keys/Apps in other versions of WooCommerce). Choose "Add Key".
Enter "Dixa" in the description field and select the right permissions (should be "Read"). Click "Generate API Key".
Next, you'll be presented with two keys: a consumer key and a consumer secret. Please write them down somewhere safe; you'll need them later and won't be able to retrieve them again.
Next, we'll start by adding a new custom card in Dixa. Log in to your Dixa account and go to Settings -> Integrations -> Custom Cards and click Configure Custom Cards. Then, choose "Add Custom Card".
- In the "Title" field, enter "WooCommerce".
- In the "Hook URL" field, enter the following (replace YOUR-DOMAIN.COM with your own website URL):
https://YOUR-DOMAIN.COM/wp-json/wc/v3/orders?search={{a_email}} - In the Authorization header field, you select Basi,c and under User name, you add your consumer key and under Passwrod you add your consumer secret
- In the Template Content field, copy-paste the code as shown below and click Save afterward.
- You're done! In conversations, you should be able to see a customer and order information if and when it is available in your WooCommerce order overview:
If you have any questions, please reach out to us at friends@dixa.com
The WooCommerce API still chooses to return data when the emailaddress is not added to the API call, instead of giving an error.
This means that when opening a Social media conversation or a Phone call tied to an end-user with no associated email address the integration instead shows random data that the WooCommerce API returns.
I’m sometimes getting a TCP idle timeout when the integration is loading
This error basically happens when the API endpoint that is being called is too slow to respond.
A WooCommerce setup is often hosted in your own environment, so it will be here you would need to troubleshoot further to improve the loading times.
Usually the cause is your hosting package being too limited, a database being too large and/or database indexes not optimally being created or used.
I'm getting an 301 error saying "Unexcpected character"...
This error means that there is a redirect on your domain, which Dixa Custom Cards does not support. Please check what the original domain url is, and use that instead.
I'm getting an 401 error saying "woocommerce_rest_cannot_view","message": sorry you cannot list resources
This error means that there is something wrong with the authentication settings on your WooCommerce server. It needs to be enabled to support Basic authentication which WooCommerce officaly support.
Template content code:
| <style> | |
| .woocommerce .tab-content .woocommerce-info-item .item-label { | |
| font-size: 14px; | |
| color: #a9a9a9; | |
| margin-bottom: 4px; | |
| margin-top: 0; | |
| } | |
| .woocommerce .tab-content .woocommerce-info-item .item-value { | |
| background: transparent; | |
| color: #717171; | |
| padding-bottom: 7px; | |
| border-bottom: 1px solid #f2f2f4; | |
| margin: -20px 0 10px; | |
| text-align: right; | |
| } | |
| .woocommerce .item-label-woocommerce { | |
| font-size: 14px; | |
| color: #808080; | |
| opacity: 0.7; | |
| margin-bottom: 10px; | |
| margin-top: 10px; | |
| } | |
| .woocommerce .order-meta { | |
| margin-top: 5px; | |
| margin-bottom: 0px; | |
| cursor: pointer; | |
| } | |
| .woocommerce .order-meta .s-icon.i-woocommerce { | |
| background: #c7e6a5; | |
| color: #fff; | |
| border-radius: 50%; | |
| width: 30px; | |
| height: 30px; | |
| display: block; | |
| margin-right: 10px; | |
| float: left; | |
| } | |
| .woocommerce .order-meta .s-icon:before { | |
| vertical-align: -16px; | |
| margin-left: 3px; | |
| } | |
| .woocommerce .tab { | |
| position: relative; | |
| margin-bottom: 10px; | |
| width: 100%; | |
| } | |
| .woocommerce .tab .label { | |
| text-transform: none; | |
| } | |
| .woocommerce .tab-side { | |
| width: 2px; | |
| background: #c7e6a5; | |
| height: inherit; | |
| border-radius: 1px; | |
| margin-left: 13px; | |
| margin-right: 15px; | |
| display: block; | |
| float: left; | |
| min-height: 30px; | |
| } | |
| .woocommerce .tab-content { | |
| max-height: 0; | |
| overflow: hidden; | |
| } | |
| .woocommerce .tab-content-holder { | |
| display: block; | |
| width: 100%; | |
| } | |
| .woocommerce input.hidden[type='checkbox'] { | |
| display: none; | |
| } | |
| .woocommerce input::after { | |
| position: absolute; | |
| right: 0; | |
| top: 0; | |
| display: block; | |
| width: 3em; | |
| height: 3em; | |
| line-height: 3; | |
| text-align: center; | |
| transition: all 0.35s; | |
| } | |
| .woocommerce input.hidden[type='checkbox']:checked ~ .tab-content { | |
| max-height: 999em; | |
| padding-top: 10px; | |
| padding-bottom: 5px; | |
| } | |
| .woocommerce .tab-content .order-meta .media-heading { | |
| line-height: 30px; | |
| background-color: #b6b6b6; | |
| } | |
| .woocommerce .card-table-holder { | |
| border: 1px solid #f2f2f4; | |
| border-radius: 8px; | |
| margin-top: 15px; | |
| margin-bottom: 10px; | |
| } | |
| .woocommerce .order-table { | |
| margin-bottom: 0; | |
| overflow: hidden; | |
| width: 100%; | |
| } | |
| .woocommerce .order-table tr th, | |
| .woocommerce .order-table tr td { | |
| background: transparent; | |
| padding: 0 4px; | |
| line-height: 1.42857143; | |
| vertical-align: top; | |
| border-top: 1px solid #e1e4e8; | |
| } | |
| .woocommerce .order-table tr:hover { | |
| background: transparent; | |
| } | |
| .woocommerce .order-table tr th { | |
| font-size: 14px; | |
| color: #808080; | |
| font-weight: 400; | |
| opacity: 0.7; | |
| padding: 10px; | |
| border-bottom: 1px solid #f2f2f4; | |
| border-right: 1px solid #f2f2f4; | |
| border-top: 0px !important; | |
| } | |
| .woocommerce .order-table tr td { | |
| color: #717171; | |
| border-bottom: 1px solid #f2f2f4; | |
| border-right: 1px solid #f2f2f4; | |
| padding: 10px; | |
| } | |
| .woocommerce .order-table tr:last-child td { | |
| border-bottom: 0; | |
| } | |
| .woocommerce a { | |
| padding: 4px; | |
| } | |
| .woocommerce .tab label { | |
| display: block; | |
| } | |
| .woocommerce table { | |
| background-color: transparent; | |
| max-width: 100%; | |
| } | |
| .woocommerce table > tbody > tr:nth-of-type(odd) { | |
| background-color: #f9f9f9; | |
| } | |
| </style> | |
| {% if results.size > 0 %} | |
| <div class="tab woocommerce"> | |
| <div class="tab-side"></div> | |
| <div class="tab-content-holder"> | |
| <label for="readmore-customer"> | |
| <div class="order-meta"> | |
| <h5 class="media-heading"> | |
| View customer details | |
| </h5> | |
| </div> | |
| </label> | |
| <input type="checkbox" name="readmore-customer" class="hidden" id="readmore-customer"> | |
| <div class="tab-content"> | |
| <div class="woocommerce-info-item"> | |
| <h6 class="item-label">Name:</h6> | |
| <p class="item-value"> | |
| {{ results[0].billing.first_name }} {{ results[0].billing.last_name }} | |
| </p> | |
| <h6 class="item-label">Address:</h6> | |
| <p class="item-value"> | |
| {{ results[0].billing.address_1 }} | |
| <br/> | |
| {% if results[0].billing.address_2.size > 0 %} | |
| {{ results[0].billing.address_2 }} <br /> | |
| {% endif %} | |
| {{ results[0].billing.postcode }} {{ results[0].billing.city }} | |
| </p> | |
| <h6 class="item-label">Phone:</h6> | |
| <p class="item-value"> | |
| {% if results[0].billing.phone.size > 0 %} | |
| ☎️ {{ results[0].billing.phone }} | |
| {% else %} | |
| Unknown | |
| {% endif %} | |
| </p> | |
| <h6 class="item-label">Email:</h6> | |
| <p class="item-value"> | |
| {% if results[0].billing.email.size > 0 %} | |
| ✉️ <a href="mailto:{{ results[0].billing.email }}">{{ results[0].billing.email }}</a> | |
| {% else %} | |
| Unknown | |
| {% endif %} | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <br /> | |
| <div> | |
| <div class="tab woocommerce"> | |
| <div class="tab-side"></div> | |
| <div class="tab-content-holder"> | |
| <label for="readmore-orders"> | |
| <div class="order-meta"> | |
| <h5 class="media-heading"> | |
| View orders | |
| </h5> | |
| </div> | |
| </label> | |
| <input type="checkbox" name="" class="hidden" id="readmore-orders"> | |
| <div class="tab-content"> | |
| {% for order in results %} | |
| <div class="tab"> | |
| <div class="tab-content-holder"> | |
| <label for="order_{{ order.id }}"> | |
| <div class="order-meta"> | |
| <h5 class="media-heading"> | |
| Order #{{ order.id }} | |
| </h5> | |
| </div> | |
| </label> | |
| {% if forloop.first == true %} | |
| <input type="checkbox" name="" class="hidden" id="order_{{ order.id }}" checked> | |
| {% else %} | |
| <input type="checkbox" name="" class="hidden" id="order_{{ order.id }}"> | |
| {% endif %} | |
| <div class="tab-content"> | |
| {% if order.shipping != nil %} | |
| <div class="woocommerce-info-item"> | |
| <h6 class="item-label">Shipping:</h6> | |
| <p class="item-value"> | |
| {{ order.shipping.first_name }} {{ order.shipping.last_name }} <br /> | |
| {% if order.shipping.address_1.size > 0 %} | |
| {{ order.shipping.address_1 }} | |
| <br/> | |
| {% endif %} | |
| {% if order.shipping.address_2.size > 0 %} | |
| {{ order.shipping.address_2 }} | |
| <br/> | |
| {% endif %} | |
| {% if order.shipping.state.size > 0 %} | |
| {{ order.shipping.state }} | |
| <br/> | |
| {% endif %} | |
| {% if order.shipping.city.size > 0 %} | |
| {{ order.shipping.postcode }} {{ order.shipping.city }} | |
| <br/> | |
| {% endif %} | |
| {% if order.shipping.country.size > 0 %} | |
| {{ order.shipping.country }} | |
| <br/> | |
| {% endif %} | |
| </p> | |
| </div> | |
| {% endif %} | |
| <div class="woocommerce-info-item"> | |
| <h6 class="item-label">Order created date</h6> | |
| <p class="item-value">{{ order.date_created }}</p> | |
| </div> | |
| <div class="woocommerce-info-item"> | |
| <h6 class="item-label">Status</h6> | |
| <p class="item-value">{{ order.status }}</p> | |
| </div> | |
| <div class="woocommerce-info-item"> | |
| <h6 class="item-label">Order price (inc. tax)</h6> | |
| <p class="item-value">{{ order.total }} {{ order.currency }}</p> | |
| </div> | |
| {% if order.tax_lines.size > 0 %} | |
| <div class="woocommerce-info-item"> | |
| <h6 class="item-label">Tax</h6> | |
| <p class="item-value">{{ order.tax_lines[0].label }} <br />{{ order.total_tax }} {{ order.currency }}</p> | |
| </div> | |
| {% endif %} | |
| <div class="woocommerce-info-item"> | |
| <h6 class="item-label">Payment Method</h6> | |
| <p class="item-value">{{ order.payment_method_title }}</p> | |
| </div> | |
| <div class="card-table-holder"> | |
| <table class="table order-table"> | |
| <thead> | |
| <tr> | |
| <th>Qty.</th> | |
| <th>Item</th> | |
| <th>Total</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| {% for item in order.line_items %} | |
| <tr> | |
| <td>{{ item.quantity }}</td> | |
| <td>{{ item.name }}</td> | |
| <td>{{ item.total | plus: item.total_tax }} {{ order.currency }}</td> | |
| </tr> | |
| {% endfor %} | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| </div> | |
| </div> | |
| {% else %} | |
| <div class="woocommerce-info-item"> | |
| <h6 class="item-label">This customer has no orders in Woocommerce.</h6> | |
| </div> | |
| {% endif %} |
Any or all information is provided for informational purposes only. The Customer is responsible for the accuracy and completeness of the information provided herein, as well as for the security of the solutions. To the greatest extent possible, Dixa limits its liability for the use of this information, which is provided on an "as is" basis.