显示与产品图片不同的特色图片答案

【问题标题】：displaying the featured image different than the product image显示与产品图片不同的特色图片
【发布时间】：2021-04-16 07:47:39
【问题描述】：

是否可以在访问者第一次访问产品页面时更改该行为以显示真实的特色图片，并且仅在选择变体时才会显示图像而不删除预先选择的变体？

当点击列表中的产品（带有特色图片）时，产品只显示一张图片，带有描述和内容，但显示的是不同的图片，而不是特色。

我找到了，但代码已过时：Same question and answer

我的单品/product-image.php 模板：

<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>

【问题讨论】：

标签： woocommerce

【解决方案1】：

嗯，我想出了如何阻止这种行为。在主题+ WooCommerece插件代码中的代码中搜索了6个小时后，我找到了解决方案。

1.首先复制文件wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.js 如果没有该文件夹，请在您的子主题 /woocommerce/js/ 文件夹中创建一个。

2.将这个粘贴到您的主题子中以调用新文件并通过 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.从您的子主题中打开新复制的文件，并为第 45 行设置座位并注释以下行：

    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 );

将刚才编辑的整个文件复制成一些在线的js minify。
将缩小后的代码粘贴到您刚刚创建的新文件中，然后将该文件重命名为 add-to-cart-variation.min.js。
完成，解决了问题，唯一的问题可能是下一次 woocommerce 更新，如果他们对该文件执行此操作，您可能会错过重要更新。

谢谢，祝你好运

【讨论】：

【解决方案2】：

我遇到了同样的问题，并以稍微不同的方式解决了它，无需编辑核心 WooCommerce js 文件。

选择变体图像的整个 flex 滑块导航系统取决于文件 add-to-cart-variation.min.js 第 650 行中的类“flex-control-nav”，“$gallery_nav = $product.find( '.flex-control-nav' )"。

如果页面加载时没有预设类 flex-control-nav，则 WooCommerce js 无法自动选择默认的变体图像。

因此，当您的页面加载时，请确保您的缩略图滑块 div 中不存在类 flex-control-nav - 使用不同的类来设置 flexslider 的样式。我为此使用了自定义 product_image.php 模板。

设置一个 js 计时器，在页面加载后运行 300 毫秒，一旦计时器触发，使用 js 将类 flex-control-nav 添加到滑块 div 中。您现在可以在变体图像和主图像库之间进行图像同步。

【讨论】：