In this part, you’ll see how to display referral codes elements in your WooCommerce pages. First, go to the following page :

Referral Code Form

Use this form to let customers input a referral code and get an immediate discount on their order. Here are the options available :

• Accept Coupon Field : Accept referral codes input in the WooCommerce coupon field in classical cart/checkout pages
• Cart Display : Select if you want to display the referral code form on the cart page. The possible values are :
  • Not displayed at all : You don’t want to display the tool on the cart page
  • Between products and total : The tool will be visible under the products list in the cart page
  • Aside from totals : Display the tool next to the totals panel
• Reload cart page : Force a page reload after a user inputs a referral code
• Checkout Display : Select if you want to display the referral code form on the checkout page. The possible values are :
  • Not displayed at all : You don’t want to display the tool on the checkout page
  • Top of the page : The tool will be visible above everything else
  • Before customer details : The tool will be visible above customer details
  • Before order review : The tool will be visible above the order review
• Reload checkout page : Force a page reload after a user inputs a referral code
• Styling tool : Use the styling tool to change the look of the referral code look

WooCommerce My Account

Set a new tab in WooCommerce’s My Account page. You can set the following options :

• Enable : Turn this on to show the Referral Codes Tab on the My Account page.
• Tab Title : The name of the tab.
• Slug : The tab’s url to your customers. It will look like https://yourwebsite.com/my-account/the_url_slug_you_chose
• Role restriction : By default, all users can see this tab if you enable it. However, you can restrict the visibility to a list of user roles by selecting them here.
• Content page : Select the page in which you want to display wallet information. By default, Referral Codes creates a page but you can change it at any time.
• Edit the page : Click this link to open the standard wordpress page edition where you can set your tab content.
• Create a new default page : Use the “Content page” and create the default content inside it (titles and shortcodes)

You have total control over what you display on this page. You can use your standard page builder or set text content like for a regular post.