[Support request] Issue with re-ordering tabs

Home Forums Support Issue with re-ordering tabs

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #972392
    Gareth

    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;
    }
    #972394
    Gareth
    #972398
    David
    Staff
    Customer Support

    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

    #972405
    Gareth

    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!

    #972459
    David
    Staff
    Customer Support

    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.

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.