How To – Create a Billing Page in Constellation Client Portal

Overview

Creating a billing page for your clients and customers in Constellation Client Portal is a straightforward process, and consists of the following basic steps.

• Create a shortcode to display unpaid invoices (and, optionally, one for paid invoices).
• Create a client page.
• Lay out your client page, and paste the shortcodes in the page.

Create Shorcodes to Display Invoices

For users to be able to both view and pay unpaid invoices, and view paid invoices, two list shortcodes will need to be created as follows (one for unpaid invoices and another for paid invoices).

Create an Unpaid Invoice List Shortcode

1. In the WordPress admin, navigate to Constellation Client Portal Pro -> Settings -> Lists.
2. Click the “Add New List” button.
3. Select “Invoice” in the “List Type” section.
4. Select “Unpaid” in the “Status” section.
5. Check the “Display Pay Button” option in the “Invoices” section.
6. Customize the list and theme further if needed.
7. Click the “Save Changes” button to save your list.
8. Navigate back to WordPress admin, then navigate to Constellation Client Portal Pro -> Settings -> Lists and locate the row that contains the new shortcode that you just created.
9. Locate the “Shortcode” column in that row. The shortcode listed in that cell can then be copied/pasted into your client page to display the list of invoices.

Automatically Mark Invoices as Paid when Paid in WooCommerce (recommended)

It is also recommended that you choose to enable the option to automatically change the invoice status from “unpaid” to “paid” when the invoice is paid in WooCommerce. This is optional, but can save time in your operation.

The steps for enabling that option are as follows.

1. In the WordPress admin, navigate to Constellation Client Portal Pro -> Settings -> Invoices.
2. Select an appropriate option in the “WooCommerce Invoice Handling” section (either “Automatically mark invoice as paid when paid in WooCommerce” or “Automatically mark invoice as paid when WooCommerce order status is set to completed”).
3. Lastly, click the “Save Changes” button to save your update.

The above steps are the basic required steps to create a list of unpaid invoices with a pay button that will allow users to view and pay invoices that have a product assigned within the invoice.

Create a Paid Invoice List Shortcode

1. In the WordPress admin, navigate to Constellation Client Portal Pro -> Settings -> Lists.
2. Click the “Add New List” button.
3. Select “Invoice” in the “List Type” section.
4. Select “Paid” in the “Status” section.
5. Customize the list and theme further if needed.
6. Click the “Save Changes” button to save your list.
7. Navigate back to WordPress admin, navigate to Constellation Client Portal Pro -> Settings -> Lists and locate the row that contains the new shortcode that you just created.
8. Locate the “Shortcode” column in that row. The shortcode listed in that cell can then be copied/pasted into your client page to display the list of invoices.

The above steps are the basic required steps to create a list of paid invoices that will allow users to view invoices that have been marked as paid.

Create and Lay Out Client Page

Once your invoice shortcodes have been created, you are ready to create and lay out your client page, which can be done as follows.

1. In the WordPress admin, navigate to “Client Pages” in the sidebar menu on the left.
2. Click “Add New Client Page.”
3. Enter a title for the page.
4. Assign the page to an existing company in the “Assign Company” section, or check the “Enable global company access option” if you are intending to make this a global page.
5. Next, in the content field, lay out your page as you would any other WordPress page.
6. When you have decided where you would like your unpaid invoice list to appear, paste the unpaid invoice list shortcode, from the steps above, into the page.
7. If you intend to add a paid invoice list to the same page, you can also paste that shortcode on the page where you would like it to appear.
8. When you are finished, save a draft of the page, or publish it to make the page live.

Conclusion

Once you have laid out your client page, it is always a good idea to test the page to verify that everything is working as you expect. This can be done as follows.

1. Create a test company.
2. Create a test WordPress user account (a non-WordPress admin account), and assign it to the test company.
3. Create one or more test invoices, and assign them to the test company.
4. Temporarily assign your client page to the test company if the page is not a global client page.

Once your test user and company are set up, you can then log into your site as the test user and view/test the client page.

When you are happy with the results, you can reassign your client page to the live company (if the page is not set as a global client page), and delete your test data (if needed).