Consistent branding is essential for site conversion rates so the appearance of this plugin is entirely customizable.
Goals
- Make the checkout process as seamless as possible, especially for new customer.
- Collect sufficient information from your customers to be able to further market to them.
Whenever someone purchases something from your site, a login is automatically created on your site as a ‘subscriber’.
This allows users to update their payment methods, cancel subscriptions, track payments and
download restricted content.
Prerequisites
- Getting Started
Login
The default login page for WordPress is the same for every site and does
not use the sites branding.
Create a new page named ‘Login’ that will become the new login page for the site,
replacing the default page using your site’s branding.
Add the following shortcode to this page:
[payments-login]
Then go Payments -> Pages in your WordPress dashboard
and select the new Login page in the dropdown.
Try it by opening the new Incognito windows and logging into your site.
This seemingly simple change affects a lot of site functionality including:
- Login
- Registration
- Forgot password
- Reset password
When setting up your site, you should check all of these to ensure your user
experience is as you expect.
Further reading for a more in-depth look at this topic:
Advanced
The look and feel of the plugin is designed to fit into your existing site
branding and provide a good user experience out of the box. However, sometimes the
defaults aren’t suitable, so everything is customizable.
Prerequisite: Create a child theme
The best practice for making any of the following changes is to first create a child theme and make your changes there.
Making changes in this way allows you to upgrade your plugin without erasing your changes.
See the official WordPress documentation for how to create a child theme.
Override the CSS
The easiest way to change the appearance is to override the plugin CSS. In most cases, changing the CSS
is all that’s required to get the look and feel you want.
The plugin CSS loads before your theme CSS, so you can modify any CSS classes you want. The plugin uses consistently
named CSS classes to facilitate changes.
Example: change the background color of the accounts page.
Templates
The HTML for each of the shortcodes is stored as a template file with the corresponding name.
Overriding one of these template files allows you to change the design in almost any fashion.
Create a subdirectory in your theme named pay_templates. This post should be in the top level
of your theme – located alongside the required `style.css’ file.
Locate the templates post in the plugin source code and copy the desired template
to your pay_templates post. The plugin will automatically start using that
version of the template.
Copy the cart-empty.php template to customize the message shown to a user
whenever they visit the checkout page, but haven’t added an item to their cart.
Let’s add an emoji to the message by changing the line:
<strong>Your shopping cart is empty.</strong>to:
<strong>Your shopping cart is empty. 😟</strong>Navigate to the checkout page, and you’ll see a frowning face emoji at the end of the line.
Using this method, you can change almost any aspect of the payment experience.
The best way to find what you need to change is to look at the CSS class for the desired element
and then search for that class in the templates post.
Emails
Emails are a special case of templates. Instead of customizing a page, you can customize
the notification emails that you send to your customers.
Email templates are found in the ’emails’ subdirectory of the ‘templates’ post.
The most important of these is the register template. This email is likely the first
chance you have to communicate with a new user, so getting the message right is crucial and
should be specific to your site.
Customize this page, and try user registration in new Incognito window. There are two ways to do this:
- Turn on ‘Membership: New User Registration’ in your General Settings and then register via the login page.
- Buy product using a new email address.
You can use the same email trick for creating new users that we did in the subscriptions tutorial.