Social Share Icons on product page breaking page structure. Urgent Help!

Hey Elliot,

Thansk for your reply, on request 1.

for request 2, see this screenshot- https://www.dropbox.com/s/3k89wh20yel6y3k/screenshot2.jpg?dl=0 : I have this accordion that i put here using a plugin called extra product options. I would like to copy the entire review form and reviews provided to show inside the accordion. so what i need is an html or shortcode in order to show the review section (bopth form and other reviews that are added) inside the accordion.

Hello Elliott,

Thanks for the support thus far. I have 2 requests.

1. I got this code below from (https://kriesi.at/support/topic/woo-related-products-above-tabs/#post-483781) and i tried to tweak it to show related products in a tab.

/* Upsell Hook */

// Remove the WooCommerce Upsell hook
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 );

// Add a custom action to display Upsells
add_action( 'growdev_after_single_product_summary', 'woocommerce_upsell_display', 15 );

if ( ! function_exists( 'woocommerce_output_upsells' ) ) {
	function woocommerce_output_upsells() {
	    woocommerce_upsell_display( 10,5 ); // Display 10 products in rows of 5
	}
}

// A filter to add a custom tab
add_filter('woocommerce_product_tabs','growdev_add_tab');

// Callback for add_filter that defines the filter. You can change 'New tab' to the desired
// tab title
// growdev_custom_tab is the function callback
function growdev_add_tab( $tabs ) {
	$tabs['upsell_tab'] = array( 'title' => 'Passende Produkte:', 'priority' => 29,
								 'callback' => 'growdev_custom_tab');
	return $tabs;
}

// The function callback for the custom tab.
// This does the display upsells action inside of the tab
function growdev_custom_tab( $key, $tab ) {

	do_action('growdev_after_single_product_summary');

}

I tweaked it to the code below. it shows the related products in a tab but still shows a duplicate of the related products beneath just before the footer (Screenshot: https://www.dropbox.com/s/r3rk01dviyghhq0/Blue%20Blouse%20%E2%80%A2%20Greetings%20World.png?dl=0) Could you please help fix. thanks.

/* Related Products Hook */
// Remove the WooCommerce Related Products hook
remove_action( 'woocommerce_after_single_product_summary', 'avia_woocommerce_output_related_products', 10 );

// Add a custom action to display Related Products
add_action( 'growdev_after_single_product_summary', 'woocommerce_output_related_products', 20 );

if ( ! function_exists( 'woocommerce_output_related_products' ) ) {
	function woocommerce_output_related_products() {
	    woocommerce_related_products( 10,5 ); // Display 10 products in rows of 5
	}
}

// A filter to add a custom tab
add_filter('woocommerce_product_tabs','growdev_add_tab');

// Callback for add_filter that defines the filter. You can change 'New tab' to the desired
// tab title
// growdev_custom_tab is the function callback
function growdev_add_tab( $tabs ) {
	$tabs['RelatedProducts_tab'] = array( 'title' => 'Related Products', 'priority' => 29,
								 'callback' => 'growdev_custom_tab');
	return $tabs;
}

// The function callback for the custom tab.
// This does the display Related Products action inside of the tab
function growdev_custom_tab( $key, $tab ) {

	do_action('growdev_after_single_product_summary');

}

2. I’m using this code below (got it from: http://kriesi.at/documentation/enfold/enable-social-share-section-for-pages/) to show the social share icons beneath the gallery thumbnails but it breaks the woocommerce product tabs (Screenshot: https://www.dropbox.com/s/l4yezlujwj8ly9l/Blue%20Blouse%20%E2%80%A2%20Greetings%20World%202.png?dl=0). Could you please help fix this.

remove_action( 'woocommerce_before_single_product_summary',  'avia_close_image_div', 20);
add_action( 'woocommerce_before_single_product_summary',  'avia_product_share', 20);
function avia_product_share() {
	//share links on single post
	avia_social_share_links();
	echo "</div>";
}

• This reply was modified 9 years, 2 months ago by adotopanuga.

Hello Andy,

1. Thanks but your code left padding space in the section. so i used the code below instead. Please help confirm that this code won’t affect another page.

.avia-section-small .content {
    display: none;
}

2. See below how the social share breaks the product tabs.
a. Screenshot when social share is placed just before the footer section: https://www.dropbox.com/s/v84vtnixpqy7k18/Blue%20Blouse%20%E2%80%A2%20Greetings%20World3.png?dl=0
b. Screenshot when social share is placed just underneath the product image thumbnails:
https://www.dropbox.com/s/l4yezlujwj8ly9l/Blue%20Blouse%20%E2%80%A2%20Greetings%20World%202.png?dl=0

I need to put the social share underneath the image thumbnails while ensuring that the product tabs look like screenshot b

See private content for the link.

Awaiting your fix. Thanks.

Hello Andy,

See private content for login details.
I really need this thing fixed as soon as possible. Thanks.