View my basket

Flexible Product Tabs for WooCommerce

Elegant and flexible product tabs for WooCommerce. Use the Block Editor for your main Description tab too.

WooCommerce Flexible Product Tabs

$35

Licences for this plugin last forever 😀

14 Days Money-back guarantee

100% No-Risk, Money Back Guarantee!

Over the next 14 days, if our plugins aren't right for you, we’ll refund 100% of your money. No questions asked!

SKU: PP-FPT-L01-R00 Category: Current: 1.2.2

About Flexible Product Tabs for WooCommerce

Flexible Product Tabs for WooCommerce makes it easy to add content to your product page tabs. Using the native WordPress Block Editor allows you to select from 1000s of block designs, layouts, photo galleries, and videos, to name but a few. This helps you display far more information to your customer than was previously possible, allowing buyers to make more considered decisions which can result in better sales.

Custom Product Tabs for WooCommerce

Features include:

  • Use the Block Editor for all your WooCommerce product tabs.
  • Replace the standard product tabs, or any other built-in tab.
  • Create your own custom tabs.
  • Attach each tab to one or more products.
  • Create custom tab titles.
  • Create custom tab slugs.
  • Change your tab sort order.

Tested with the following plugins:

Using Flexible Product Tabs

Replacing a product’s main Description tab is a snap. In the back-end of your site, go to Product Tabs and create a New Product Tab. This will put you into the WordPress Block Editor.

A product tab has two titles. In this example, There’s the title on the tab itself, “Description”

The main title for the content, “Test Tab One”

New WooCommerce Product Tab
Create New Product Tabs
An example custom product tab
Example custom product tab

Use whatever you want for the tab content title, and set “Description” as the tab title. This causes the tab’s “slug” the be “description”.

Information In WordPress, a slug is some text that is all lowercase, dashes and underscores. They’re usually used to create safe URL strings. A slug for “Hello World” could be either “hello-world” or “hello_world”, both are fine. Slugs are usually created automatically for you.

Layout your content in the block editor and choose which product you want this tab to appear on.

Information If you’re optimising your site for SEO then it’s not advisable to use the same Main/Description tab on two products, because the search engines will mark you down for using duplicate content. Although it can sometimes be handy to use the same tab on two products, try to use each tab on only one product where possible.

The last thing you might want to adjust is the Tab priority. This lets you position your tab in amongst the other tabs. To make your tab the first tab that’s shown, set the Tab priority to zero – this is what the Description tab usually has. To put it at the end, set the priority to something like 100.

Custom Product Tab Options
Custom product tab options

If you enable “Advanced query options”, product tabs can be assigned to all products in a category, with a post tag, or all featured products.

Advanced flexibile product tab options
Show custom product tabs by category and tag

That’s all there is to it. Save your product tab – check out your product’s page.

Actions & Filter Hooks

HookParametersNotes
custom_product_tab_content_before
action
$key
$tab
Actions triggered before and after a custom tab is rendered. Useful for wrapping the content in a custom element.
$key is the tab’s slug
$tab is an array of tab meta
custom_product_tab_title_html
filter : string
$custom_tab_title
$product_tab
$product_id
Override the HTML for the tab’s tite.
Hooks you can override with the Purchase Orders and Cart-to-Quote plugin

Add a CSS Class to the Tab Title

Custom product tab titles are rendered with an <h2>...</h2> element. The simplest way to inject a CSS class is to perform a string substitution on “<h2>”. Add the following code in your custom child theme’s functions.php file:

/**
 * Add a custom CSS class to the custom product tab's title
 */
function custom_custom_product_tab_title_html($custom_tab_title, $product_tab, $product_id) {
	if ($product_tab->get_derived_tab_slug() == 'description') {
		$custom_tab_title = str_replace('<h2>', '<h2 class="a-custom-class">', $custom_tab_title);
	}

	return $custom_tab_title;
}
add_filter('custom_product_tab_title_html', 'custom_custom_product_tab_title_html', 10, 3);

Flexible Product Tabs: How to Video

Changelog: Flexible Product Tabs for WooCommerce

Version 1.2.2

Released: 2022-10-12

  • Added new action hooks that wrap the custom tab content, "custom_product_tab_content_before" and "custom_product_tab_content_after".

Version 1.2.1

Released: 2022-10-10

  • Version one of the de-DE translations (machine translated - needs review).

Version 1.2.0

Released: 2022-09-06

New feature: Apply products tabs to all products listed in a category, with a post tag, or all featured products.

Older releases

Minor improvement to the Slider Revolution integration.

  • Added support for including Slider Revolution content on the tabs.
  • Fixed a bug that restricted the maximum of flexible tabs available per product. It's now uncapped/unlimited.

Fixed a bug with the default tab priority for newly created tabs.

Fixed minor bug when trying to save a product tab against the same product more than once.

  • Removed an annoying (and harmless) debug/development message that was popping up in the logs.

Minor update - Tidied up the code behind the meta box and the settings page.

Added an option to enable/disable the H2 title of product tabs on a per-product-tab basis.

Minor bug fix with admin styles not coming through into the block editor for new product tabs.

Updated the power-plugins integration for better link-up when attaching products to custom tabs.

  • Added an "edit Tab" option to the front end to make it easier to edit custom product tabs when viewing products.
  • Tidied up the back-end user interface a bit.
  • Added the Tab Priority column to the Product Tabs admin columns.
  • Tidied up the back-end admin styles and added an option to manually set a product tab's slug. Useful for when you want the product tab (short) title and the slug to be different.
  • Initial public release through Power Plugins.
  • Minor update.
  • Minor update to add a Product(s) column to the list of custom product tabs in the back-end.
  • Fixed optional short tab names from post meta.
  • Initial release to Power Plugins.

Reviews

There are no reviews yet.

Be the first to review “Flexible Product Tabs for WooCommerce”

WooCommerce Flexible Product Tabs
Flexible Product Tabs for WooCommerce
$35