Knowledge Base

Importing Custom Tabs using the Built-In WooCommerce CSV Importer

Article Last Updated: March 4, 2021

Introduction

A common request is a way to import tabs along with product data when using the WooCommerce CSV Import tool. The challenge is since we are representing a list of tabs, that list ends up becoming serialized data when stored in the database. Serialized data is not something to be edited manually.

Below outlines a separate strategy using JSON in your spreadsheet which will be converted to serialized data during the import process. It follows the official WooCommerce documentation on extending the import tool, but is customized for compatibility with our plugin. For the full code, skip to the end of the article.

Why JSON?

Anything is better than serialized data. But what it boils down to is this — we need to store a list, and we can’t make a 3D CSV file. So we’re going to have to pick a format that can be used for storing lists. JSON doesn’t care about whitespace and is easy to read and edit, which makes a good format. If you’d like to use a different format, you can modify this code to suit your needs.

Requirements

There are three functions needed to make this work.

1. Register our column with WooCommerce
2. Add automatic mappings (so the tool can recognize our column name)
3. Create a handler function to make use of the information in that column

These three functions will be added to the functions.php file in your theme.

Column Registration

/**
 * Register the 'Custom Tabs' column in the importer.
 *
 * @param array $options
 * @return array $options
 */
function add_column_to_importer($options)
{
	// column slug => column name
	$options['yikes_custom_tabs'] = 'Custom Tabs';

	return $options;
}
add_filter('woocommerce_csv_product_import_mapping_options', 'add_column_to_importer');

This code registers your column with WooCommerce. On the left is yikes_custom_tabs, which is the id you are setting for this column. The right side of the assignment is whatever you want to use as a title. We’re using Custom Tabs here, but change it to whatever you like. It does not need to match the column name in your spreadsheet — we’re going to set that part up next.

Column Mappings

/**
 * Add automatic mapping support for 'Custom Tabs'.
 * This will automatically select the correct mapping for columns named 'Custom Tabs'.
 *
 * @param array $columns
 * @return array $columns
 */
function add_column_to_mapping_screen($columns)
{
	// potential column name => column slug
	$columns['Custom Tabs'] = 'yikes_custom_tabs';

	return $columns;
}
add_filter('woocommerce_csv_product_import_mapping_default_columns', 'add_column_to_mapping_screen');

This code is telling WooCommerce to look for certain column names in your spreadsheet and link them to the column you defined in the last function. Again, you can change Custom Tabs to whatever you’re using in your spreadsheet.

Import Handler

/**
 * Process the data read from the CSV file
 * This just saves the decoded JSON in meta data, but you can do anything you want here with the data.
 *
 * @param WC_Product $object - Product being imported or updated.
 * @param array $data - CSV data read for the product.
 * @return WC_Product $object
 */
function process_import($object, $data)
{
	if (!empty($data['yikes_custom_tabs'])) {
		$arr = json_decode($data['yikes_custom_tabs'], true);
		$object->update_meta_data('yikes_woo_products_tabs', $arr);
	}

	return $object;
}
add_filter('woocommerce_product_import_pre_insert_product_object', 'process_import', 10, 2);

This last function tells WooCommerce what to do with the data found in our new column. We are doing the following:

1. Check if the column has data
2. If it does, decode the JSON stored in that column and convert it to an associate array.
3. Store that associative array as meta data on the product.

If you want to change the format from JSON to another format, this is where you would do it. Change the line that decodes JSON to a line that handles some other format.

Data Format

Your tab data must be in the following format:

[
  {
    "title": "First Tab",
    "id": "first-tab",
    "content": "This is my tab content"
  },
  {
    "title": "Second Tab",
    "id": "second-tab",
    "content": "[second-tab-content]"
  }
]

The tabs must be written as a list of objects, all of which contain the title, id, and content properties. As you can see in the second tab, shortcodes will work. You can use any valid JSON in the content section.

Summary

Hopefully this will make batch editing products easier for you. If you have a lot of custom tabs assigned to products, this will allow you to make all of your edits in the spreadsheet itself.

Another option, if you find yourself using the same tab on multiple products, is to purchase the premium version of our plugin. It allows you to create tabs that apply globally or to specific taxonomies, which can also be useful when managing large numbers of products.

Here is the full code for reference:

/**
 * Register the 'Custom Tab' column in the importer.
 *
 * @param array $options
 * @return array $options
 */
function add_column_to_importer($options)
{
	// column slug => column name
	$options['yikes_custom_tabs'] = 'Custom Tabs';

	return $options;
}
add_filter('woocommerce_csv_product_import_mapping_options', 'add_column_to_importer');

/**
 * Add automatic mapping support for 'Custom Tabs'.
 * This will automatically select the correct mapping for columns named 'Custom Tabs'.
 *
 * @param array $columns
 * @return array $columns
 */
function add_column_to_mapping_screen($columns)
{
	// potential column name => column slug
	$columns['Custom Tabs'] = 'yikes_custom_tabs';

	return $columns;
}
add_filter('woocommerce_csv_product_import_mapping_default_columns', 'add_column_to_mapping_screen');

/**
 * Process the data read from the CSV file
 * This just saves the decoded JSON in meta data, but you can do anything you want here with the data.
 *
 * @param WC_Product $object - Product being imported or updated.
 * @param array $data - CSV data read for the product.
 * @return WC_Product $object
 */
function process_import($object, $data)
{
	if (!empty($data['yikes_custom_tabs'])) {
		$arr = json_decode($data['yikes_custom_tabs'], true);
		$object->update_meta_data('yikes_woo_products_tabs', $arr);
	}

	return $object;
}
add_filter('woocommerce_product_import_pre_insert_product_object', 'process_import', 10, 2);