Archived topic
Issue with re-ordering tabs
4 replies · Started by Gareth on July 31, 2019
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;
}
PS - you can see an example of the issue here - http://cjautosheywood-co-uk.stackstaging.com/product/1-5ton-mini-tilting-lift-cl03/
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.