Product Gallery element layout

[bartenderonduty]

Hi Themeco Team,

Is there any way to modify the layout of the Product Gallery element? We’re specifically looking to disable the zoom/hover effect and make the thumbnails larger and positioned below the main image.

Please let us know if this is possible.

Thank you!

[prakash_s]

Hello @bartenderonduty,

Thanks for writing to us.

In order to move the product gallery thumbnail at the bottom I would suggest you please add this custom CSS code to the Global CSS box.

.flex-control-nav.flex-control-thumbs {
top: auto !important;
bottom: 0 !important;
}

To disable the zoom/hover effect I would suggest you add the below code to the functions.php file of your active child theme.

function remove_image_zoom_support() {
    remove_theme_support( 'wc-product-gallery-zoom' );
}
add_action( 'wp', 'remove_image_zoom_support', 100 );

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer. If you have no idea about coding you can subscribe to One where customization questions are answered.

Thanks

[bartenderonduty]

Thank you!

[prakash_s]

You are most welcome @bartenderonduty