[Resolved] Expand product data tabs

Home Forums Support Expand product data tabs

Viewing 15 posts - 1 through 15 (of 26 total)
  • Author
    Posts
  • #1402391
    ustar

    Hi, there!

    I’m trying to expand product data tabs automatically. To have all info about product already opened.
    Description and Additional information.

    This code expands tabs, but in my template “Niche” Destciption goes to the right section of page and while scrollng goes under other text and buttons. But all data (Description and Additional information) should be under images.

    The code is:

    add_action( ‘after_setup_theme’,’db_stack_product_tabs’ );

    function db_stack_product_tabs(){
    // Remove product tabs
    remove_action(‘woocommerce_after_single_product_summary’,’woocommerce_output_product_data_tabs’, 10 );
    // Get tab content template parts
    add_action(‘woocommerce_after_single_product_summary’,’db_get_tab_template_parts’, 10 );
    }

    function db_get_tab_template_parts() {
    // Include required template parts
    ?>

    <?php wc_get_template( ‘single-product/tabs/description.php’ ); ?>
    <?php wc_get_template( ‘single-product/tabs/additional-information.php’ ); ?>

    <?php comments_template();
    }

    Could you please help me to fix this effect?
    Thanks in advance.
    Sergey.

    #1402650
    David
    Staff
    Customer Support

    Hi there,

    Niche uses some custom functions to create that stacked gallery which will effect how those hooks behave. If you want to add back the code i can take a look to see what the issue is.

    Or you could simply use some CSS to stack them:

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

    Hi, David!

    I’m added the code. Please, take a look.
    I’d like to fix it asap, because this is a live site and i wouldn’t like to show customers strange looking pages ))

    Thanks for understanding.

    Regards, Sergey.

    #1406945
    David
    Staff
    Customer Support

    Add this CSS:

    .woo-description-section,
    .woo-information-section {
        grid-column: 1;
    }
    #1407179
    ustar

    Thank you, David!

    Works perfectly for tabs! )
    But now link “Full description” does not work and do not scroll screen to the bottom.

    Regards, Sergey.

    #1407185
    ustar

    .

    #1407399
    David
    Staff
    Customer Support

    Hmmm…

    we would need to wrap the summary and tabs using a function like this:

    add_action('woocommerce_single_product_summary' , function() {
      echo '<div class="summary-wrap">';
    } , 1 );
    
    add_action('woocommerce_after_single_product_summary' , function() {
      echo '</div>';
    } , 20 );

    Not in the second add_action the 20 – this is the priority. It may need tweaking to adjust the position of the closing <div>. Lower number will move it up. Higher number will move it down.

    Then on this CSS:

    .woocommerce div.product div.summary {
        grid-column: 2;
        grid-row: 1;
        margin-left: 80px;
        position: -webkit-sticky;
        position: sticky;
        top: 105px;
        bottom: 100px;
        padding-right: 80px;
    }

    You would change the CSS selector to:

    .woocommerce div.product div.summary-wrap

    I think lol

    #1407606
    ustar

    Maybe i’m doing something wrong, but it didn’t hepl. I used few different combinations of code and css, but without any success…

    In the end i put the code for functions.php from the very beginning without any effect.
    Now the following code is on site but i see bo changes:

    add_action('woocommerce_single_product_summary' , function() {
      echo '<div class="summary-wrap">';
    } , 1 );
    
    add_action( ‘after_setup_theme’,’db_stack_product_tabs’ );
    
    function db_stack_product_tabs(){
    // Remove product tabs
    remove_action(‘woocommerce_after_single_product_summary’,’woocommerce_output_product_data_tabs’, 10 );
    // Get tab content template parts
    add_action(‘woocommerce_after_single_product_summary’,’db_get_tab_template_parts’, 10 );
    }
    
    function db_get_tab_template_parts() {
    // Include required template parts
    ?>
    <?php wc_get_template( ‘single-product/tabs/description.php’ ); ?>
    <?php wc_get_template( ‘single-product/tabs/additional-information.php’ ); ?>
    
    <?php comments_template();
    }
    
    add_action('woocommerce_after_single_product_summary' , function() {
      echo '</div>';
    } , 5 );

    And CSS:

    .woocommerce div.product div.summary-wrap {
        grid-column: 2;
        grid-row: 1;
    /*    margin-left: 80px; */
        position: -webkit-sticky;
        position: sticky;
        top: 105px;
        bottom: 100px;
        padding-right: 80px;
    }
    #1407645
    David
    Staff
    Customer Support

    Try this:

    1. Remove this function:

    add_action('woocommerce_single_product_summary' , function() {
      echo '<div class="summary-wrap">';
    } , 1 );
    
    add_action('woocommerce_after_single_product_summary' , function() {
      echo '</div>';
    } , 20 );

    2. Edit the Gallery Wrap hook element – at the end of the code add <div class="summary-wrap"> so the code looks like this:

    // Closing div found in Close Summary Wrap element
    ?>
    </div>
    <div class="summary-wrap">

    Then edit the Close Summary Wrap to look like this:

    </div>
    </div>
    <!-- Close gallery wrap -->

    This should give us an inner wrapper covering the summary and the tab content.

    Then i can look at the CSS

    #1407686
    ustar

    Thank you, David!

    I’ll try at night and let you know.

    Hope, I understood correctly )

    #1407693
    David
    Staff
    Customer Support
    #1408494
    ustar

    Hi, David!

    I did not found any hooks with name “Gallery Wrap”, so i added just one line <div class="summary-wrap"> to the hook “Gallery Stack” in the very buttom.

    Then i put just one more </div> to the hook “Close Summary Wrap”

    Now Description and Additional information are in the right part under product summary. And Summary coverse other content.

    All additional CSS regarding this task was deleted.

    Regards, Sergey.

    #1409008
    David
    Staff
    Customer Support

    I am not seeing those changes on the front end ?

    #1409222
    ustar

    Close Summary Wrap

    Gallery Stack

    #1409226
    ustar

    Now on site

    Gallery Stack element: https://ibb.co/F5GF9TX

    Close Summary Wrap element: https://ibb.co/hWx0Z2y

    Displayung: Product/All products.

    And thgis code in functions.php

    add_action( ‘after_setup_theme’,’db_stack_product_tabs’ );
    
    function db_stack_product_tabs(){
    // Remove product tabs
    remove_action(‘woocommerce_after_single_product_summary’,’woocommerce_output_product_data_tabs’, 10 );
    // Get tab content template parts
    add_action(‘woocommerce_after_single_product_summary’,’db_get_tab_template_parts’, 10 );
    }
    
    function db_get_tab_template_parts() {
    // Include required template parts
    ?>
    <?php wc_get_template( ‘single-product/tabs/description.php’ ); ?>
    <?php wc_get_template( ‘single-product/tabs/additional-information.php’ ); ?>
    
    <?php comments_template();
    }
Viewing 15 posts - 1 through 15 (of 26 total)
  • You must be logged in to reply to this topic.