Woocommerce product variation image not showing

Hi,

Does it work fine with the default WP theme? If yes, please provide a link to the page where we could see the issue.

Sincerely,
Hella

Yes. It work fine with Twenty Seventeen.

Take a look https://bymp.dk/produkt/testprodukt/

Hi,

This issue should be fixed in the future Themler updates.

Thank you,
Olivia

Last edited 23 June 2017 by Support Team

Sounds great!
Can you give me a hint for a fix? My deadline are probably sooner than your update.

Hi,

Please try the following suggestion:

• open includes\product_overview_1.php file
• find the following code:

<div class=" bd-productimage-6 ">
<div class="zoom-container images">
<?php if ( has_post_thumbnail() ) : ?>
<a itemprop="image" href="<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>" class="zoom" data-rel="prettyPhoto[product-gallery]" rel="thumbnails" title="<?php echo get_the_title( get_post_thumbnail_id() ); ?>">
<?php
global $post;
remove_action('begin_fetch_post_thumbnail_html', '_wp_post_thumbnail_class_filter_add'); // disable 'wp-post-image' class
//
echo get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ), array('class' => ' bd-imagestyles') );
add_action('begin_fetch_post_thumbnail_html', '_wp_post_thumbnail_class_filter_add');
?>
</a>
<?php else : ?>
<img class=' bd-imagestyles' src="<?php echo woocommerce_placeholder_img_src(); ?>" alt="Placeholder" />
<?php endif; ?>
</div>
</div>

• add the following line before the code above:

<?php if (version_compare(WC_VERSION, '3.0.0', '<')) { ?>

• and add this code after the code above:

<?php } else {

global $post;
$post_thumbnail_id = get_post_thumbnail_id($post->ID);
$full_size_image = wp_get_attachment_image_src($post_thumbnail_id, 'full');
$thumbnail_post = get_post($post_thumbnail_id);
$image_title = $thumbnail_post->post_content;
?>
<div class=" bd-productimage-6 images woocommerce-product-gallery__wrapper">
<?php
$attributes = array(
'title' => $image_title,
'data-src' => $full_size_image[0],
'data-large_image' => $full_size_image[0],
'data-large_image_width' => $full_size_image[1],
'data-large_image_height' => $full_size_image[2],
'class' => ' bd-imagestyles',
);

if (has_post_thumbnail()) {
$html = '<div data-thumb="' . get_the_post_thumbnail_url($post->ID, 'shop_thumbnail') . '" class="woocommerce-product-gallery__image zoom-container"><a href="' . esc_url($full_size_image[0]) . '">';
$html .= get_the_post_thumbnail($post->ID, 'shop_single', $attributes);
$html .= '</a></div>';
} else {
$html = '<div class="woocommerce-product-gallery__image--placeholder">';
$html .= sprintf('<img src="%s" alt="%s" class=" bd-imagestyles 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, get_post_thumbnail_id($post->ID));
?>
</div>

<?php } ?>

In other works you need to wrap the original Product image code into the provided cycle.

Please let us know the result.

Thank you,
Olivia

It worked... And screw up the hole layout

Hi,

Could you please provide us with the screenshot that demonstrates the new issue?

Thank you,
Olivia

Ah. Found the problem. It works fine now! :)

Great!
Please let us know if you have any other questions/issues.

Also, pleaes note that each saving theme in Themler may erase custom changes. I suggest that you make the copy of the edited file and keep it somewhere.

Thank you,
Olivia

Hello I tried this solution for me. It shows 2 main images on the product page. Can you help me please with this

Hi Sem,

Could you please create a new private topic and attach the problem theme with code modifications.

Thank you,
Olivia

I'm having the exact same problem, but the code above didn't work for me.

Pbannerman13.

I've answered you in your private topic about this issue.

Thank you,
Olivia

Hello, was this ever fixed because a client just emailed me about it yesterday and I couldn't workout what had broken it. I have tried the website with the Storefront theme by Woothemes and everything works correctly in that.

Best regards,
Angela

Hmm, it seems not as I added the above code and it now works, but what happens when the next Themler update or theme update writes over it? As a known and quite serious bug (for an ecommerce theme) this needs fixing asap.

Hi,

The fix will be included into the next Themler update.

Thank you,
Olivia