Modify tab title on product page on mobiles only

Hey fcp,

Thank you for the inquiry.

You can wrap the changes for the additional information tab in the following function.

// https://developer.wordpress.org/reference/functions/wp_is_mobile/

Example:

if(wp_is_mobile()) {
   // do magic here
}

Best regards,
Ismael

Hi,
Sorry for the late reply, try this function instead:

function woo_rename_tabs( $tabs ) {
	if(wp_is_mobile()) {
	$tabs['additional_information']['title'] = __( 'Infos' );	// Rename the additional information tab
	return $tabs;
	} else{ return $tabs; }
}
add_filter( 'woocommerce_product_tabs', 'woo_rename_tabs', 98 );

Then clear your browser cache and check.

Best regards,
Mike

Hi,
When I check your tabs on a mobile device the filter is working, please see the screenshot in Private Content area.
Try clearing your browser cache and checking again.

Best regards,
Mike

Hi,
In this case the PHP function is a server-side event, getting the screen width is a client-side event, wordpress’s answer for this is the “wp_is_mobile()” function, but this relies on user agent sniffing and not actual screen size, mixing these two methods is not ideal.
Since you only want to change the text of the tab for mobile devices when in profile, I would recommend a jQuery script instead of the function.
Would you be interested in this as a solution?

Best regards,
Mike

Hi,
Sorry for the late reply, I disabled the other function and added this script, please clear your browser cache and check.

function custom_woo_tab_title_script(){
  ?>
  <script>
(function($){
  $(document).ready(function(){
  	var width = $(window).width()
  	if ((width <= 479)) {
  $('.single-product #tab-title-additional_information a').each(function() {
    var text = $(this).text();
    $(this).text(text.replace('Informations complémentaires', 'Infos')); 
});
} else {}
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_woo_tab_title_script');

Best regards,
Mike

Hi,
Sorry for the late reply, I checked the product page in the Private Content area, and I believe you are referring to the tab “Caractéristiques” that changes to “Info” for mobile, please see the screenshots in Private Content area.
So I didn’t find the last code solution above in your functions.php, I did find one of the previous solutions from above in your functions.php:

/*Modifier titre onglet Additional information sur mobile*/
function woo_rename_tabs( $tabs ) {
	if(wp_is_mobile()) {
	$tabs['additional_information']['title'] = __( 'Infos' );	// Rename the additional information tab
	return $tabs;
	} else{ return $tabs; }
}
add_filter( 'woocommerce_product_tabs', 'woo_rename_tabs', 98 );

As I recall, this code was unsatisfactory, so I commented it out and added the last solution above, modified for the new tab name:

function custom_woo_tab_title_script(){
  ?>
  <script>
(function($){
  $(document).ready(function(){
  	var width = $(window).width()
  	if ((width <= 479)) {
  $('.single-product #tab-title-additional_information a').each(function() {
    var text = $(this).text();
    $(this).text(text.replace('Caractéristiques', 'Infos')); 
});
} else {}
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_woo_tab_title_script');

This seems to work correctly, this change is now live so please clear your browser cache and check.
Please note that a screen resolution change doesn’t trigger this, so when testing the page must be reloaded for the change to show, simply resizing a desktop browser to emulate a mobile browser will not work.

Best regards,
Mike

Hi,
Glad to hear this helped :) we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

Best regards,
Mike