Hi, my name is
Lee Harris and
I'm a Freelance Web Designer

WooCommerce – Custom Product Tabs using ACF Repeater field

9.Apr.2016 | , , ,

Here is a really simple way to create custom tabs for your WooCommerce builds using the ACF Repeater Field.

ACF - Advanced Custom Fields

First, create your repeater field and call it “tabs”. Create 2 sub fields and call them whatever you like, I have used “tab_title” (text field) and “tab_content” (wysiwyg field). Then select to show fields for “Post Type > Product”.

Next, add this to your functions.php file:

<?php

function load_custom_tab( $tab_key, $tab_info ) {

echo apply_filters( 'the_content', $tab_info['tabContent'] );

}

function add_content_tabs( $tabs ) {

global $post;

$custom_tabs = get_field( 'tabs', $post->ID );

if ( $custom_tabs ) :

   foreach( $custom_tabs as $index => $tab ) {

   $tabs['customTab-' . $index] = array(

   'title' => $tab['tab_title'],

   'priority' => 20 + $index,

   'tabContent' => $tab['tab_content'],

   'callback' => 'load_custom_tab'

);

}

endif;

return $tabs;

}

add_filter( 'woocommerce_product_tabs', 'add_content_tabs' );

?>

Thats it!

Links: Gabe, WooCommerce, ACF Repeater Field

, ,

  • html5
  • css3
  • sass
  • php
  • WordPress
  • WooCommerce