How to Customize WooCommerce Subscription Email Templates

WooCommerce subscription email templates featured

This is a guest post contributed to Artbees Themes blog by Thuy Nguyen from Ninja Team.

By offering subscription products such as news, summaries, courses, or even food, you can generate recurring stable revenue with WooCommerce subscription email templates.

Subscription-based products have a special business model that requires a strong digital presence. Brand print via email communications is a must.

Therefore, visual continuity is essential at all subscriber touchpoints, including your website, social media channels, and transactional emails. In today’s article, we’ll be showing you how to do that by customizing WooCommerce subscription email templates without coding using YayMail.

Install required plugins

In this tutorial, I’m using these plugins:

  • WooCommerce Subscriptions: to create subscriptions via WooCommerce and sell subscription-based products or services
  • WooCommerce Stripe Gateway: to handle recurring payments with Stripe 
  • YayMail: the free email template builder that support 50+ third-party extensions in its addons
  • YayMail Addon for WooCommerce Subscriptions: integration of email customizer for subscription emails
  • YayMail Addon for WooCommerce Stripe Gateway: integration of email customizer for Stripe’s payment reminder email templates

If you haven’t decided on which Woo subscription plugin to use, please check out our blog post on how to Create a Subscription Store with WooCommerce. In  this article, you will learn the pros and cons of each plugin in order to make an informed purchase. No matter which one you choose, the customization workflow will be the same as presented in this walk-through.

Let’s get started!

Design the general template layout

By default, the WooCommerce plugin alone comes with 11 transactional email templates. The WooCommerce Subscriptions extension comes with another 10 email templates and WooCommerce Stripe Gateway adds even more templates for payment status reminders. 
That’s quite a lot, right? But don’t fret, all of these subscription email templates are located in one place under WooCommerce > Settings > Emails.

Alternatively, you can also find the email templates by navigating to WooCommerce > Email Customizer.

In the email builder interface, please go to Settings > Enable/Disable Templates to find all the available email templates. There, you can choose to activate all the templates you want to put in use.

For each enabled template, you will see a green light indicating that it is now being used in the automation workflow of WooCommerce.

Also in the same Settings tab, you’ll be able to design the general layout of email templates. These options include universal display components like:

  • Language direction: it is left to right by default.
  • Container width: the width of the whole email body. It is 900px by default but 700px in the sample image.
  • Product image: automatically insert any product image with a custom position and image size.
  • Custom CSS: add your own creative adjustments.
  • Export and import email templates: keep a full template backup or use your customized email templates on different sites.

In the sample image I’ve changed the email background color to light mint and the text link color to dodger blue. Feel free to play around with colors before we move on to the next steps.

Customizing welcome email template for new subscribers

After finishing the general options, you can now move along to  a specific subscription email template such as New customer welcome email template for onboarding subscribers.

In the WooCommerce subscription flow, the first email your subscriber receives after signing up is called Processing order. Choose it from the dropdown list and then we can start to transform it into a more appealing welcome email template.

Logo and email header

Similar to Gutenberg blocks, you can upload and insert your logo very quickly. For this logo block, I set its background color with the same light mint color as the email background.

Alternatively, you can use a full width banner or an animated GIF in your email to emphasize your brand and its personality.

Then, with the email heading block, I pick a darker mint color for its background. After that, I just add some custom text and tweak it:

  • Change text color: use the built-in color picker or paste your own HEX color
  • Change font family: choose one of the email-safe fonts listed under “Font Family” option
  • Align and format the text further if necessary

After I am satisfied with my email header, I can continue with the main email content using text blocks such as:

  • Welcome greetings
  • Announcement of the subscription registration, and a bit more of what you have to offer
  • WooCommerce subscription detail table

Multiple column email section

Now it’s time to add some fancy media sections to the onboarding subscription email template. Here you can unleash your designer vision with an advanced multiple column block.

Here are some ideas to help you out with what to put in new subscriber email templates:

  • Setup instructions
  • Upcoming events and webinars
  • Merchandise and badges
  • Other useful links and resources

It’s easy to implement this media section by following these steps:

  • Add a three column block: set portion width, padding, background color or add an image
  • Drag and drop content blocks into each column
  • Insert buttons into columns: edit button color and text font/text color
WooCommerce subscription email templates - multiple column email

Feel free to add more images or videos to build excitement for your products with new subscribers and include gentle CTAs for further actions.

Email footer and signature

As for the email footer, this is where you can include post-purchase details such as customer service number, return or refund policy, company signature, QR code, etc.

Here I want to minimize those details so I only include social media profiles and the website tagline/company slogan.

WooCommerce subscription email templates - customize email heading

Within YayMail’s email builder, you can find a dedicated Social Icon block for showcasing your online presence. This enhancement provides customizable options including:

  • Social icon row paddings
  • Icon width and spacing
  • Various pre-set styles 
  • Links to social media networks and home page
  • Optionally add or remove social media icons

After all of the customization work, our email template looks  like this:

Customizing payment reminder email templates

When it comes to processing renewal payments, there are many scenarios that cause failed authentication. When this happens, Stripe Payment Gateway automatically sends payment reminder emails to the subscribers.

The WooCommerce email template Failed Subscription Renewal SCA Authentication gives a heads up to your customers:

  • To inform that an attempt to automatically process a subscription renewal payment has failed, 
  • To explain that the transaction requires an SCA verification, 
  • To request the customer to authenticate the payment, and a retry rule has been applied to notify the customer again within a certain time period.

That said, please prepare a reminder copy that helps clarify the issue and what actions you want your  subscriber to take.

Here’s what my copy looks like: 

“The automatic payment to renew your subscription with [yaymail_site_name] has failed. To reactivate your subscription, please login and authorize the renewal from your account page: Authorize the payment »”

After that, you can go to the email builder and reuse the newly customized email template to develop a consistent brand experience.

To save valuable time, it’s wise to duplicate an email template so that you don’t have to design it over again. To do this, simply follow these steps:

  • Select the current email template, eg: Payment Authentication Failed
  • Click on the button “Copy template” from the upper toolbar
  • Choose a particular template from which you want to copy all designed blocks, eg: Processing order
  • Click Copy template to have the new draft right on your current email template
WooCommerce subscription email templates - copy full template

Then you’ll have a full template cloned from the Processing order’s template. Now go ahead and omit the blocks that you find unsuitable or unnecessary.

WooCommerce subscription email templates

For situational guides, you can even add an extra text box to the email body with additional information. 

It is as easy as pie! When the email templates look just as you wish, click Save to finish.

Subscription email best practices

So we have guided you through the very basic steps of customizing subscription welcome and reminder emails. 

While it is intuitive to design with this drag and drop email builder, here are the best practices to save you more time:

  • When you add external links to the email templates, they could appear as insecure links and the template won’t be able to be saved. You can troubleshoot this problem by trying to reset the template.
  • There are many shortcodes and variables to insert personalized information into the subscription email templates. You can find them in any textbox element or from the (i) Shortcode button.
  • At any point in time, you can save and preview the current template on desktop or mobile interface.
  • Before enabling the email templates, you can send a test email anytime to make sure it looks good on different email clients and devices.
  • You can try sending different email templates in real life to find out which layout brings the highest WooCommerce conversion rate.

Wrapping Up

WooCommerce subscription email templates are expected and contain important information. These emails have a high open-rate. While you don’t want to promote hard via these emails, you do have the chance to give incentives for sharing your products, or simply ask for a review.

With the help of YayMail – WooCommerce Email Customizer, you have a simple way to build a successful relationship with your subscribers.

Have any templates that you want to share? Don’t hesitate to let us know in the comment section below.

How to Use FileBird to Organize WordPress Media Library

organize WordPress media library featured

This is a guest post contributed to Artbees Themes blog by Thuy Nguyen from Ninja Team.

Why to organize WordPress media library?

WordPress media library is where you can find all of your documents and media uploads. It comes with a sort feature by file type and a month and year-based filter function. This is quite sufficient for personal bloggers.

However, if your blog is media heavy and it has to hold thousands of media files, it will take some time to find the files you are looking for. Or when you want to do a post revamp and delete the old files, the decluttering process is hard with this categorization way by default.

Therefore, organizing WordPress media library requires a category management of files. That is where FileBird comes in to help.

What is FileBird – WordPress Media Library Folders?

FileBird is a file manager plugin dedicated to WordPress media library. It adds an integrated folder tree on the left sidebar to help you drag and drop files into the folders easily.

This WP media folder plugin is loved by many photographers, fashion designers, and food bloggers, who are extensively using media content in their WordPress pages and posts. It works magic on WooCommerce, Elementor and all popular themes including Jupiter X.

In this article, I am going to show you how to organize WordPress media library with FileBird, keeping track of all those media uploads and displaying them in an impressive fashion blog in the shortest amount of time.

Create folders in WordPress media library

FileBird is a plug and play plugin, meaning it’s ready to use right after activating. Take a look at the FileBird folder tree and you will see everything is intuitive and easy to navigate, just like what you do on your computer.

It offers one-click to create a folder. So go ahead and click that button to create several main categories/parent folders such as Fashion, Collections, and Marketing.

This media folder area comes with a smart context menu, meaning you can right-click to interact with the folders. For instance, if you right-click on the folder Fashion, you have various options including:

  • New folder: to create a nested folder inside Fashion
  • Rename: to change the folder name
  • Cut and paste: to easily arrange folders
  • Delete: to delete a folder while keeping all those files in the All Files location
  • Download: to download a full folder with its files and folder structure in a ZIP file

Please note that the Download full folder feature is currently available only in FileBird premium version. It helps you download the original versions of media files, not bunky with different auto-generated image dimensions when you download them via FTP or Filester file manager plugin.

You can quickly try all of these options risk-free because it causes no loss at all. Even when you move files to a wrong folder, you can easily fix it by dragging and dropping it again to the destination folder. 

On top of that, FileBird does not change the permalinks to your media files so they won’t break or get damaged when you move the files around.

Upload files and folders to your media library

When editing pages or posts, you can also choose the specific folder to upload multiple files. This folder list drop-down in Add media makes it quick when you want to upload and categorize those files at the same time and with only one action. 

Small as it may seem, it is a big time saver when you have to manage multiple websites and publish a bunch of posts on a daily basis.

As for uploading folders, FileBird also keeps it down to the minimum effort. When you need to upload multiple folders with their contained files, you can bulk select those folders then drag and drop them into WordPress media library in a single blade. This action also keeps the same folder order and structure respectively, meaning you literally transfer the categorization system from your hard disk to WordPress.

If you have come this far, you might be already familiar with how FileBird drag and drop works. Depending on the requirements of your website, you may need to create 20+ folders for your media library. Keep in mind that the FileBird free version allows up to 10 folders. If you need more folders/categories, upgrading to the paid version is recommended.

Add image gallery and document gallery in Gutenberg

In this step, I will be showing you how to create an eye-catching gallery using Gutenberg block.

Create a smart image gallery

In order to showcase a collection of your fashion blog, you can easily find FileBird Gallery block > Select the collection folder from the folder list.

After choosing the desired folder, you can go ahead and tweak your gallery appearance with these options:

  • Column number: choose to show your gallery in 1-4 columns
  • Crop images: enable it to get your gallery well-aligned
  • Caption: display caption below each image
  • Delete: dismiss specific images that you don’t want to show in this gallery
organize WordPress media library - gutenberg image gallery

Create a document gallery

Sometimes you may want to share advanced files other than basic image formats. If so, you have reached the right place.

With the help of FileBird and a document gallery plugin, you can showcase your SVG, ZIP or other document files with good-looking auto-generated thumbnails.

FileBird supports Document gallery plugin’s shortcode to help you display a list of document files. You only need to fill the folder ID in the shortcode and embed it in any page or post.

organize WordPress media library - document gallery with shortcode

With user-friendly file thumbnails, your gallery will be much more appealing to your visitors. On the front-end, your new document icons look like this. Here’s the outcome of my blog post on JupiterX theme.

organize WordPress media library - Jupiter X document gallery

Best practices when using FileBird media manager

There are some hidden features of FileBird that you will find useful:

  • Collapse the folder tree sidebar to easily hide it
  • Resize the folder tree sidebar to get an overview of all folders with their full names
  • Press ESC to exit the bulk select mode (applicable to both files and folders)
  • Use advanced sort features to clean up the outdated files
  • Set startup folder

For the start-up folder, you have two options to choose from. 

  1. Select a specific folder: this is fixed and you will reach this folder first whenever you access WordPress media library
  2. Select previous folder: this is dynamic and, as a result, you can come back to the most recently opened folder to quickly continue the task you have been on
organize WordPress media library - set startup folder

FileBird is an easy-to-use plugin for all bloggers using WordPress as their favorite platform. I hope this tutorial has helped you learn how to use FileBird to organize your WordPress media library and make the most out of it.

Choosing FileBird – WordPress media library folders helps extend the functionality of your blog back-end so that it can handle thousands of media files.

How do you navigate images and media on your website? Don’t forget to share your thoughts and experience in the comment box below.

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.

How to Use WhatsApp with WordPress to Boost Sales and Personalization

use WhatsApp with WordPress featured

This is a guest post contributed to Artbees Themes blog by Thuy Nguyen from Ninja Team.

WhatsApp is not a social network but rather a messaging service. However, if you’re running an online store and you want to boost your customer base, using WhatsApp with WordPress with a click-to-chat functionality can earn a solid spot in your marketing strategy – but only when done correctly.

In this article, I’m going to show you 4 ideas that you can use to take advantage of WhatsApp’s ever-expanding user base with Jupiter X or any other WordPress theme . Two of these ideas rely heavily on the WhatsApp Chat WordPress plugin. With these strategic solutions, we’re looking to help sales, service and support teams engage with online customers on the channel they already prefer.

Let’s hop on the first WhatsApp plugin tactic which is very budget-friendly:

Create a click-to-chat floating widget

One great way to use WhatsApp with WordPress is through adding a click-to-chat widget onto your site. The mission of this WordPress plugin is simply to make it easier for people to contact you via WhatsApp. Its strong points lie in its elegant design and premium features. and you can use it completely for free.

Let’s start off by downloading this WhatsApp plugin from the WordPress repository.

Run a click-to-chat floating button

After activating, you can add your WhatsApp number for the floating widget. This widget button can be displayed on every page of your site or only on selected pages. What’s even better is that this plugin allows you to add multiple WhatsApp accounts belonging to  other support agents with his/her own name, title, avatar and greetings.

It’s always better to greet someone by name. Thus, vice versa, it’s much better when your customers know who they’re talking to. This simple personalization hack can create mutual trust through chat communication and build customer loyalty by leaving a good impression from the very first conversation.

Set a pre-defined message using shortcode

For each agent’s WhatsApp account, you can set a different button label and pre-defined text. Here you can insert shortcode like [njwa_page_title] or [njwa_page_url] to output your visitor’s current page title and URL, respectively. For example, when I set this text field just as: 

Hello, I’m interested in [njwa_page_title] at [njwa_page_url] 

Imagine how easy it would be for any WhatsApp user to ask whatever questions they have in mind no matter where they are at that time on your site:

As you can see, predefined text is not only a great personalization tool but also a time saver. This little pre-filled text message will definitely steer your customers toward making a purchase.

Assign customer requests to proper service representatives

If your business provides a wide range of products or services, your support agents might be overwhelmed by customer questions inside of loads of conversations across multiple support channels. So why not enhance your own support funnel by using WhatsApp with WordPress?

Create custom click-to-chat button on landing page/post

Let’s say you’re running a lead-collecting campaign in which people have to message you on WhatsApp to get the coupon codes. 

Instead of placing the regular coupons downright to your prospective customer’s face, you can now combine strategic couponing by building your own WhatsApp contact list and offering exclusive coupons to those who message.

  1. Add a custom button in WordPress

To do that, you need to add a WhatsApp block in Gutenberg editor. There, you can easily find the block settings and customize your text, button color and phone number as you see fit for your campaign.

Once published, your post or page will look like this. This way, your page visitors can get the message directly, and they will be intrigued to tap the button.

  1. Automatically reply to those who message you via that button

Now that people are pinging you on that specific phone number, you can set an automated reply to those messages using the WhatsApp Business App

After downloading the app to your smartphone, enter the very phone number that you want to use in this campaign. Head on over to Settings > Business tools > Away message. Choose Custom schedule and set the private message including the tailored coupon code.

With this simple configuration, everyone contacting you will promptly get their coupons during your campaign. And when the schedule ends, your away message will be automatically toggled off by this WhatsApp Business app.

Segment consumer requests on WooCommerce product pages

Here comes another trick to taking your WooCommerce single product pages to a new level. This WooCommerce button allows you to choose a specific supporter to be there on product pages. This feature is readily built into Ninjateam’s WhatsApp plugin. So all you have to do is go to WhatsApp settings > WooCommerce button. There you can switch it on, adjust the display position and select the agents you want to show.

On the front-end, your support agent account will be displayed in the order you set. If you set the agent account to “Always available,” the button appears in WhatsApp’s green by default or in your chosen color. Otherwise, it turns grey to indicate an unavailable status.

use WhatsApp with WordPress

Hence a stronger relationship can be built between your consumers and your brand!

Add a WhatsApp call-to-action in Facebook Ads

If your consumers are heavy users of WhatsApp, why not give them the option to click on a chat welcome via Facebook ads?

To add this option to your Facebook Ads Manager, you need to link your Facebook fan page to your WhatsApp account first. This can be done easily by going to your Facebook fan page > Page Settings > WhatsApp, then input your business phone number. Once successfully connected, you can now set a new campaign with the call-to-action of “Send message on WhatsApp.”

use WhatsApp with WordPress

You can even suggest multiple options for your audience by clicking Add a question and listing what you want to express to your new customers. With this type of ad, the insights of your customer needs or concerns are just a tap away!

use WhatsApp with WordPress

Improve your WhatsApp Business database

The WhatsApp Business app already includes many useful tools to run your online store.

  • Product Catalog

This feature helps put up a sleek and handy showcase for your products or flagship. Cataloged products here also make it smoother when you want to share it in your WhatsApp groups and other circles.

  • Away Messages and Greeting Messages

As discussed above, those message settings are not only useful to deliver greetings to customers— they can also be very helpful in boosting your coupon marketing strategy! 

  • Quick Replies

These shortcuts for lengthy messages are a big time saver when you have an enormous number of messages during peak seasons or omnichannel marketing campaigns.

  • Labels

With default colorful labels for New customer, New order, Pending payment, Paid and Order complete, this gives you initial ideas in how to organize your most important assets: WhatsApp users and their conversations. Therefore you can take good care of them and find the chat details easily when you need to.

Final thoughts

Given the fact that WhatsApp is being the most widely used instant messaging app, it’s a great way to offer prospective customers with quick access on a platform they’re already comfortable with. 

With WhatsApp expansion into web and mobile apps, you can find plenty of WordPress plugins to help integrate click-to-WhatsApp functionality to your website.

Moreover, your business digitization has been topped with the help of the versatile WhatsApp Business app. Backed by Facebook, the WhatsApp Business app has been built with full-fledged business tools for small to medium-sized stores, while WhatsApp Business API is promising to gear up for bulk messaging, automation, chatbot and other tactics for large to enterprise-level businesses.

Have you set up a WhatsApp click-to-chat? What do you think of its capabilities or do you want other features? Let us know in the comments!

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.