WooCommerce 4：移动设备中的画廊太大

时间：2020-07-06 作者：Raptor

此问题不再有效，因为代码已更改，问题已修复

我正在处理我的自定义主题，并尝试将引导网格布局融入产品页面。桌面版的产品页面看起来不错，但移动版的产品图像看起来很大。请查看此链接：

https://www.thekwinana.com/product/rose-quartz-generator/

你能建议一下吗？谢谢

以下是我使用的代码（仅显示相关零件）：

mytheme/woocommerce/content-single-product.php

<div class="col-11 col-md-5 product">
    <?php
    do_action( \'woocommerce_before_single_product_summary\' );
    ?>
</div>

mytheme/woocommerce/single-product/product-image.php

defined( \'ABSPATH\' ) || exit;

// Note: `wc_get_gallery_image_html` was added in WC 3.3.2 and did not exist prior. This check protects against theme overrides being used on older versions of WC.
if ( ! function_exists( \'wc_get_gallery_image_html\' ) ) {
    return;
}

global $product;

$columns           = apply_filters( \'woocommerce_product_thumbnails_columns\', 4 );
$post_thumbnail_id = $product->get_image_id();
$wrapper_classes   = apply_filters(
    \'woocommerce_single_product_image_gallery_classes\',
    array(
        \'woocommerce-product-gallery\',
        \'woocommerce-product-gallery--\' . ( $product->get_image_id() ? \'with-images\' : \'without-images\' ),
        \'woocommerce-product-gallery--columns-\' . absint( $columns ),
        \'images\',
    )
);
?>
<!-- product-image.php -->
<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;">
    <figure class="woocommerce-product-gallery__wrapper">
        <?php
        if ( $product->get_image_id() ) {
            //$html = wc_get_gallery_image_html( $post_thumbnail_id, false );
            
            $gallery_thumbnail = wc_get_image_size( \'gallery_thumbnail\' );
            $thumbnail_size    = apply_filters( \'woocommerce_gallery_thumbnail_size\', array( $gallery_thumbnail[\'width\'], $gallery_thumbnail[\'height\'] ) );
            $thumbnail_src     = wp_get_attachment_image_src(  $post_thumbnail_id, $thumbnail_size );
            $full_src = wp_get_attachment_image_src( $post_thumbnail_id, \'full\');
            $html  = \'<div data-thumb="\' . esc_url( $thumbnail_src[0] ) . \'" data-thumb-alt="" class="woocommerce-product-gallery__image">\';
            $html .= \'<a href="\' . esc_url( $full_src[0] ) . \'"><img src="\' . $full_src[0] . \'" alt="" class="img-fluid" /></a>\';
            $html .= \'</div>\';
        } 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>
正如您从product-image.php, 原件wc_get_gallery_image_html() 函数被绕过，代码与WooCommerce插件中的代码几乎相同。唯一的区别是在HTML结构中添加自定义CSS类，以解决桌面版本中的大小问题。

对于我的style.css 在主题中：

.single-product div.product {
    position: relative;
    overflow: hidden;
}
.single-product div.product::before, .single-product div.product::after {
    content: \'\';
    display: table;
}
.single-product div.product::after {
    clear: both; 
}
.single-product div.product .images,
.single-product div.product .summary,
.single-product div.product .woocommerce-product-gallery {
    margin-bottom: 2.617924em;
    margin-top: 0; 
}
.single-product div.product .woocommerce-product-gallery {
    position: relative;
}
.single-product div.product .woocommerce-product-gallery .zoomImg {
    background-color: #fff;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper .flex-active-slide > a > img {
    width: 100%;
    height: auto;
}
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
    position: absolute;
    top: 0.875em;
    right: 0.875em;
    display: block;
    height: 2em;
    width: 2em;
    border-radius: 3px;
    z-index: 99;
    text-align: center;
}
.single-product div.product .woocommerce-product-gallery img {
    margin: 0;
}
.single-product div.product .woocommerce-product-gallery .flex-viewport {
    margin-bottom: 1.618em;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
    margin: 0;
    padding: 0;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs::before, .single-product div.product .woocommerce-product-gallery .flex-control-thumbs::after {
    content: \'\';
    display: table;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs::after {
    clear: both;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li {
    list-style: none;
    margin-bottom: 1.618em;
    cursor: pointer;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img {
    opacity: 0.5;
    -webkit-transition: all, ease, 0.2s;
    transition: all, ease, 0.2s;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
    opacity: 1;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li:hover img {
    opacity: 1;
}
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li {
    width: 42.8571428571%;
    float: left;
    margin-right: 14.2857142857%;
}
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li:nth-child(2n) {
    margin-right: 0;
}
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li:nth-child(2n+1) {
    clear: both;
}
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li {
    width: 23.8095238%;
    float: left;
    margin-right: 14.2857142857%;
}
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li:nth-child(3n) {
    margin-right: 0;
}
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li:nth-child(3n+1) {
    clear: both;
}
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li {
    width: 14.2857142857%;
    float: left;
    margin-right: 13%;
}
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li img {
    height: 100px;
    width: 100px;
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n) {
    margin-right: 0;
}
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n+1) {
    clear: both;
}
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li {
    width: 8.5714285714%;
    float: left;
    margin-right: 14.2857142857%;
}
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li:nth-child(5n) {
    margin-right: 0;
}
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li:nth-child(5n+1) {
    clear: both;
}
.single-product div.product .images .woocommerce-main-image {
    margin-bottom: 1.618em;
    display: block;
}
.single-product div.product .images .thumbnails a.zoom {
    display: block;
    width: 22.05%;
    margin-right: 3.8%;
    float: left;
    margin-bottom: 1em;
}
.single-product div.product .images .thumbnails a.zoom.last {
    margin-right: 0;
}
.single-product div.product .images .thumbnails a.zoom.first {
    clear: both;
}
.single-product div.product form.cart {
    margin-bottom: 1.618em;
    padding: 1em 0;
}
.single-product div.product form.cart::before, .single-product div.product form.cart::after {
    content: \'\';
    display: table;
}
.single-product div.product form.cart::after {
    clear: both;
}
.single-product div.product form.cart .quantity {
    float: left;
    margin-right: 0.875em;
}
.single-product div.product form.cart table.woocommerce-grouped-product-list .woocommerce-grouped-product-list-item__label {
    overflow-wrap: anywhere;
    word-break: break-word;
    -ms-word-break: break-all;
}
.single-product div.product form.cart table.woocommerce-grouped-product-list .woocommerce-grouped-product-list-item__quantity {
    float: none;
    margin-right: 0;
}
.single-product div.product form.cart table.woocommerce-grouped-product-list .woocommerce-grouped-product-list-item__quantity .quantity {
    margin-right: 0;
}
.single-product div.product p.price {
    font-size: 1.41575em;
    margin: 1.41575em 0;
}
.single-product div.product table.variations {
    table-layout: fixed;
    margin: 0; 
}
.single-product div.product table.variations th,
.single-product div.product table.variations td {
    display: list-item;
    padding: 0;
    list-style: none;
    background-color: transparent;
}
.single-product div.product table.variations .value {
    margin-bottom: 1em;
}
.single-product div.product table.variations select {
    max-width: 70%;
    vertical-align: middle;
}
.single-product div.product .single_variation .price {
    margin-bottom: 1em;
    display: block;
}
.single-product div.product .variations_button {
    padding-top: 1em;
}
.single-product div.product .variations_button::before, .single-product div.product .variations_button::after {
    content: \'\';
    display: table;
}
.single-product div.product .variations_button::after {
    clear: both;
}
.single-product div.product .woocommerce-product-rating {
    margin-bottom: 1.618em;
    margin-top: -0.875em;
}
.single-product div.product .woocommerce-product-rating::before, .single-product div.product .woocommerce-product-rating::after {
    content: \'\';
    display: table;
}
.single-product div.product .woocommerce-product-rating::after {
    clear: both;
}
.single-product div.product .woocommerce-product-rating a {
    font-weight: 600;
    text-decoration: underline;
}
.single-product div.product .woocommerce-product-rating a:hover {
    text-decoration: none;
}
.single-product div.product .woocommerce-product-rating .star-rating {
    float: left;
    margin-right: 0.6180469716em;
}
.single-product div.product .product_meta {
    font-size: 0.875em;
    padding-top: 1em;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.single-product div.product .product_meta .sku_wrapper,
.single-product div.product .product_meta .posted_in,
.single-product div.product .product_meta .tagged_as {
    display: block; 
}
.single-product div.product .product_meta .sku_wrapper:last-child,
.single-product div.product .product_meta .posted_in:last-child,
.single-product div.product .product_meta .tagged_as:last-child {
    border-bottom: 0; 
}
.single-product div.product .product_meta a {
    font-weight: 600;
    text-decoration: underline;
}
.single-product div.product .product_meta a:hover {
    text-decoration: none;
}
.single-product div.product .edit-link {
    font-size: 0.875em;
    margin-top: 1em;
}
    
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
    text-indent: -999px;
    overflow: hidden; 
    color: #CCC;
    text-decoration: none;
}
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger::before {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    font-family: \'Font Awesome 5 Free\';
    font-weight: 900;
    line-height: inherit;
    vertical-align: baseline;
    content: "\\f00e";
    display: block;
    line-height: 2;
    text-indent: 0;
}
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger img {
    display: none !important;
}

1 个回复
最合适的回答,由SO网友:bjornredemption 整理而成

看起来您只需要限制手机的高度：

@media (max-width:480px) {
   .carousel-item img {
      max-height: 200px; 
      object-fit: contain;
   }
}

标签： woocommerce-offtopic   小码农  

相关推荐