Próbuję naprawić tę obrzydliwą galerię obrazów, jednak do tej pory edytowałem kod CSS, jednak psuje się to w różnych rozmiarach widoku. Następnie próbowałem przeprojektować sposób wypełniania głównego obrazu i galerii na stronie, tworząc motyw potomny, amedeo-child\woocommerce\single-product\product-image.php, ale obawiam się, że bezskutecznie.

To jest motyw Amadeo, Elementor (bezpłatny), domyślna strona pojedynczego produktu Woocommerce, a obrazy galerii były domyślnie przepełnione.

To jest moja podstawowa próba poprawki CSS, jednak jeśli jest więcej niż, powiedzmy, 7 obrazów galerii, ponownie się przepełnia …

 .eltdf-woo-single-page .eltdf-single-product-content {
    min-height: 700px;
}

.single.single-product .woocommerce-product-gallery__wrapper {
    height: 65vh
}

@media screen and (max-width: 1201px) {
 .single.single-product .woocommerce-product-gallery__wrapper {
        min-height: auto; 
    }
}

@media only screen and (max-width: 1024px){
.eltdf-woo-single-page .eltdf-single-product-content .eltdf-single-product-summary, .eltdf-woo-single-page .eltdf-single-product-content .images {
    margin-bottom: 300px;
}
}

@media only screen and (max-width: 768px){
.eltdf-woo-single-page .eltdf-single-product-content .eltdf-single-product-summary, .eltdf-woo-single-page .eltdf-single-product-content .images {
    margin-bottom: 20px;
}
} 

Oto kod php

defined('ABSPATH') || exit;

if (!function_exists('wc_get_gallery_image_html')) {
    return;
}

global $product;

$columns           = apply_filters('woocommerce_product_thumbnails_columns', 3); // Change to the number of columns you want
$post_thumbnail_id = $product->get_image_id();
$wrapper_classes   = apply_filters(
    'woocommerce_single_product_image_gallery_classes',
    array(
        'woocommerce-product-gallery',
        'woocommerce-product-gallery--' . ($post_thumbnail_id ? 'with-images' : 'without-images'),
        'woocommerce-product-gallery--columns-' . absint($columns),
        'images',
    )
);
?>
<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 class="woocommerce-product-gallery__wrapper row">


        <div class="main-image-div col-lg-8  order-lg-2">
            <?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' );
            ?>
        </div>


        <div class="product-gallery-grid col-lg-4 order-lg-1">
            <?php
            $attachment_ids = $product->get_gallery_image_ids();

            if ($attachment_ids) {
                foreach ($attachment_ids as $attachment_id) {
                    echo '<div class="gallery-item">';
                    echo wc_get_gallery_image_html($attachment_id);
                    echo '</div>';
                }
            }
            ?>
        </div>

    </div>
</div>