how to move Product Gallery images to it’s own WooCommerce Tab

Today I faced a problem. I’ve been working on optimising the sales pages for the Themes here at Epic Themes. On a self-critical review of the sales page for the Plugin Hunt Theme the sales copy is huge, before this review it was 1029 words long and had 24 images.

What’s the problem with this? I hear you ask. Attention Span. Sure, I’ve gone into detail about all of the features of the theme. However, people landing on the page might get confused with all the text. So I’ve taken a step back and decided to make better use of the Tabs.

I also found out that, when I moved the 24 screenshots to the ‘product gallery‘ that it made the page layout go all .. yucky.. check out the image below..

Adding screenshots really started to make the layout not work…  so I decided I wanted to move the Product Gallery to it’s own ‘tab’

WooCommerce Tabs

By default, WooCommerce gives you the following tabs:-

• Description
• Reviews

Which is great, for physical products but for digital products, taking a look at what wordpress.org has and what would be beneficial to customers.. the following tabs would be useful

• Description
• Screenshots (i.e Product Gallery)
• Features
• Reviews

That way, the following improvements can be made to the sales copy too:-

• The Description can highlight the benefits of the Theme and why you’d want to purchase it
• The Screenshots give you a visual tour
• Features list out the theme’s main features
• And finally Reviews you can see the Social Proof from people who have purchased the theme

Adding a ‘Screenshots’ tab

So, I decided to ‘do away’ with the Product Gallery completely and use the WordPress ‘Gallery’ feature plus a bit of crafty ‘hacking’ (I’ve got all my crafty WooCommerce hacks in my own ‘Crafty Hacks’ WordPress Plugin (yep, I develop WordPress Plugins as well as Themes).

So here’s how I did it:

Step One: I created a normal WordPress Media Gallery

Step Two: I switched from ‘Visual’ to ‘Text’ mode and got the IDs in the gallery shortcode (e.g.)

ids=”17099,17098,17097,17096,17095,17094,17093,17092,17091,17090,17089,17088,17087,17086,17085,17084,17083,17082,17081,17080,17079,17078,17077,17076,17075″

Step Three: I then added this to a custom field in the WooCommerce Product with these IDs and then output it into my custom ‘tabs’ code:-

add_filter( 'woocommerce_product_tabs', 'epic_woo_extra_tabs' );
function epic_woo_extra_tabs( $tabs ) {
	global $post;
		$tabs['screenshots'] = array(
			'title'    => __( 'Screenshots', 'woocommerce' ),
			'priority' => 16,
			'callback' => 'epic_woo_screenshots_tab_content'
		);		
	return $tabs;	 
}

function epic_woo_screenshots_tab_content() {
		global $post;
		$screenshots = get_post_meta($post->ID, 'custom_field_name_here', true);
		echo do_shortcode("[gallery ids = '". $screenshots ."']");
}

Thats all there is to it with my super quick way to hack in a gallery of screenshots in another tab…

Why I did not want the Product Gallery

I chose this hack of adding a standard Media Gallery instead of the ‘Product Gallery’ because I like how the standard gallery is styled and how you can add captions. WooCommerce styles the product gallery different and I like the consistent look of the screenshots in the Media Gallery.

Sure, I lose the ability to have a ‘gallery lightbox’ but – I’ve got a plugin for that (Social Gallery for WordPress) which I’ll be activating soon. Why would I want to do this?

• The ‘Gallery’ images can now be liked and shared a lot easier (increasing traffic to the sales page)
• I can reply to comments on the gallery images too.

It’s a really great way to have that extra bit of engagement on your WooCommerce products (and another step along the way of optimising these pages).

How it looks now?

Great, do you remember how crappy it looked above? After adding tabs and tweaking it looks so much nicer

Want to follow along with more posts like this and my Epic Journey in general, sign up to the email list using the form below.