Skip to main content
All CollectionsAccount Setup
Add Surveys to WooCommerce
Add Surveys to WooCommerce

How to add ThoughtMetric post purchase surveys to your WooCommerce checkout page

Michael Signorella avatar
Written by Michael Signorella
Updated over 2 years ago

You can collect additional attribution data directly from your customers by enabling ThoughtMetric's post purchase 'How did you hear about us?' survey. Once configured, ThoughtMetric will insert a simple survey into your store's post checkout page asking your customers how they first heard about your store. The survey results are factored into the ThoughtMetric attribution model behind the scenes to increase data accuracy and fill in blind spots.

ThoughtMetric will insert a survey into your stores normal post-checkout page.

Adding the Survey to your post-checkout page

The ThoughtMetric pixel handles most of the heavy lifting when it comes to rendering the survey and handling the survey responses. You will need to have the ThoughtMetric pixel installed on your site before you can render the survey. For WooCommerce this means having the ThoughtMetric plugin installed and configured If you haven't done that yet you can follow the instructions here

1.) Add HTML snippet to page

The first step to adding the ThoughtMetric survey to your post-checkout page is to add a snippet of HTML code that will tell ThoughtMetric where you want to position the survey on the page.

Add the following HTML snippet to your post-checkout page.

<div id="thought_survey"></div>

2.) Style the survey

The survey comes mostly unstyled and by default will probably not match your custom site. You will want to add some css styles to your page to help the survey match the styling of your site. Below are some default styles to help you get started.

<style> 
#thought_survey {
width: 400px;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
}
#tm_question {
font-size: 19px !important;
}
#tm_thank {
font-size: 19px !important;
}
.tm_response {
padding-top: 3px !important;
padding-bottom: 3px !important;
}
#tm_submit {
padding: 7px !important;
}
</style>

Did this answer your question?