Add custom product info to Additional Information tab

Use CMB2 to add a custom metabox to WooCommerce product then add data to Additional Information tab on product page.

A member of the Advanced WooCommerce Facebook group asked how to add book information to the “Additional Information” tab on the single product page. I jumped in with a suggestion using CMB2.

Metabox instead of manual fields

While it would be a better user experience for the admin to create a new section of Product Data, it would require validation code. Using CMB2 would be much quicker.

The CMB2 fields are displayed in a metabox to the right of the editor area. With the priority set to ‘default‘, it shows under the Product tags metabox. I set the Pages field to be require a number. I think that ISBN10 and ISBN13 are also numbers but I didn’t add that restriction in case I was wrong. Nor did I set any fields as required though that’s easy for a developer to change (the code to make each field required is in the plugin code but commented out).

Adding to Additional Information tab

Displaying the information in the ‘Additional Information‘ tab is quite easy thanks to the ‘woocommerce_product_additional_information‘ hook. This is in the woocommerce/templates/single-product/tabs/additional-information.php template file.

The tab’s default content is added by the above hook so changing the add_action() priority determines whether the book information appears above or below the content added by WooCommerce.

I used an array of field name => label so that I could use a loop to retrieve the data and generate the required markup in a readable layout. I frequently add markup to another array and then using implode() to join the elements together. I can then easily add a wrapper div if necessary.

The code