Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #19203


    What files do I need to change so that the product tabs (description, additional information, reviews) are under the images and run full width of the container?



    Hi sirchunk,

    The single page layout gets output into a 12 column grid with the images sitting in 4 columns and the summary in 8. The grid gets scaled down as the page responds to different screen size and this would require the tabs getting output in a new div after everything else. Similar to what is done with the upsells and related products.

    So you would need to write a function similar to those but for the tabs. The tab code is in the woocommerce-config>config.php lines 717-721. Just below that is the function for the upsells and related products.




    OMG, I don’t know what I did but I fluffed through it and have managed to do it… I hope.

    Can I ask for you to check what I’ve done and see if it’s correct please :)



    # display tabs and related items within the summary wrapper


    remove_action( ‘woocommerce_after_single_product_summary’, ‘woocommerce_output_product_data_tabs’, 10 );

    add_action( ‘woocommerce_after_single_product_summary’, ‘woocommerce_output_product_data_tabs’, 1 );

    TO THIS:


    # display tabs and related items within the summary wrapper


    remove_action( ‘woocommerce_after_single_product_summary’, ‘woocommerce_output_product_data_tabs’, 20 );

    add_action( ‘woocommerce_after_single_product_summary’, ‘woocommerce_output_product_data_tabs’, 10 );

    function avia_woocommerce_output_tabs()


    global $avia_config;

    $output = “”;


    woocommerce_output_product_data_tabs($avia_config,$avia_config); // X products, X columns

    $content = ob_get_clean();



    $output .= “<div class=’product_column product_column_”.$avia_config.”‘>”;

    //$output .= “<h3>”.(__(‘Tabs, ‘avia_framework’)).”</h3>”;

    $output .= $content;

    $output .= “</div>”;


    $avia_config = $output;



    I don’t think you need the:

    woocommerce_output_product_data_tabs($avia_config['shop_single_column_items'],$avia_config['shop_single_column']); // X products, X columns

    But that looks right on first glance.


    Brilliant. I’ve surprised myself.

    Can I just ask what the numbers mean (20 & 10) at the end of this please:

    remove_action( ‘woocommerce_after_single_product_summary’, ‘woocommerce_output_product_data_tabs’, 20 );

    add_action( ‘woocommerce_after_single_product_summary’, ‘woocommerce_output_product_data_tabs’, 10 );



    Those numbers let wordpress know how important the execution of that action is compared to others. The lower , the more important it is that its done first. For example if one action is (strap on parachute) and another is (jump out of plane) its important for the computer to know which action to do first :)

    You can read here

    You can also look at the solution I pasted earlier for what you are trying to do since just moving the 2 actions around at some point will cause duplication. Additional else statement needed to prevent that. Though I think your settings play a role in it too.



Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Pagelayout: Moving product tabs’ is closed to new replies.