WooCommerce Intergration  

It's already integrated. All users who register on checkout page automatically get Customer usergroup and they have different label on forum.

Example: https://gvectors.com/forum/general-questions/full-width-forum/#post-5165

Also, users got an extra menu on profile page to be able quickly go to WooCommerce Account page:

My WooCommerce is setup to give the Customer role on purchase as default but then how do I make it display under the username like in the link you have gave. I cannot seem to figure it out.

It should be displayed automatically if this checkbox is checked in Forums > Settings > Members admin page:

For a test I have manually set someone to the customer group (I have renamed it to VIP)

This is what the members admin page looks like

But I don't get it, how do I make the user automatically get the usergroup after payment?

It should be done automatically. I hope you don't have WP user role manager plugins and you've not changed something in WP user role settings. Also user registration should be done on checkout page. Only in this case wpForo detects and set him/her "Customer" usergroup.

Can you explain how to add a new field in the checkout page?
I have seen the reference article to add custom fields https://www.cloudways.com/blog/custom-field-woocommerce-checkout-page/ but I am having an error in this line of code
if (!$_POST['customised_field_name']) wc_add_notice(__('Please enter value.') , 'error');