custom tab

function woo__care_instructions_tab_content()  {
    global $product;
	
	echo i want your care instructions to display here;

}

I’m currently also displaying the tabs only if there is content inside them using the code below, but get_meta checking for my custom fields.

I’m wondering is there a way we can call your overall meta to check also if there is content? Something like this?

$product = wc_get_product($post->ID);
    $custom_fields_woocommerce_title = $product->get_meta('_yourpluginmeta');
  if ($custom_fields_woocommerce_title)

Hi @tgjr,

You can try something like that:

// Get plugin instance
$wcsfwc = WashCareSymbolsForWooCommerce::get_instance();

// Remove plugin hooks
remove_action( 'woocommerce_single_product_summary', [ $wcsfwc, 'below_short_desc_display' ], apply_filters( 'wcsfw_below_short_desc_priority', 21 ) );
remove_action( 'woocommerce_product_additional_information', [ $wcsfwc, 'additional_info_display' ] );

// Get instructions
$instructions = $wcsfwc->get_product_values();

// Don't display if empty
if ( !$instructions ){return;}

I didn’t test it

In your custom tab you could have something like that:

add_filter('your_custom_tab', 'your_custom_tab_content');
function your_custom_tab_content(){
	$wcsfwc = WashCareSymbolsForWooCommerce::get_instance();
	$instructions = $wcsfwc->get_product_values();

	if ($instructions) {
		echo '<div class="wcsfw below-short-desc">';
		echo '<ul>';
		echo '<li class="wcsfw-symbols-container">';
		foreach ( $instructions as $fieldkey => $options ) {
			if ( $options ) {
				foreach ( $options as $option ) {
					echo '<button aria-label="' . __( $wcsfwc->values[$fieldkey][ 'choices' ][ $option ], 'wash-care-symbols-for-woocommerce' ) . '"data-microtip-size="medium" data-microtip-position="top" role="tooltip" class="wcsfw-symbol-btn" >';
					echo '<img class="wcsfw-symbol-img" src="' . plugin_dir_url( __FILE__ ) . 'symbols/' . $option . '.png">';
					echo '</button>';
				}
			}
		}
		echo '</li></ul>';
		echo '</div>';
	}
}

And of course, you’ll need to replace
echo '<img class="wcsfw-symbol-img" src="' . plugin_dir_url( __FILE__ ) . 'symbols/' . $option . '.png">';
with
echo '<img class="wcsfw-symbol-img" src="' . plugins_url( 'wash-care-symbols-for-woocommerce' ) . '/symbols/' . $option . '.png">';
or something like that

you’re an absolute hero. it works!

thank you!

all the best.

Glad you enjoy ??

Cheers,

Charlie

My apologies, I just realized this isn’t working correctly, as it’s not displaying the table with the text either. It’s only displaying the icons.

Also, would you happen to know how to get the tab also to hide if there is no content?

So I tried using your same code from the tab content, onto the tab itself but couldn’t get it to work. Would you perhaps know a solution? I’ve added the size-guide code also I use to show or hide the tab depending if there is custom field meta data present or not.

add_filter( 'woocommerce_product_tabs', 'woo_custom_product_tabs' );
function woo_custom_product_tabs( $tabs ) {
global $post;
	
// Adds the Care Instructions Chart  tab

$wcsfwc = WashCareSymbolsForWooCommerce::get_instance();
$instructions = $wcsfwc->get_product_values();
if ($instructions) {
	    $tabs['_care_instructions_tab'] = array(
        'title'     => __( 'Care Instructions', 'woocommerce' ),
        'priority'  => 20,
        'callback'  => 'woo__care_instructions_tab_content'
    ); 
	
	 // Adds the Size Chart  tab
    	
$product = wc_get_product($post->ID);
$custom_fields_woocommerce_title = $product->get_meta('_size_chart');
if ($custom_fields_woocommerce_title)
  	$tabs['size_chart_tab'] = array(
        'title'     => __( 'Size Chart', 'woocommerce' ),
        'priority'  => 40,
        'callback'  => 'woo_size_chart_tab_content' 
		
	);

Nvm. I got it working. Sorry for confusion. I had some {} in the wrong place. This is working now completely for the tab itself. If I don’t put any care instruction information in then the tab does not display.

add_filter( 'woocommerce_product_tabs', 'woo_custom_product_tabs' );
function woo_custom_product_tabs( $tabs ) {
global $post;
	
$wcsfwc = WashCareSymbolsForWooCommerce::get_instance();
$instructions = $wcsfwc->get_product_values();
if ($instructions) 
	    $tabs['_care_instructions_tab'] = array(
        'title'     => __( 'Care Instructions', 'woocommerce' ),
        'priority'  => 20,
        'callback'  => 'woo__care_instructions_tab_content'
    );

However, it still doesn’t display the table as it usually appears; it only display the icons (however this could actually can be beneficial also).

Btw you really saved me today, thank you for helping.

Next time I need to hire a php dev I’m coming to you!!

Ok, I guess in your case, this is what you need

$wcsfwc = WashCareSymbolsForWooCommerce::get_instance();
remove_action( 'woocommerce_single_product_summary', [ $wcsfwc, 'below_short_desc_display' ], apply_filters( 'wcsfw_below_short_desc_priority', 21 ) );
remove_action( 'woocommerce_product_additional_information', [ $wcsfwc, 'additional_info_display' ] );

add_filter( 'woocommerce_product_tabs', 'woo_custom_product_tabs' );

function woo_custom_product_tabs( $tabs ) {
	global $post, $product;

	$wcsfwc       = WashCareSymbolsForWooCommerce::get_instance();
	$instructions = $wcsfwc->get_product_values();
	if( $instructions ) {
		$tabs[ '_care_instructions_tab' ] = array(
			'title'    => __('Care Instructions', 'woocommerce'),
			'priority' => 20,
			'callback' => 'woo__care_instructions_tab_content'
		);
	}
	return $tabs;
}

function woo__care_instructions_tab_content(){
	$wcsfwc = WashCareSymbolsForWooCommerce::get_instance();
	$wcsfwc->additional_info_display();
}

Here I’m using $wcsfwc->additional_info_display(); to display instructions: it allows you to use the same layout setting you defined in plugin settings.

It works on my local test site.

• This reply was modified 2 years, 4 months ago by Charlie Etienne.

I think I will add the ability to display instructions in a custom tab as a feature in the next version, this is a good idea.

It’s now part of the plugin in version 3.1.0

Great update, though for now I’ll keep the older version as 4.0 breaks my site with these changes and unfortunately I don’t have time to reassess everything atmo. I’m also utilizing additional custom fields inside the same tab.

Does your new tab update include the only appears if information actually put in it?

I have a couple of recommendations:

– Maybe also have a customizable field above or below the table for inserting any custom text or shortcodes, such as: Use the care instructions below carefully to ensure your product stays the best shape for as long as possible”, or maybe somebody wants some custom image or shortcode to a UX block or whatever in the same tab.

– Add also care instructions for ceramics, wood or glass products, like microwave safe/do not microwave and dishwasher safe/ hand wash only type thing.

Anyway, it’s just suggestions and feedback, not a complaint. Good work on the new update and thanks again!

Btw I forgot to say the above code worked very well, thank you.