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

    Hi,

    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?

    Cheers

    #102648

    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.

    Regards,

    Devin

    #102649

    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 :)

    FROM THIS:

    #

    # 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 = “”;

    ob_start();

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

    $content = ob_get_clean();

    if($content)

    {

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

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

    $output .= $content;

    $output .= “</div>”;

    }

    $avia_config = $output;

    }

    #102650

    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.

    #102651

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

    #102652

    Hi,

    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 http://codex.wordpress.org/Function_Reference/add_action

    You can also look at the solution I pasted earlier for what you are trying to do http://www.kriesi.at/support/topic/product-details-page-layout#post-88883 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. http://i.imgur.com/tVzKs.png

    Thanks,

    Nick

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

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