How to Customize the Woocommerce Product Thumbnail Position
As an e-commerce store owner, the layout and presentation of your product pages is crucial for driving conversions and creating an engaging shopping experience for your customers. One important element to consider is the positioning of your product thumbnails.
By default, Woocommerce displays the product thumbnails below the main product image. However, you may want to experiment with different layouts to see what works best for your specific store and product offerings. In this article, we'll explore how you can customize the thumbnail position on your Woocommerce product pages.
Step 1: Copy the product-image.php Template File
The first step is to copy the product-image.php
template file from the Woocommerce plugin directory into your child theme's woocommerce
directory. This will allow you to modify the template without affecting the core plugin files.
To do this, navigate to your WordPress installation's /wp-content/plugins/woocommerce/templates/single-product
directory and locate the product-image.php
file. Then, create a new directory called woocommerce
in your child theme's root directory (e.g., /wp-content/themes/your-child-theme/woocommerce
), and copy the product-image.php
file into this new directory.
Step 2: Modify the product-image.php Template
Now that you have the product-image.php
file in your child theme, you can start making changes to the template. The goal is to create a custom container for the product thumbnails and then use CSS and JavaScript to position them above the main product image.
Inside the product-image.php
file, locate the following code block:
<figure class="woocommerce-product-gallery__wrapper">
<?php
if ( has_post_thumbnail() ) {
$html = wc_get_gallery_image_html( $post_thumbnail_id, true );
} else {
$html = '<div class="woocommerce-product-gallery__image--placeholder">';
$html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( wc_placeholder_img_src() ), esc_html__( 'Awaiting product image', 'woocommerce' ) );
$html .= '</div>';
}
echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', $html, $post_thumbnail_id );
do_action( 'woocommerce_product_thumbnails' );
?>
</figure>
After this block, add the following code to create a new container for the product thumbnails:
<div id="flex_slider_top_thumbs"></div>
This new div
element will serve as the container for your product thumbnails.
Step 3: Set the Lightbox Control Container
Next, you need to tell Woocommerce to use the new flex_slider_top_thumbs
container for the lightbox control. You can do this by adding the following code at the end of your child theme's functions.php
file:
add_filter('woocommerce_single_product_carousel_options', 'add_woocommerce_single_product_carousel_options');
function add_woocommerce_single_product_carousel_options($options) {
$options['controlsContainer'] = '#flex_slider_top_thumbs';
return $options;
}
This code adds a new filter to the woocommerce_single_product_carousel_options
filter, which allows you to modify the options used by the Woocommerce product gallery carousel. In this case, we're setting the controlsContainer
option to the #flex_slider_top_thumbs
selector, which will place the lightbox control in the new container we created earlier.
Step 4: Style the Thumbnail Container
Now that you've set up the new container for the product thumbnails, you can use CSS to position it above the main product image. Add the following CSS to your child theme's style.css
file:
.woocommerce div.product div.images .flex-control-thumbs {
order: -1;
margin-bottom: 1.5rem;
}
.woocommerce div.product div.images .flex-control-thumbs li {
width: 80px;
margin-right: 1rem;
}
This CSS code first sets the order
property of the .flex-control-thumbs
element to -1
, which will move the thumbnail container above the main product image. It also sets the width of each thumbnail and adds some spacing between them.
You can further customize the styling of the thumbnail container and individual thumbnails to match the design of your store.
Step 5: Adjust the Lightbox Trigger Position (Optional)
By default, the Woocommerce product gallery includes a lightbox trigger (the magnifying glass icon) that's positioned within the thumbnail container. If you want to move this trigger to a different location, you'll need to use some custom JavaScript.
In the single-product.js
file (located in the Woocommerce plugin directory), you'll find the following code:
ProductGallery.prototype.initPhotoswipe = function() {
if ( this.zoom_enabled && this.$images.length > 0 ) {
this.$target.prepend( '<a href="#" class="woocommerce-product-gallery__trigger">????</a>' );
this.$target.on( 'click', '.woocommerce-product-gallery__trigger', this.openPhotoswipe );
}
this.$target.on( 'click', '.woocommerce-product-gallery__image a', this.openPhotoswipe );
};
This code adds the lightbox trigger to the .woocommerce-product-gallery__wrapper
element. To move the trigger outside of the thumbnail container, you can create a custom JavaScript function and call it after the Woocommerce script has loaded.
Add the following code to your child theme's functions.php
file:
add_action('wp_enqueue_scripts', 'my_woocommerce_scripts');
function my_woocommerce_scripts() {
wp_add_inline_script('wc-single-product', 'window.onload = function() { movePhotoswipeTrigger(); }');
}
function movePhotoswipeTrigger() {
?>
<script>
(function($) {
$(document).ready(function() {
$('.woocommerce-product-gallery__trigger').appendTo('.flex-viewport');
});
})(jQuery);
</script>
<?php
}
This code first adds an inline script that calls the movePhotoswipeTrigger()
function when the page has finished loading. The movePhotoswipeTrigger()
function then uses jQuery to select the .woocommerce-product-gallery__trigger
element and move it to the .flex-viewport
element, which contains the main product image.
By following these steps, you should be able to successfully customize the position of the product thumbnails and the lightbox trigger on your Woocommerce product pages.
Remember, the specific CSS and JavaScript code you use may need to be adjusted based on your theme and plugin configurations. It's always a good idea to thoroughly test your changes to ensure they're working as expected.
If you're looking for a more comprehensive solution to optimize your product pages, consider using a tool like Flowpoint.ai, which can help you identify and fix technical issues, improve user experience, and boost your conversion rates
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.