Support » Plugin: WooCommerce » Issue with re-ordering tabs

  • Resolved gazpugh1

    (@gazpugh1)


    Hi,
    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.

    Code added is as follows:

    /**
    * 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 ‘Dimensions’;
    }

    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;
    }

    Any help would be appreciated 🙂

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • This one here gets the job done for us, call the endpoints and change the name the way you want

    function my_account_order() {
    	$myorder = array(
    		'dashboard'          	=> __( 'A Name', 'woocommerce' ),
    		'edit-account'       	=> __( 'Account', 'woocommerce' ),
    		'orders'            	=> __( 'Paperwork', 'woocommerce' ),
                    'customer-logout'    	=> __( 'goodbye', 'woocommerce' ),
    );
    	return $myorder;
    }
    add_filter ( 'woocommerce_account_menu_items', 'my_account_order' );

    Hi Braeher,
    Thanks for that but these are the info tabs on product pages so as far as I know, they don’t have endpoints like the account page tabs you are referring to.
    Just not sure if one bit of code is conflicting with another but the code I used was pulled from the Woocommerce support pages so unsure why it isn’t working.
    Cheers!

    Plugin Support m155y5

    (@m155y5)

    Automattic Happiness Engineer

    Hi @gazpugh1

    My apologies that we’re so late in responding to your inquiry.

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

    I took a look at this and noticed that when I use the code on my test site, there is a gap in the tabs if I do not have the Description filled completed on the product in question. I assume this is because when we are using the function to reorder the tabs, we’re forcing it to display.

    I took a look at your site and do see that gap you’re referring to. It appears that you have an extra tab inserted somehow and that tab is not being populated with information, much like my description tab was.

    Here’s a screenshot of your code that I’m referring to: https://cld.wthms.co/wymPvT

    If you remove that extra tab from your code, it should correct the issue.

    • This reply was modified 3 weeks, 5 days ago by  m155y5. Reason: It didn't like my image link :)
    • This reply was modified 3 weeks, 5 days ago by  m155y5.
    Plugin Support m155y5

    (@m155y5)

    Automattic Happiness Engineer

    We haven’t heard back from you in a while, so I’m going to go ahead and mark this thread as resolved. If you have any other questions please feel free to start a new thread.

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