WordPress Tricks

Move woocommerce product thumbnail to other place in content section using shortocde

Generally Woocommerce product thumbnail images shows below the main image. But, if you want to show the woocommerce product thumbnail in any places (using shortcode) in the product content or details section then this post will help you. Here are the codes:

Code 1 : This will go in Appearance > Customize >Additional CSS

.bbloomer-thumbs .woocommerce-product-gallery__image {
    width: 32.5%;
    float: left;
    margin-right: 1%;
.bbloomer-thumbs {
    overflow: hidden;
    margin-top: 20px;
.bbloomer-thumbs * {
    border-radius: 0px !important;
    box-shadow: none;
.bbloomer-thumbs .woocommerce-product-gallery__image:nth-child(3n) {
    margin-right: 0px !important;

Code 2 :These piece of code will go in your theme’s function.php

remove_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 );
add_shortcode('thumbg', 'opc');
function opc( $atts) {
    $path = WooCommerce::plugin_path();
    include($path . '/templates/single-product/product-thumbnails.php');
	$output='<div class="bbloomer-thumbs">';
    $output .= ob_get_contents();
	$output .='</div>';
  return $output;

Now Put this shortcode [thumbg] where you want to show the woocommerce product thumbnail images.

2 thoughts on “Move woocommerce product thumbnail to other place in content section using shortocde”

  1. dear OM

    i am currently workin on the theem 2017. and i just have to learn alot.  
    At the moment the page ist pretey in beta beta mode and i work out the concepts: see the page at http://www.job-starter.com

    i have finally managed to get the page into the static-mode: 

    Note: the four items that should appear in on the site  – i do not need translations: they only should appear in english language. 

    – WHAT WE DO
    – NEWS

    these items only need to appear in english language. but i have created various pages here too  Probably this was done due to a misunderstanding of the hints that i have read in the page: 

    One last hint would be to take care using vh (view height) and em with your CSS. When a page is loaded from a mobile phone 48vh would not work very well.
    if we look at the page then we see that the featured images look way tooo big. this article (thread) has helped me in earlier times: but i did not apply this to the page and the featured iimages at the moment. 
    Perhaps i need to apply this to the featured images. 

    see below. 
    i  love to hear from you 

    Set featured image is huge on home page

    question: I have a feature image on each page. But on the home page, the logo is huge and while on the rest it is fine. What is my problem?

    answer; The panel background images are set to “cover” the open area with any photo or graphic with the following default CSS code from the theme:
    .panel-image {
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    position: relative;
    Basically any featured image you apply to the page will be stretched to cover the area which is why your logo is oversized.
    If you are still wanting to use your logo in that spot, then you need to add some custom CSS to the Additional CSS tab in the customizer to target that specific post featured image. The ID of your page there is 39, so it would have to be:
    .post-39 .panel-image {
    background-size: auto;
    You can also adjust the open space as well by adding a height such as:
    height: 40vh;
    Then your custom CSS would be something like:
    @media screen and (min-width: 48em) {
    .post-39 .panel-image {height: 40vh;}
    All together your CSS would be:
    .post-39 .panel-image {
    background-size: auto;
    @media screen and (min-width: 48em) {
    .post-39 .panel-image {height: 40vh;}

    dear om – i love to hear from you


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s