Woocommerce product variation image not showing

Rune
42 Posts
Rune posted this 22 June 2017

Hi

When I set a specific image to a variation (in this case a color variation) the variation image are not showing in the place of the product image in "product detail"-overview in the shop.

  • what to do?

Hi When I set a specific image to a variation (in this case a color variation) the variation image are not showing in the place of the product image in "product detail"-overview in the shop. - what to do?

Last edited 22 June 2017 by Rune

Vote to pay developers attention to this features or issue.
13 Comments
Order By: Standard | Newest
Support Team
Support Team posted this 22 June 2017

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

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
Rune
42 Posts
Rune posted this 22 June 2017

Yes. It work fine with Twenty Seventeen.

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

Yes. It work fine with Twenty Seventeen. Take a look https://bymp.dk/produkt/testprodukt/
Support Team
Support Team posted this 23 June 2017

Hi,

This issue should be fixed in the future Themler updates.

Thank you,
Olivia

Hi, This issue should be fixed in the future Themler updates. Thank you, Olivia

Last edited 23 June 2017 by Support Team

Rune
42 Posts
Rune posted this 23 June 2017

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

Sounds great! Can you give me a hint for a fix? My deadline are probably sooner than your update.
Support Team
Support Team posted this 23 June 2017

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

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
Rune
42 Posts
Rune posted this 23 June 2017

It worked... And screw up the hole layout

It worked... And screw up the hole layout
Support Team
Support Team posted this 23 June 2017

Hi,

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

Thank you,
Olivia

Hi, Could you please provide us with the screenshot that demonstrates the new issue? Thank you, Olivia
Rune
42 Posts
Is Solution
Rune posted this 23 June 2017

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

Ah. Found the problem. It works fine now! :)
Support Team
Support Team posted this 23 June 2017

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

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
Sem
19 Posts
Sem posted this 28 July 2017

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

Hello I tried this solution for me. It shows 2 main images on the product page. Can you help me please with this
Support Team
Support Team posted this 30 July 2017

Hi Sem,

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

Thank you,
Olivia

Hi Sem, Could you please create a new private topic and attach the problem theme with code modifications. Thank you, Olivia
Pbannerman13
2 Posts
Pbannerman13 posted this 2 weeks ago

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

I'm having the exact same problem, but the code above didn't work for me.
Support Team
Support Team posted this 2 weeks ago

Pbannerman13.

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

Thank you,
Olivia

Pbannerman13. I've answered you in your private topic about this issue. Thank you, Olivia
You must log in or register to leave comments