Woocommerce产品缩略图位置

Question

任何人都可以告诉我如何将产品缩略图移动到主图像上方而不是产品页面下方。我已经看到了几个解决方案，将它们移到一边，但没有一个解决方案在主图像上方，我认为这样更容易。

我自己尝试了几件事，但无论我做了什么似乎影响了画廊导航。在下面的示例中，我将产品缩略图操作移到主图像上方。

任何解决方案将不胜感激。

<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?> test" style="opacity: 0; transition: opacity .25s ease-in-out;">
<?php do_action( 'woocommerce_product_thumbnails' );
<figure class="woocommerce-product-gallery__wrapper">
    if ( has_post_thumbnail() ) {
        $html  = 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() ), esc_html__( 'Awaiting product image', 'woocommerce' ) );
        $html .= '</div>';
    }

    echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', $html, $post_thumbnail_id );
    ?>
</figure>

Answer 1

因此，我可以看到这是可能的唯一方法是编辑模板文件product-image.php，将其复制到您的子主题目录\ theme-child \ woocommerce \ single-product \ product-image.php

您可以将灯箱控件容器设置为您可以在product-image.php文件中创建的自定义div。使用id flex_slider_top_thumbs添加如下所示的自定义div。

<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?>" style="opacity: 0; transition: opacity .25s ease-in-out;">
    <div id="flex_slider_top_thumbs"></div>
    <figure class="woocommerce-product-gallery__wrapper">
        <?php
        if ( has_post_thumbnail() ) {
            $html  = 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() ), esc_html__( 'Awaiting product image', 'woocommerce' ) );
            $html .= '</div>';
        }

        echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', $html, $post_thumbnail_id );

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

然后，您需要通过以下代码设置新的自定义控件容器div，以在图像上方设置新的轮播控件。

add_filter('woocommerce_single_product_carousel_options', 'add_woocommerce_single_product_carousel_options');

function add_woocommerce_single_product_carousel_options($options) {
    $options['controlsContainer'] = '#flex_slider_top_thumbs';
    return $options;
}

我唯一没有解决的问题是将灯箱放大玻璃扳机移出缩略图容器。它的位置由文件single-product.js决定，但我不确定我是否可以使用任何可用的选项重新定位它。可能需要使用一些自定义jQuery来移动链接，以便它使用类flex-viewport嵌套在div中。下面的代码来自single-product.js文件，并向您展示它们如何输出PhotoSwipe灯箱链接触发器。

ProductGallery.prototype.initPhotoswipe = function() {
        if ( this.zoom_enabled && this.$images.length > 0 ) {
            this.$target.prepend( '<a href="#" class="woocommerce-product-gallery__trigger">ðŸ”</a>' );
            this.$target.on( 'click', '.woocommerce-product-gallery__trigger', this.openPhotoswipe );
        }
        this.$target.on( 'click', '.woocommerce-product-gallery__image a', this.openPhotoswipe );
    };