Home › Forums › WoodMart support forum › variation selection change does not update the main product picture

variation selection change does not update the main product picture

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • September 21, 2019 at 3:13 pm #145807

    anatta
    Participant

    Hi, this is after installing this WebP plugins that convert jpeg to webp format and also alter the HTML tg to <pictures> tag

    https://wordpress.org/plugins/webp-express/

    Is there a way to fix the javascript/html part of the theme to make it compatible with that plugin ?

    see screenshot and the private link

    Thanks

    September 21, 2019 at 4:01 pm #145812

    anatta
    Participant

    attachment wasn’t successful.

    Attachments:
    You must be logged in to view attached files.
    September 21, 2019 at 6:07 pm #145835

    Artem Temos
    Keymaster

    Hello,

    Sorry, but there is no quick fix to this issue since our theme requires this specific HTML structure and if something changes it, the function stops working.

    Kind Regards

    September 21, 2019 at 6:27 pm #145840

    anatta
    Participant

    Hi, I found someone who has the similar issue https://xtemos.com/forums/topic/needed-help-to-support-webp-image/

    So I try to fix the undefined data issue with this, my initial post wasn’t as clear, basically the img tag is now being wrapped with picture tag, so every css reference of > img will fail, so I have to replace with > picture > img

    On file wp-content/themes/woodmart/js/functions.js I have corrected to

    function initThumbnailsMarkup() {
                        var markup = '';
                        $mainGallery.find('.woocommerce-product-gallery__image').each(function () {
                                var image = $(this).data('thumb'),
                                        alt = $(this).find('a > picture > img').attr('alt'),
                                        title = $(this).find('a > picture > img').attr('title');
                                markup += '<div class="product-image-thumbnail"><img alt="' + alt + '" title="' + title + '" src="' + image + '" /></div>';
                        });

    But now the variation image does not get shown still, could you help me point out where is the event that update the product image on variation image change ? I can try to fix this, I am also a developer.

    Thanks

    September 22, 2019 at 6:08 am #145869

    anatta
    Participant

    To anyone who has this issue, here is a temporary quick fix. Note that the image displayed is using jpeg rather than webp for this one product display image. But it’s just one image, I don’t have time to dig this further.

    Put this code into the product/post page, I am using this plugin, pick the post tab https://wordpress.org/plugins/header-footer/

    Then insert this code

    <script>
jQuery( document ).ready(function() {
	jQuery('.product-image-wrap source').addClass('wp-post-image wp-post-image');
}); 
</script>
    September 22, 2019 at 7:34 am #145882

    Artem Temos
    Keymaster

    Hi,

    We are glad that you sorted it out. We will consider this for our future updates but can’t guarantee that it will be implemented soon.

    Kind Regards

    September 23, 2019 at 6:25 am #146033

    anatta
    Participant

    Hi, that will be nice, if you can make the theme support Webp Express, it will be a huge deal maker. Now I see my website image file size is a lot less with the same or unnoticeable quality.

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)