Add product description under image product

  • Hello,

    I’m trying to modify the emplacement for description tab (and others tabs like reviews …) under the image product.
    You can see on my test site what I’m trying to do :
    screenshot

    To do that, I have modified the file
    wp-content\plugins\woo-variation-gallery\templates\product-images.php
    I have added on line 140 :

    <div class="description-under-image">
	<?php
    $tabs = apply_filters('woocommerce_product_tabs', array());

    if (! empty($tabs)) : ?>
		<div class="woocommerce-tabs wc-tabs-wrapper">
			<ul class="tabs wc-tabs" role="tablist">
				<?php foreach ( $tabs as $key => $tab ) : ?>
					<li class="<?php echo esc_attr( $key ); ?>_tab"
					id="tab-title-<?php echo esc_attr( $key ); ?>" role="tab"
					aria-controls="tab-<?php echo esc_attr( $key ); ?>"><a
					href="#tab-<?php echo esc_attr( $key ); ?>"><?php echo apply_filters( 'woocommerce_product_' . $key . '_tab_title', esc_html( $tab['title'] ), $key ); 
					?></a>
					</li>
				<?php endforeach; ?>
			</ul>
			<?php foreach ( $tabs as $key => $tab ) : ?>
				<div class="woocommerce-Tabs-panel woocommerce-Tabs-panel--<?php echo esc_attr( $key ); ?> panel entry-content wc-tab"
				id="tab-<?php echo esc_attr( $key ); ?>" role="tabpanel"
				aria-labelledby="tab-title-<?php echo esc_attr( $key ); ?>">
				<?php if ( isset( $tab['callback'] ) ) { call_user_func( $tab['callback'], $key, $tab ); } ?>
				</div>
			<?php endforeach; ?>
		</div>
	<?php endif; ?>
</div>

    I don’t know if I did it correctly, i’m new with wordpress. But the result is ok for me.
    The problem is when the page is loaded, my description is hidden. I have to click on description and it appears :
    screenshot2

    The description (with default oceanwp) is shown automatically. Can you tell me what I should do to show the description when the page is loaded with the code I have added ?

    Thanks for your help.

    • This topic was modified 5 years, 7 months ago by busterland.
Viewing 8 replies - 1 through 8 (of 8 total)

  • Hello,

    Try to add the below code to the functions.php file of the child theme to move the tab where you want. Instead of woocommerce_single_product_summary in the code, use a hook that will display it under the image. 

    remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_output_product_data_tabs', 60 );
    Thread Starter busterland

    (@busterland)

    Hi Amit, thanks for your help again ! ??
    I tried your code but the description tab go under the price.
    I would like to put the description under the image.

    I tried this code but the description take all the page size :

    remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
add_action( 'woocommerce_before_single_product_summary', 'woocommerce_output_product_data_tabs', 30 );

    Sans-titre

    I would like to get description under the image and half screen to get the description beside the price, the add to cart button … (as my first screenshot)

    Regards

    Thread Starter busterland

    (@busterland)

    Hi again
    Whith the code I sent you, the <div class="woocommerce-tabs wc-tabs-wrapper"> is after the div <!-- .woo-variation-gallery-wrapper -->
    That’s why description tab take all the sceeen size.
    avant

    When I move the <div class="woocommerce-tabs wc-tabs-wrapper"> into the div <!-- .woo-variation-gallery-wrapper --> the description is correctly under the image.
    apres

    But I don’t know how to says to my function to add woocommerce_output_product_data_tabs
    in the div woo-variation-product-gallery

    Thanks for helping ??

    You need to contact the woo-variation-gallery plugin support for the correct hook to make the function work.

    Thread Starter busterland

    (@busterland)

    I have contacted the woo-variation-gallery but they tell me to contact my theme developer.

    Me also i’m thinking you are the person who can help me to do this. I’m using your premium theme and there is some modification that I need.

    Moreover the plugin woo-variation-gallery is not linked to the apparence of the product page.

    Thanks for your help

    Try to use the below code to display the content below the product image – 

    function prefix_add_below_prod_gallery() {
   echo 'add-your-content';
}
add_action( 'woocommerce_after_single_product_summary' , 'prefix_add_below_prod_gallery', 5 );
    Thread Starter busterland

    (@busterland)

    The problem is the description tab isn’t display automatically:
    tab-description

    If I add in the css display:block for descritpion tab, when I click on review tab, the description tab didn’t swhitch to display:none so description tab is still visible and review tab is display under the description.

    I guess there is some javascript to modify element.style css but I don’t know where to modify it. Could you help me to find where is it?

    Thanks

    • This reply was modified 5 years, 7 months ago by busterland.
    • This reply was modified 5 years, 7 months ago by busterland.

    Can you please share your site link so that I can check it?

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Add product description under image product’ is closed to new replies.