While  the Cart Recovery for WordPress plugin let’s you easily edit the content of your recovery emails online using WordPress’s standard editor, you may occasionally want more control over the layout of the email. Perhaps you have an existing email template that you want to use to fit in with the rest of your store email campaigns – or maybe you just want to apply some minor markup /styling changes.

Example of Standard order button

Standard order button

All of the email markup is controlled by HTML templates which can be overridden in your WordPress theme without having to modify the plugin itself. As an example, we’ll look at changing the styling of the call-to-action button in the email. Out of the box – the button looks like this:Here’s the steps we need to go through to change the styling of that button.

Make  folder in your theme to hold templates

We won’t customise the templates in the plugin directly as they would be overwritten on the next plugin update. However – the plugin will check your active theme for customised versions of templates, and will use those in preference to the bundled versions giving you a simple way to modify templates. So that the plugin can find the templates you need to create a new folder called crfw in your theme (note: We always recommend using a child theme).

Copy templates into your theme

Next you’ll need to move any templates that you want to modify into the new crfw folder in your theme. The original versions of the templates can be found in wp-content/plugins/cart-recovery/templates. In our case, the template file we need is called email-cart-button.php, so we copy that into our theme, inside the new crfw folder.

Make your changes

Now you can edit the template files in your theme – safe in the knowledge that they won’t be overwritten by plugin updates. We’re going to open up the cart email button template, which looks like this:

<center><a style="box-sizing: border-box; font-size: 14px; color: #fff; text-decoration: none; line-height: 2em; font-weight: bold; text-align: center; cursor: pointer; display: inline-block; border-radius: 5px; text-transform: capitalize; background-color: #348eda; margin: 0; border-color: #348eda; border-style: solid; border-width: 10px 20px; margin: 2em 0;" href="{cart_url}"><?php _e( 'Finish your order now', 'cart-recovery' ); ?></a></center>

For a quick demo, we’ll change the button colour to black, by changing background-color: #348eda; margin: 0; border-color: #348eda; to background-color: #000000; margin: 0; border-color: #000000;

Example of a customised order button

Customised order button

There we have it …