Site logo

Archived topic

Issue with re-ordering tabs

4 replies · Started by Gareth on July 31, 2019

Viewing posts 1–5 of 5

Hi,

Not 100% sure if this is a theme issue but could really do with a little help.

I’m trying to customise the tabs on a Woocommerce store running the Generatepress theme and can’t seem to get the tabs re-ordered.
As part of the customisation, I’ve done the following:

Renamed and changed the heading on the additional information tab to “Dimensions” – this worked fine.

Added a new tab based on a custom field called “Features” – this worked fine.

I’ve then tried to re-order the tabs using the code from the Woo site so instead of the original order of:

Description > Dimensions > Features

it should be

Description > Features > Dimensions

However, all that is happening is that they stay in the same order and a gap appears inbetween the first and second tabs.

Any help would be appreciated 🙂

The full script of the functions.php file for the child theme in use is as follows:

<?php
/**
 * GeneratePress Child Theme functions and definitions
 *
 * All functions are prefixed with gpc_
 *
 * @package GenerateChild
 */

if ( ! defined( 'ABSPATH' ) ) exit;

define( 'GPC_VERSION', '1.0');

/**
 * Hide admin bar.
 */
show_admin_bar( true );

/**
 * Enqueue scripts and styles.
 */
add_action( 'wp_enqueue_scripts', 'gpc_scripts' );
function gpc_scripts() {
  wp_enqueue_style( 'gpc-base', get_stylesheet_directory_uri() . '/css/base.css', false, GPC_VERSION, 'all');
  wp_enqueue_style( 'gpc-gutenberg', get_stylesheet_directory_uri() . '/css/gutenberg.css', false, GPC_VERSION, 'all');
  wp_enqueue_script( 'gpc-scripts', get_stylesheet_directory_uri() . '/js/scripts.js', array( 'jquery' ), GPC_VERSION, true );
}

/**
 * Add body classes.
 */
add_filter( 'body_class', 'gpc_body_classes' );
function gpc_body_classes( $classes ) {
  $classes[] = 'gpc';
  return $classes;
}

/**
 * Add .has-js class to html element.
 */
add_action( 'generate_before_header','gpc_add_js_class' );  
function gpc_add_js_class() { ?> 
  <script>
    jQuery('html').addClass('has-js');
  </script>
<?php }

/**
 * Responsive embedded video.
 */
add_filter( 'embed_oembed_html', 'gpc_embed_html', 10, 3 );
add_filter( 'video_embed_html', 'gpc_embed_html' ); // Jetpack
function gpc_embed_html( $html ) {
  return '<div class="video-container">' . $html . '</div>';
}

/**
 * Enable shortcodes in widgets.
 */
add_filter( 'widget_text' , 'do_shortcode' );

/**
 * Include other functions as needed from the <code>inc</code> folder.
 */
require get_stylesheet_directory() . '/inc/users.php';
require get_stylesheet_directory() . '/inc/generatepress.php';
require get_stylesheet_directory() . '/inc/styles.php';
require get_stylesheet_directory() . '/inc/colors.php';
require get_stylesheet_directory() . '/inc/fonts.php';
require get_stylesheet_directory() . '/inc/dashboard-widgets.php';
require get_stylesheet_directory() . '/inc/widgets.php';
require get_stylesheet_directory() . '/inc/sub-menu-widget.php';
require get_stylesheet_directory() . '/inc/breadcrumbs.php';
require get_stylesheet_directory() . '/inc/optimizations.php';
require get_stylesheet_directory() . '/inc/image-sizes.php';
require get_stylesheet_directory() . '/inc/cpt-output-reset.php';
require get_stylesheet_directory() . '/inc/wp-show-posts.php';
// require get_stylesheet_directory() . '/inc/cpt-output-custom.php';
// require get_stylesheet_directory() . '/inc/advanced-custom-fields.php';
// require get_stylesheet_directory() . '/inc/woocommerce.php';
// require get_stylesheet_directory() . '/inc/shortcodes.php';

/**
 * Rename product data tabs
 */
add_filter( 'woocommerce_product_tabs', 'woo_rename_tabs', 98 );
function woo_rename_tabs( $tabs ) {

	$tabs['additional_information']['title'] = __( 'Dimensions' );	// Rename the additional information tab

	return $tabs;

}

/** 
 * Change the heading on the Additional Information tab section title for single products.
 */
add_filter( 'woocommerce_product_additional_information_heading', 'isa_additional_info_heading' );
 
function isa_additional_info_heading() {
    return 'Shipping Dimensions';
}

function disable_checkout_button_no_shipping() {
    $package_counts = array();
     
    // get shipping packages and their rate counts
    $packages = WC()->shipping->get_packages();
    foreach( $packages as $key => $pkg )
        $package_counts[ $key ] = count( $pkg[ 'rates' ] );
 
add_action( 'woocommerce_proceed_to_checkout', 'disable_checkout_button_no_shipping', 1 );
    // remove button if any packages are missing shipping options
    if( in_array( 0, $package_counts ) )
        remove_action( 'woocommerce_proceed_to_checkout', 'woocommerce_button_proceed_to_checkout', 20 );
}

add_filter( 'woocommerce_cart_no_shipping_available_html', 'change_noship_message' );
add_filter( 'woocommerce_no_shipping_available_html', 'change_noship_message' );
function change_noship_message() {
    print "Please call us after placing your order to negotiate shipping: <br />(+44) 1706 367649";
}

add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {
	
	// Adds the new tab
	
	$tabs['test_tab'] = array(
		'title' 	=> __( 'Features', 'woocommerce' ),
		'priority' 	=> 50,
		'callback' 	=> 'woo_new_product_tab_content'
	);

	return $tabs;

}
function woo_new_product_tab_content() {

	// The new tab content

	echo '<h2>Features</h2>';
        echo get_field('features', $post_id);
	
}

/**
 * Reorder product data tabs
 */
add_filter( 'woocommerce_product_tabs', 'woo_reorder_tabs', 98 );
function woo_reorder_tabs( $tabs ) {

	$tabs['description']['priority'] = 5;			// Reviews first
	$tabs['Features']['priority'] = 10;			// Description second
	$tabs['additional_information']['priority'] = 15;	// Additional information third

	return $tabs;
}

Hi there,

if i inspect the HTML of the site there are 4 tabs - the second tab which has no anchor Label is the Features_tab. So the re-ordering is working correctly, you just need to fix the missing label and then remove the function that is registering the test_tab

Hi David,

Thanks for the fast response :-)

I'll admit I'm new to functions so am still a bit confused by this. I assume that you are referencing the following bit of code before the re-ordering code:

add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {
	
	// Adds the new tab
	
	$tabs['test_tab'] = array(
		'title' 	=> __( 'Features', 'woocommerce' ),
		'priority' 	=> 50,
		'callback' 	=> 'woo_new_product_tab_content'
	);

	return $tabs;

}
function woo_new_product_tab_content() {

	// The new tab content

	echo '<h2>Features</h2>';
        echo get_field('features', $post_id);
	
}

Essentially, to my knowledge, all I've done is re-named the "Additional Info" tab to "Dimensions" and then added a single extra tab linked to the "Features" custom field. Really not sure why there is now a fourth tab. I can see where it does say "test_tab" so would that need changing to "Features" instead to prevent a conflict?

Cheers!

Thats correct you could change the $tab name to Features. But you would also need to find out why there is an empty tab being generated that is already using the Features label.

This archived topic is closed to new replies.