The CRED plugin enables the creation of forms to register users from your website’s front-end. Using both WooCommerce and CRED Commerce plugins, you can also sell user registration. This enables you to create membership sites and sell subscriptions to your site’s services, as well as to implement anything else that requires charging payments for user registration.

This document explains how to charge for user registration on a membership site. The information provided here can be adjusted to suit any other type of site that involves charging for user registration.

Workflow

To enable the charging of user registration on your site, three plugins are used:

  • WooCommerce – Creates the product that we want to sell. In our example, it is the membership. We also use it to set up payment options and all other related e-commerce settings.
  • CRED – Creates the front-end user registration forms.
  • CRED Commerce – Connects the CRED user registration forms with WooCommerce and automatically creates orders when users submit the forms on the front-end.

1. Setting correct WooCommerce account-creation options

Since CRED will be in charge of creating the newly registered user accounts, it is important to set the correct account-creation options in WooCommerce settings.

 

Step Screenshot
In the WordPress administration, go to the WooCommerce -> Settings page and click the Accounts tab.

Deselect both options in the Enable Registration section and select both options in the Account Creation section.

Setting the account-creation options in WooCommerce

 

2. Setting up the membership product using WooCommerce

To charge for membership, a product must first be created for it.

To use WooCommerce in your site, you will need to set up additional options for it, such as payment gateways and currency. If you are new to WooCommerce, please first read about configuring WooCommerce settings.

 

Step Screenshot
In WordPress administration, go to the Products -> Add Product page. woocomerce-add-product
Add a name, description, and any other information you need for your product. woocommerce-product-setup
In the product settings, select that the product is virtual. Then, set its price and other options. woocommerce-digital-product

 

3. Creating the CRED User Form for registration

We must now create the actual form that will enable user registration on the front-end. If you are new to CRED, you can find detailed information on setting up user forms with CRED in our online guide here.

Step Screenshot
In the form’s Settings section, select Create new user and define the user role that will be assigned to the user’s registration.

Make sure to select the Go to checkout page for After user submits this form option.

Build your user form by adding user metadata and custom fields to it. The easiest way to build your form is by using the Auto-generate User Form button.

Read more on how to build user forms with CRED.

Add an email notification to your form. This is especially important if you are using the options to auto-generate the username, password and/or nickname, because it provides the users with a way to receive this information.

Important options are to:

  1.  Select the When submitting the form with payment details option.
  2. Make sure the first option, Send this notification to the billing email is selected.

Read more on how to add email notifications to user forms.

 

4. Setting the CRED Commerce options to charge for registration

Now that we have set up both the WooCommerce product and our user registration form, we can connect them together using the CRED Commerce plugin.

Step Screenshot
At the very bottom of your user form editor in CRED is the CRED Commerce section. There, select the Charge payment with this form option. cred-commerce-checkbox
The CRED Commerce options section will expand. In the Product to buy when submitting the form section, select the membership product we created. cred-commerce-select-product
Select the desired option for the Checkout process. cred-commerce-select-checkout-process
You can also customize the checkout and thank-you messages that will be shown by WooCommerce. cred-commerce-customize-messages
Optionally, you can change the status of the user, depending on the current payment status.

There are three user creation statuses:

  • Hide a user: User information is still stored in the database but not yet published; it is visible on the site.
  • Delete a user: User information is deleted from the database and the site.
  • Create a user: The user is created and published on the site.
cred-commerce-user-statuses

Front-end results and what users will see

Now that we have set up everything in our site, we now view what users will see on the front-end and what occur on your website regarding the order and user registration.

1. Users register on the front-end using the CRED form

Step Screenshot
In this section, the user can set their username, password, email address, and all the information entered in the registration form. cred-user-form-front-end

 

2. After submitting the form, users are navigated to the checkout section

Step Screenshot
The checkout page is the classic WooCommerce page, where users can enter their shipping address and other information.
After entering this information, users can proceed with one of the provided payment options. In our example, we used the PayPal payment, which is easily set up in the WooCommerce settings.
cred-user-commerce-checkout

3. After submitting the checkout form, the order for the purchase is automatically created by WooCommerce.

Step Screenshot
As soon as the checkout form is submitted, WooCommerce automatically creates the order for this purchase.The default state of the order is Pending and changes according to the status of the payment.

Ultimately, orders are either Completed after the payment transaction is completed or Cancelled. Payments are canceled if the user does not complete the payment.

cred-user-commerce-order-created

4. After submitting the checkout form, users are redirected to the payment service

In our case, users are taken to the secure PayPal page, where they can finalize the payment by providing their payment information.

This stage of the order process depends on the payment options provided by the checkout page and the final payment option that the customer chooses. In each case, they are finally navigated to the Order Received page, such as the ‘thank-you’ page.

5. After payment is completed, users are navigated to the Order Received page.

Step Screenshot
 The Order Received page summarizes the order details, a cost of the bought product, customer details, etc. cred-user-commerce-thankyou

 

6. After the payment completes, the new user is registered on the site.

Finally, after payment is completed, the order is marked as Complete and the user is registered on the site.

cred-user-commerce-user-created

Marking the order as complete

Please note that, with some payment options, such as PayPal, the order will not be automatically marked as Complete after the user pays for the product. You will receive the automatic payment email notification and invoice from WooCommerce; however, you will need to manually mark the order as Complete.

Third-party plugins exist that resolve this issue and automatically mark the orders Complete, such as the WooCommerce – Autocomplete Order plugin.