Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Woocommerce – displaying the featured image different than the product image

Is it possible to change that behavior on the first time the visitor visit the product page to show the real featured image and only on select variant it will show the image without removing pre-selected variant?

When clicking the product in the listing (with a featured image) the product displays just an image, with the description and stuff, but a different image, not the featured.

I found this but the code is outdated: Same question and answer

My single/product-image.php template:

<div class="product-images relative mb-half has-hover <?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?>">

    <?php do_action('flatsome_sale_flash'); ?>

    <div class="image-tools absolute top show-on-hover right z-3">
        <?php do_action('flatsome_product_image_tools_top'); ?>
    </div>

    <figure class="woocommerce-product-gallery__wrapper <?php echo implode(' ', $slider_classes); ?>"
            data-flickity-options='{
                "cellAlign": "center",
                "wrapAround": true,
                "autoPlay": false,
                "prevNextButtons":true,
                "adaptiveHeight": true,
                "imagesLoaded": true,
                "lazyLoad": 1,
                "dragThreshold" : 15,
                "pageDots": false,
                "rightToLeft": <?php echo $rtl; ?>
       }'>
        <?php
        if ( $product->get_image_id() ) {
            $html  = flatsome_wc_get_gallery_image_html( $post_thumbnail_id, true );
        } else {
            $html  = '<div class="woocommerce-product-gallery__image--placeholder">';
            $html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( wc_placeholder_img_src( 'woocommerce_single' ) ), esc_html__( 'Awaiting product image', 'woocommerce' ) );
            $html .= '</div>';
        }

        echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', $html, $post_thumbnail_id ); // phpcs:disable WordPress.XSS.EscapeOutput.OutputNotEscaped

        do_action( 'woocommerce_product_thumbnails' );
        ?>
    </figure>

    <div class="image-tools absolute bottom left z-3">
        <?php do_action('flatsome_product_image_tools_bottom'); ?>
    </div>
</div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Well, I 'v figured out how to stop this behavior. after 6 hours of search in the code in theme + WooCommerece plugin code, I found the solution.

    1.First copy the file wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.js To your child theme /woocommerce/js/ folder if not have that folder create one.

    2.Paste this at your theme child to call the new file and deregister the default file by woo:

    add_action('wp_enqueue_scripts', 'override_woo_frontend_scripts');
function override_woo_frontend_scripts() {
    wp_deregister_script('wc-add-to-cart-variation');
    wp_enqueue_script('wc-add-to-cart-variation', get_stylesheet_directory_uri() . '/woocommerce/js/add-to-cart-variation.min.js', array('jquery', 'wp-util', 'jquery-blockui'), null, true);
}

    3.Open the new copied file from your child theme and seatch for line 45 and Comment the following line:

        setTimeout( function() {
        //$form.trigger( 'check_variations' ); Comment this line to disable auto slide on first page load to the selected variation image
        $form.trigger( 'wc_variation_form' );
        self.loading = false;
    }, 100 );

    1. Copy the entire file you have just edited into some online js minify.

    2. Paste the minified code inside the new file you have just created and rename the file to add-to-cart-variation.min.js.

    3. Done, fixed the problem, the only issue with this can be on the next woocommerce updates if would they do to that file you may miss important updates.

    Thanks, good luck


  2. 0

    I had the same problem and solved it a slight different way, without needing to edit core WooCommerce js files.

    The entire flex slider nav system of selecting the variation image depends on the class ‘flex-control-nav’ in file add-to-cart-variation.min.js line 650, "$gallery_nav = $product.find( ‘.flex-control-nav’ )".

    If the class flex-control-nav is not preset on page load, then the WooCommerce js cannot automatically select the default variation image.

    So, when your page loads, make sure that the class flex-control-nav is not present in your thumbnail slider div – use a different class for styling the flexslider. I used a custom product_image.php template for this.

    Set a js timer for 300 ms to run once the page loads, and once the timer fires, use js to add the class flex-control-nav into the slider div. You now have image sync between your variation images and main image gallery.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search