Allowing customers to opt-in to a mailing list during checkout is a smart way to grow your email marketing channel. Where the opt-in field is located during the checkout process can determine the subscription success rate. This tutorial will show you how to change the location of the subscribe field for the WooCommerce AWeber Newsletter Subscription Plugin.
You will need the following before proceeding:
- Purchase and install the AWeber Newsletter Subscription plugin.
- Access to your theme’s functions.php file.
- Some PHP knowledge.
Step 1: Choose a New WooCommerce Hook for the Subscribe at Checkout Field Location
The AWeber Newsletter Subscription options can be found by visiting the WooCommerce admin settings and clicking on the Aweber tab.
Notice that there isn’t an option to control where the subscribe at checkout field is displayed on the checkout page. Hopefully, this will be added in the future, but for the moment we will have to improvise.
Because the plugin hooks into woocommerce_after_checkout_billing_form to display the subscribe at checkout field, we can ideally replace the hook without editing the plugin files. Note that the WooCommerce checkout hook being used controls where the field is positioned on the page.
Business Bloomer has put together a WooCommerce Visual Hook Guide for the checkout page that you can use as a reference. The following WooCommerce hooks are available:
woocommerce_before_checkout_form woocommerce_checkout_before_customer_details woocommerce_before_checkout_billing_form woocommerce_after_checkout_billing_form woocommerce_before_checkout_shipping_form woocommerce_after_checkout_shipping_form woocommerce_before_order_notes woocommerce_after_order_notes woocommerce_checkout_after_customer_details woocommerce_checkout_before_order_review woocommerce_review_order_before_cart_contents woocommerce_review_order_after_cart_contents woocommerce_review_order_before_shipping woocommerce_review_order_after_shipping woocommerce_review_order_before_order_total woocommerce_review_order_after_order_total woocommerce_review_order_before_payment woocommerce_review_order_before_submit woocommerce_review_order_after_submit woocommerce_review_order_after_payment woocommerce_checkout_after_order_review woocommerce_after_checkout_form
Once you have decided where you want the subscribe field to display on the checkout page, you can move onto the next step.
Step 2: Change the AWeber Subscribe at Checkout Field Location
The plugin creates a class and instantiates it with the following PHP code:
global $woocommerce_aweber; $woocommerce_aweber = new woocommerce_aweber();
In order to reference the woocommerce_aweber class, we will need to create a new function with access to the global scope and that hooks into wp_loaded. First, the function will need to remove the previous plugin action that displays the subscribe form field. This is so it doesn’t display twice on the checkout page. Second, the subscribe field will need to be added back into one of the above available WooCommerce hooks.
Copy and paste the following PHP code into your functions.php file:
NOTE: Make sure to replace the woocommerce_review_order_before_submit action hook on line 11 to change the location of the subscription field.
Final Thoughts: Use an Optimal Location for the AWeber Newsletter Subscription Plugin
If you are using a checkout plugin like the WooCommerce MultiStep Checkout Wizard, you may want to test which part of the checkout process yields the best subscription results. Showing the subscribe field directly under the billing section might be more intrusive to the customer. The alternative would be to place the field near the terms and conditions acceptance field.
Let us know what you think about this tutorial by leaving a comment below.
Need help? Our WooCommerce Development Service is a complete solution for new or existing WooCommerce websites, and we can help you install and configure the plugin in this tutorial. Call us at 602-633-4758 for a free consultation.
