WooCommerce is an open-source e-commerce plugin for WordPress. It is widely used to build an online store with WordPress.
On the other hand, Mailchimp is the most popular marketing automation platform and email marketing service.
When someone buys a product in your shop, WooCommerce captures their information for future purposes. The owner of an online shop can add this customer to their newsletter list. Using an email list, you can improve your sales by sending them new offers, products, discounts, etc. This is a proven strategy to encourage customers to return back on your store.
On the WooCommerce store, we will add the checkbox for ‘Subscribe to our newsletter’ on the checkout form. If a customer chooses it, their email will add to the Mailchimp list.
There are several plugins available that perform this task. But as a WordPress developer, you should prefer to write your own code wherever possible. It will reduce the number of plugins on your website and thus the pain of maintaining plugin updates.
We will use the Mailchimp API, and WooCommerce hooks to connect Mailchimp with WooCommerce. First, we have to grab the Mailchimp API key and Audience ID using which we interact with the Mailchimp API.
Get Mailchimp API Key and Audience ID
Login to your Mailchimp account. From the user icon, select Account.
On the next page, Click on Extra->API keys.
Under the Your API keys section, click on Create A Key and copy your API key.
Next, let’s get an Audience ID. For this, click on the Audience menu, and select the option Settings from the Manage Audience drop-down.
Click on the Audience name and defaults from the Settings.
On the next page, you will find your Audience ID.
Subscribe to our newsletter Checkbox
WooCommerce provides a lot of actions and filters to customize the checkout flow without touching the core files. Here, we intend to add a checkbox to the WooCommerce checkout form. We can do it using the action woocommerce_after_checkout_billing_form
. Through this action, the user can add new fields to the billing form in WooCommerce.
I will add the newsletter checkbox after the billing form. You may want to place it somewhere else. In that case, you may use any of the following hooks.
woocommerce_before_checkout_billing_form
woocommerce_after_checkout_billing_form
– I am using this onewoocommerce_before_checkout_registration_form
woocommerce_after_checkout_registration_form
woocommerce_before_checkout_shipping_form
woocommerce_after_checkout_shipping_form
woocommerce_before_order_notes
woocommerce_after_order_notes
Place the below code in your theme’s functions.php
file.
add_action( 'woocommerce_after_checkout_billing_form', 'subscribe_newsletter_checkbox' );
function subscribe_newsletter_checkbox($checkout) {
woocommerce_form_field( 'subscribed', array(
'type' => 'checkbox',
'class' => array('form-row-wide'),
'label' => 'Subscribe to our newsletter',
), $checkout->get_value( 'subscribed' ) );
}
Go ahead and check your checkout form. You should see the new fields added for newsletter subscriptions as shown in the screenshot below.
Connect Mailchimp with WooCommerce
We have added a custom field for the subscription checkbox. If a customer checks this checkbox, we need to add their email to the Mailchimp list.
WooCommerce provides an action woocommerce_checkout_update_order_meta
that will run when a customer places an order. Using this hook, I am connecting Mailchimp with WooCommerce.
Place the below code in your functions.php
file. It will get executed automatically when an order is placed.
add_action( 'woocommerce_checkout_update_order_meta', 'subscribe_user_to_newsletter' );
function subscribe_user_to_newsletter($order_id) {
if( !empty( $_POST['subscribed'] ) && $_POST['subscribed'] == 1 ) {
update_post_meta( $order_id, 'subscribed', 1 );
// add user to mailchimp list
$email = $_POST['billing_email'];
$audience_id = 'MAILCHIMP_AUDIENCE_ID';
$api_key = 'MAILCHIMP_API_KEY';
$data_center = substr($api_key,strpos($api_key,'-')+1);
$url = 'https://'. $data_center .'.api.mailchimp.com/3.0/lists/'. $audience_id .'/members';
$auth = base64_encode( 'user:' . $api_key );
$arr_data = json_encode(array(
'email_address' => $email,
'status' => 'subscribed' //pass 'subscribed' or 'pending'
));
$response = wp_remote_post( $url, array(
'method' => 'POST',
'headers' => array(
'Content-Type' => 'application/json',
'Authorization' => "Basic $auth"
),
'body' => $arr_data,
)
);
}
}
Make sure to replace placeholders with their actual values. Now, go ahead and place the order. You should see the email will get stored inside the provided Mailchimp audience ID.
I hope you understand how to connect Mailchimp with WooCommerce. Please share your thoughts and suggestions in the comment section below.
Related Articles
- Mailchimp Integration with Contact Form 7 Plugin
- Mailchimp Integration On a Website Using MailChimp API and PHP
- How to Integrate MailChimp Newsletter in Laravel Application
If you liked this article, then please subscribe to our YouTube Channel for video tutorials.
Thank you for the code and the explanation, works like a charm.
Just a quick note, on line 3 of the second snippet the ampersand got converted and it is not showing correctly.
I fixed it. Thank you for pointing it out.