To add extra tabs to the WooCommerce product page and populate their content from a CSV or Excel sheet using the Advanced Custom Fields (ACF) plugin, you’ll need to follow these steps:
Install and activate the ACF plugin from the WordPress plugin repository.
Create a new field group in ACF that will contain the text area fields for each tab. Set the location rule to “Post Type” and select “Product” to ensure the field group is associated with the WooCommerce product post type.
Add a text area field for each tab you want to create. You can customize the field settings as needed, such as the field label and field name.
Once you have set up the field group, navigate to a WooCommerce product edit screen in the WordPress backend.
Scroll down to the ACF section, where you should see the fields you created for the tabs. Enter the desired content for each tab in the corresponding text area fields.
To display the content of these tabs on the frontend, you will need to modify your product page template. Locate the file single-product.php in your theme’s directory. If it doesn’t exist, you can create a copy of woocommerce/templates/single-product.php and place it in your theme’s directory.
Edit the single-product.php file and find the section where the product description is displayed. It is typically located within the <div> with the class woocommerce-tabs.
Add the following code inside the <div> with the class woocommerce-tabs:
php
<?php if (have_rows('tab_fields', get_the_ID())) : ?>
<ul class="tabs">
<?php while (have_rows('tab_fields', get_the_ID())) : the_row(); ?>
<li><a>"><?php echo esc_html(get_sub_field('tab_title')); ?></a></li>
<?php endwhile; ?>
</ul>
<?php while (have_rows('tab_fields', get_the_ID())) : the_row(); ?>
<div id="<?php echo sanitize_title(get_sub_field('tab_title')); ?>">
<?php echo wpautop(get_sub_field('tab_content')); ?>
</div>
<?php endwhile; ?>
<?php endif; ?>
This code retrieves the ACF repeater field values for the tabs and generates the HTML structure for the tabs and their content. Each tab is generated based on the field values you entered in the backend.
Save the modified single-product.php file.
Now, when you view a WooCommerce product page on the frontend, you should see the additional tabs with their respective content populated from the ACF fields
