If you operate a small business, you’ve likely heard about Intuit and its reputation for gobbling up other financial tech companies. In 2009 Intuit acquired Mint for $170 million, and in 2020 they bought Credit Karma for $8.1 billion. “What’s that have to do with setting up Mailchimp on WooCommerce?,” you might ask.
Stick with me. I’m trying to drive home an all-to-often overlooked point here.
Mailchimp is the email newsletter platform Intuit purchased for $12 billion in 2021. That’s approximately $4 billion more than they paid for Credit Karma. Why should you care?
Intuit’s chief executive Sasan Goodarzi said in an interview with The New York Times, “The real magic is in the power of data” when discussing combining the two platforms and the potential of knowing what marketing efforts paid off, to whom, and when.
I say all of this to illustrate how valuable a newsletter is. The bottom line is if your clients don’t have an email newsletter, they’re leaving money on the table. If you as a developer don’t set your clients up with an email newsletter for their website, you’re also leaving money on the table.
There’s a bit of a process to setting up Mailchimp on WooCommerce, but it will be worth the trouble.
I’ll be going over how to maximize capturing newsletter subscribers effectively in addition to how to tie all of that in with WooCommerce. Capturing customer data and retaining customers is one of the very reasons Intuit bought Mailchimp. Being able to connect to a WooCommerce store allows for some interesting and valuable functionality that may not be available with other newsletter platforms.
Get started setting up MailChimp on WooCommerce
If you don’t already have the Mailchimp for WooCommerce plugin installed, it's the same standard procedure as installing any other plugin with WordPress:
- From the WordPress Admin dashboard navigate to Plugins > Add new > then type Mailchimp in the search field.
- Find Mailchimp and click Install Now.
- Click the Activate button.
After clicking the activate button, you’ll be greeted with a screen with options to connect an account or to create an account. If you have to create an account, you’ll be given the option to connect the account during the registration process.
Mailchimp will send an access code to the email address used for the newsletter, so access to that email address is necessary.
If you simply connect an existing account you’ll be asked to sign in to the Mailchimp account. Whether signing in to an existing account or registering a new Mailchimp will need to authorize access to WooCommerce. Click Allow.
Now that the Mailchimp account is registered and connected, it’s time for the setup process. I’ll mention here that this plugin doesn’t provide a form widget to add to the website. This will need to be done either using a forms plugin or using a code snippet generated by Mailchimp.
In this example, I’ll go over how to install the code snippet using Gutenberg and and save it as a reusable block for placement in pages and posts of the website. The code can also be used in widgets for sidebars and the website footer.
To get started with setup you’ll need to do the following:
- From WordPress admin, find WooCommerce in the main left menu.
- Hover your mouse cursor over WooCommerce, and then click Mailchimp.
- Follow the prompts to fill out the WooCommerce store settings.
- Click Start Sync when you’ve reached the third and final step.
You should now see additional settings available along with a message that the syncing process has started and that it could take some time depending on how many customers and orders are already in the store.
Create a sign-up form for Mailchimp
During the setup, it is possible to add a newsletter opt-in to the checkout pages in WooCommerce as well as the ability to track carts. These settings can be adjusted at any time. With that out of the way, it is time for the fun stuff.
As mentioned before, Mailchimp does not provide a form widget. Not to worry though! As promised I’ll cover how to create a reusable Gutenberg block where a newsletter sign-up form can be stored and used in the pages and posts.
- Sign in to the Mailchimp account
- In the left-hand menu click Audience to expand the menu, and then click Signup forms.
- Locate and click Embedded forms.
This will open a page to add new form fields, adjust settings, add custom tags, and to upgrade to remove Mailchimp branding from the form. Adjust the options as needed and continue to the next step by clicking the Continue button in the top-right corner.
This opens a new page with a code snippet that we’ll use with the Gutenberg editor. I recommend copying the provided code and pasting it onto a text editor like notepad for easy access later.
There are advanced features available like adjusting the HTML and CSS for the created forms, and it is well documented. I will not be covering that here.
The only option I would insist on before generating the code snippet is to remove the width setting found under the settings link. This will ensure the created form will be fluid and responsive in different sections of the website.
Create reusable block with Gutenberg for Mailchimp
Now it is time to create a new page with the Gutenberg editor and create our block with the newly generated code snippet.
- Navigate to Pages > Add new in the WordPress Admin left menu.
- Click the plus sign in the middle of the page and type HTML in the search field.
- Select the Custom HTML block.
Now just paste the code snippet generated by Mailchimp and place it into the empty HTML field. Simply click the Preview link in the toolbar at the top to ensure everything looks as expected when rendered in HTML.
After verifying the code snippet renders the HTML as expected, click the three-dot menu in the toolbar above the Gutenberg block and select Add to reusable blocks. Give it a name to make it easier to find the next time that block is needed. Click the Save button.
The next time this form is needed for a page or post it will be available as an option when inserting a block. Just search for the name of the reusable block we just created and add it to the page. Easy!
Some WordPress themes come with the ability to use shortcodes that are generated after creating a reusable block for placement in the widgets section or other parts of the template theme. If the theme being used supports this functionality, it is going to be easy to add the form to the footer and sidebars or even in pop-ups.
That being said, not all themes support this.
I have seen a couple of plugins that convert reusable blocks to widgets, but they’re fairly new with only a few reviews. I wouldn’t recommend using anything on a client's website that hasn’t been tried and tested for some time.
The code snippet can still be inserted into theme sections of a website using the Custom HTML widget. It is very similar to what we just did with the reusable block.
- Hover your mouse cursor over Appearance in the left menu of WordPress admin, and then click Widgets.
- Locate the section you want to add the newsletter form to and click the box with the plus sign.
- In the block that appears type HTML (just like before) and click custom HTML.
- Paste the code that was generated from WordPress, and then click Update in the top-right corner. The newsletter form should now appear in the section it was added to on the front end.
A word about popups, Mailchimp & WooCommerce
Having covered the WooCommerce checkout integration, adding a newsletter form to pages and posts, and inserting it into widgets will offer pretty good saturation of the website overall.
There’s one more thing that could be done to maximize capturing newsletter signups and that’s through the use of pop-ups. Most people understandably cringe at the thought of pop-ups, and for good reason.
They’re annoying. They get in the way of content, and slow users down. But there’s an art to using pop-ups.
If using a pop-ups plugin, I highly recommend using one that features timings and cookies. If the pop-up can set cookies it can pop up just one time and then get out of the way.
The pop-up won’t trigger for that user again until the cookies are cleared from the visitor's browser. One such pop-up plugin I’ve used for my clients is called Popup Maker developed by a developer of the same name. It provides all of the functionality just mentioned and can be made to look great as well.
If Mailchimp is connected to the WooCommerce store, pop-ups can be enabled from the Mailchimp website. To do that follow the same steps provided above for creating a form but click Subscriber pop-up instead of Embedded forms. Adjust the settings as needed. When finished click save in the top right corner.
There are no cookie settings for the Mailchimp pop-ups. There are timings, though. It can be set so the pop-up only fires when leaving the website. This way visitors don’t have to look at a pop-up as soon as they go onto the website.
A word about social media, Mailchimp & WooCommerce
Up to this point, I’ve covered ways to integrate Mailchimp for WooCommerce into a website. Another way to optimize newsletter signups is to use social media.
Mailchimp makes it possible for users to share a link on the web, or post a QR code for a hosted form that can be set up on Mailchimp. It is just a web page with a newsletter signup form.
To get started with that just log into Mailchimp, click Audience to expand the menu, and then click Signup forms. To the right of the menu click Form builder at the top.
On this page, there will be several settings for building the newsletter form. This form will be hosted on Mailchimp's website. After adjusting the design and settings as needed there is a link that can be copied and pasted anywhere posts and comments can be submitted online. It’s located in the box under Signup form URL.
All the bases should be covered at this point as far as basic setup. There are a lot of options available with Mailchimp and other newsletter providers that aren’t covered here.
Following the steps mentioned here will provide an optimal system for capturing new subscribers. But, what about the business of creating an email to send out? I’m glad you asked!
A word about newsletters, Mailchimp & WooCommerce
Remember when I said developers are leaving money on the table if they don’t set up a newsletter for their clients? Managing a good newsletter can be nearly as complicated as managing the website the newsletter is for. It is a job!
I’ve watched Mailchimp evolve over the years, and the newer features are really geared towards understanding and interacting with customers. They offer a lot of automation that it just takes time to set up and fine tune.
Clients aren’t going to want to deal with that, so it is another opportunity for developers to step up and provide the valuable service in either managing the newsletter or setting up the automation.
The business of creating and sending an email couldn’t be simpler. That really is the easy part. Mailchimp provides newsletter templates where the creator only needs to fill in the blanks and click send.
The part that takes some thought, creativity, and time is setting up all of the automation — like abandon cart emails, welcome emails, and more. There are email templates that need careful wording and consideration to reflect positively on the brand. There’s just a lot to do.
It’s worth it though! I remember a client and I used to be amazed when sending out a newsletter. Just the thought of when clicking that “send” button thousands of people were going to get that message.
Mailchimp used to have an animation of the Mailchimp mascot sweating bullets just before pressing a big red what looked like a nuke button just before confirming you want to send the email.
It was hilarious every time because that’s how everyone feels just before that button gets clicked.
Did I misspell anything? Is my grammar OK? Are the pictures with the right products? I hope this article has been helpful and encourages you to get busy on that newsletter. Until next time…