How can we help?

Tutorial: Branding your site

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 customers.
  • Collect sufficient information from your customers to further market to them.

Whenever someone purchases something from your site, a login is automatically created on your site as a ‘customer.’

This allows users to update their payment methods, cancel subscriptions, track payments, and download restricted content.

Prerequisites

Login

The default login page for WordPress is the same for every site and does not use the site’s branding, giving the user an inconsistent user experience.

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 login block to this page. You can select whether or not you want to allow new user registration in addition to login.

NOTE: This registration mechanism has additional security beyond the standard WordPress registration to limit spam.

Then go to ‘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 (if applicable)
  • Forgot password
  • Reset password

When setting up your site, you should check all of these to ensure your user experience is as you expect. Each of the screens is configurable via the block controls.

Further reading for a more in-depth look at this topic:

Advanced

The look and feel of the plugin are 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. Each block has numerous options and on the off chance those options don’t provide what you need, you can style the blocks via your theme.

Prerequisite: Create a child theme

The best practice for making any of the following changes is to create a child theme and make your changes there. Making changes 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 that you can modify any CSS classes. The plugin uses consistently named CSS classes to facilitate changes.

Example: change the background color of the accounts page.

Templates

If you’re using shortcodes instead of blocks, the HTML for each shortcode is stored as a template file with the corresponding name.

NOTE: This should be considered an advanced topic. It’s very easy to break the front-end functionality of the shortcode. We suggest contacting support if you have a use case requiring changing a shortcode template.

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 special cases 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 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 the new Incognito window. There are two ways to do this:

  • Turn on registration in the Login block.
  • Buy a product using a new email address.

You can use the same email trick for creating new users that we did in the subscriptions tutorial.