Expand product data tabs

[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.

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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.

[David]

Add this CSS:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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.

[ustar]

.

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[ustar]

Thank you, David!

I’ll try at night and let you know.

Hope, I understood correctly )

[David]

Let us know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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.

[David]

I am not seeing those changes on the front end ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[ustar]

[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();
}

[Author]

Posts