[Support request] Description Tabs (Text) below Images

Home Forums Support Description Tabs (Text) below Images

  • This topic has 13 replies, 2 voices, and was last updated 7 months ago by David.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1170241
    achims

    Hi,

    do anybody have an idea how to change the order on a single product in woocommerce.

    I would like to place the description directly below the Images (Thumbnails).

    Thanks for any help in this case.

    Achim

    #1170440
    David
    Staff
    Customer Support

    Hi there,

    try adding this CSS:

    .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images,
    .woocommerce #content div.product div.summary {
        width: 100% !important;
        float: none;
        margin-right: 0;
        margin-left: 0;
    }
    #1170469
    achims

    Hi David,

    this does not work.

    #1170473
    achims

    I think it could be done by hooks and should look nearby this:

    // Add product description tab content in new position
    function woocommerce_template_product_description() {
    woocommerce_get_template( ‘single-product/tabs/description.php’ );
    }
    add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_product_description’, 20 );

    But i can not find out the right hooks and templates …

    #1170509
    David
    Staff
    Customer Support

    Just to be clear you want ALL of the Description below the image – Including the title etc ?
    As i cannot see the Woo tabs on the page ?

    #1170554
    achims

    You have to scroll down to the description tabs.

    <h1 class=”product_title entry-title” ….
    …..

    Now the product_title is on the right side (because of some css) and as up as the Images.
    At the End of the summery there is the description.

    With this i can change the tabs to bring them above the title:

    // Remove product tabs (description, additional information, reviews)
    remove_action( ‘woocommerce_after_single_product_summary’, ‘woocommerce_output_product_data_tabs’, 10 );

    // Add product description tab content in new position
    function woocommerce_template_product_description() {
    woocommerce_get_template( ‘single-product/tabs/description.php’ );
    }
    add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_product_description’, 1 );

    But now i do not know how to change the css to get the tabs back to the left side …

    #1170569
    David
    Staff
    Customer Support

    Is there a specific URL where i can see the tabs ?

    The URL provided had none:

    Also it is really tricky to move the tabs to that position – see the visual hook guide here:

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

    The woocommerce_product_thumbnails hook which would be the place to add it was deprecated – so no longer can it be used.

    You would probably need to unhook / rehook the gallery and tabs so they occupy the same container as the summary to do this.

    #1170623
    achims

    Thanks very much for your help.

    Strange that you can not see the Tabs. Maybe you just looked at the page when i have removed (unhooked) it for a short time.

    The Information about the deprecated does helps a lot.

    And maybe i will try it by your idea to rehook the gallery.

    Thanks again!

    Achim

    #1170663
    David
    Staff
    Customer Support

    OK – thought about and give this a try – it will insert a custom wrapper with the images and tabs within:

    // Remove Tabs
    remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
    
    // Insert opening of custom wrapper before gallery
    add_action( 'woocommerce_before_single_product_summary', function() {
    	echo '<div class="custom-woo-wrap">';
    }, 15 );
    
    // Rehook tabs and close custom wrapper
    add_action( 'woocommerce_before_single_product_summary', function() {
    	woocommerce_output_product_data_tabs();
    	echo '</div>';
    }, 60 );

    If it works it will require some CSS = happy to help with

    #1170792
    achims

    This looks great.

    The order is now as it should be.

    If you could help with the css it would be great.

    #1170849
    achims

    I just added this css.

    I think it is not very elegant but it works 🙂


    @media
    screen and (min-width: 800px){
    .woocommerce-tabs {
    max-width: 40%;
    float:left
    }

    If you know a little bit more elegant way i would be happy to learn how to do it.

    Thanks again!

    #1171228
    David
    Staff
    Customer Support

    Awesome – that CSS method is the simplest method there is – i like it 🙂

    #1171289
    achims

    David, thanks very much for your help. Have a nice day!

    #1171403
    David
    Staff
    Customer Support
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.