Recently I was tasked with adding some custom tabs to a WooCommerce store using the Storefront theme. There was a commercial solution available but I felt this was something that could fairly easily be done via Advanced Custom Fields and the built-in Storefront filters. 30 minutes later and a solution was in place.  Here’s a basic run down of how I was able to pull in the content of a Repeater field:

First, create the content fields within ACF. I used just a basic repeater that contains a text field for the tab title and a WYSIWYG field for the tab content. For the example code, the repeater was named “tabs” and it’s sub fields are named “tab_title” and “tab_content”.

Next, I just had to tie these tabs in to the existing WooCommerce filter “woocommerce_product_tabs” (more details) which allows you to modify the existing tabs for each product on it’s detail page. I grabbed the assigned tabs from the ‘tabs’ ACF field. Stepping through these tabs I added them to the incoming ‘$tabs’ variable within the filter.  The required properties for each tab are:

• title – The title of the tab
• priority – The order in which the tab should appear among the other tabs
• callback – The name of the function to call to get the content of the tab

You’ll notice in my code I’m adding a fourth property “tabContent”. This is a custom property used by my content generating function to get the WYSIWYG content to display within the tab.
And that’s all there is to it. Of course there are plenty of areas to improve this small bit of code. For example, I plan on adding in a “Global Tabs” area that would let the client specify global tabs that should appear under all products or even products just within specific Categories. Additionally, I also will be adding a field to control the value of the ‘priority’ property rather than auto-generating.

The full code including the ACF Repeater declaration can be viewed on GitHub.