Woocommerce additional image tab « Support Forum | Kriesi.at

Support Forum » Flashlight

Woocommerce additional image tab

5 posts from 3 voices

Started 1 year ago by jorisvh
Latest reply from jorisvh
This topic is closed
This topic is resolved

Tags:

jorisvh
Member

Another question. In the product data I have a up-sells product. In other words that is an additional iamge (thanks Kriesli). But the image is under the description text. I want the up sells as a additional image tab. So to see the image you have to click on a tab. Is that possible?

THanks a lot,

Martijn

Posted 1 year ago #
Devin
Moderator

Hi jorisvh,

You would need to modify the WooCommerce template for single items. Its located in your plugins>woocommerce>templates>single-product.php with calls to the single-product folder and the various files in there as well.

Posted 1 year ago #
jorisvh
Member

Hello Devin,

Ok but how can I do that exactly? I am no PHP programmer. THanks a lot!!!!!

Posted 1 year ago #

Ismael
Moderator

This is what you have to do.

1.) First look for woocommerce-hooks.php and add this line in the /* Product page tabs */

add_action( 'woocommerce_product_tabs', 'woocommerce_product_upsells_tab', 50 );
add_action( 'woocommerce_product_tab_panels', 'woocommerce_product_upsells_panel', 50 );

2.) Go to woocommerce-template.php look for /* Product page tabs then add this line

if (!function_exists('woocommerce_upsell_display')) {
	function woocommerce_product_upsells_tab() {
		woocommerce_get_template('single-product/tabs/tab-upsells.php', false);
	}
}

3.) Again, in the woocommerce-template.php, look for /* Product page tab panels */ add this line.

if (!function_exists('woocommerce_upsell_display')) {
	function woocommerce_product_upsells_panel() {
		woocommerce_get_template('single-product/tabs/upsells.php', false);
	}
}

4.) Go to templates > single-product > tabs and create a file called tabs-upsells.php and insert this code.

<li><a href="#tab-upsells"><?php _e('Upsells', 'woocommerce'); ?></a></li>

5.) Again in tabs folder create a file called upsells.php and insert this code.

<?php
/**
 * Upsell Tab
 */

global $woocommerce, $post;
?>
<div class="panel" id="tab-upsells">
	<?php
/**
 * Up-sells
 */

global $product;
$upsells = $product->get_upsells();
if (sizeof($upsells)==0) return;
?>
	<h2><?php _e('You may also like…', 'woocommerce') ?></h2>
	<?php
	$args = array(
		'post_type'	=> 'product',
		'ignore_sticky_posts'	=> 1,
		'posts_per_page' => 4,
		'orderby' => 'rand',
		'post__in' => $upsells
	);
	query_posts($args);
	woocommerce_get_template_part( 'loop', 'shop' );
	wp_reset_query();
	?>

</div>

6.) You may now see the up-sell products on an upsells tab. You may want to remove the up-sells below the description tab to avoid redundancy.

Posted 1 year ago #