[Resolved] Woocommerce product tabs different layout

Home Forums Support [Resolved] Woocommerce product tabs different layout

Home Forums Support Woocommerce product tabs different layout

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1220609
    johnaps

    Hello GP Team! I hope you and your fams are all well and about!!

    I have searched the forum and the web for doing this but i have only found how to hide/rearrange etc the tabs…

    I would really want to do the following:

    1. To “eliminate” tabs completely BUT make their panels to be shown always
    2. additional information tab and panel to be removed completely
    3. comments panel which would be always visible to now be positioned after product description panel
    4. (additional) move the related products after woocommerce shortdescription and before product description panel.

    Is this possible?

    #1221473
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    You can remove the tabs and just show the sections like this:

    .woocommerce div.product .woocommerce-tabs ul.tabs {
        display: none;
    }
    
    .woocommerce div.product .woocommerce-tabs .panel {
        display: block !important;
    }

    As for re-ordering things, I’m not sure what the best way to do that would be. It may be worth checking with WooCommerce support to see if there’s an easy solution.

    #1226356
    johnaps

    Hello Tom!! Thank you for the css it did the trick!!

    I have found the following code for future referance if anyone needs it to reorder the elements¨

    
    //reorder single product page elements
    		add_filter( 'woocommerce_product_tabs', 'reordered_tabs', 98 );
    		function reordered_tabs( $tabs ) {
       		 	  $tabs['description']['priority'] = 15; 
      			  $tabs['reviews']['priority'] = 25;
     
       		return $tabs;
    		}
    		add_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 20);
    		add_action( 'woocommerce_product_additional_information', 'wc_display_product_attributes', 35 );
    		do_action( 'woocommerce_product_after_tabs' );
    		add_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 5 );
    		add_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 10 );
    		do_action( 'woocommerce_after_main_content' );
    

    Ι had added it in functions.php in child theme and i got the wanted result… problem is the whole layout i wanted was “AddeD” after all the existing layout of the single product page, thus duplicating the same elements…
    I tried copying single-product.php to my child theme but i cant figure out no matter how much i try where the above code should go…
    https://gofile.io/?c=31GU8x
    here is my single-product.php file!

    Can you help me out place the above actions where they should go 🙂 ?

    #1226813
    Tom
    Lead Developer
    Lead Developer

    I think you only need this part:

    add_filter( 'woocommerce_product_tabs', 'reordered_tabs', 98 );
    function reordered_tabs( $tabs ) {
        $tabs['description']['priority'] = 15; 
        $tabs['reviews']['priority'] = 25;
     
        return $tabs;
    }
    #1226820
    johnaps

    I would like to move related products above description!! So i need more than that, but problem is where to put this code, in functions .php ?
    Problem is my code adds the related product again and every element is added again in the order i want, but how do i remove the already existing elements;; or instead of removing them i should add the code somewhere else than functions.php maybe??

    #1227256
    David
    Staff
    Customer Support

    All of these codes should go in your child theme functions.php

    Simply remove the function before adding it where you want it ie.

    remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

    The article will help when it comes to removing existing functions:

    https://businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/

    #1227290
    johnaps

    Perfect support 🙂

    #1227877
    David
    Staff
    Customer Support

    Glad we could be of help

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