Modify WooCommerce Product Gallery Layout for Better Display

Code

// Function to customize the WooCommerce product gallery layout
function wp_dudecom_customize_product_gallery_layout() {
    // Check if WooCommerce is active
    if ( class_exists( 'WooCommerce' ) ) {
        // Remove default WooCommerce product gallery hooks
        remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );

        // Add custom product gallery layout
        add_action( 'woocommerce_before_single_product_summary', 'wp_dudecom_custom_product_gallery', 20 );
    }
}
add_action( 'wp', 'wp_dudecom_customize_product_gallery_layout' );

// Custom function to display the product gallery
function wp_dudecom_custom_product_gallery() {
    global $product;

    // Ensure the product has a gallery
    if ( ! $product || ! $product->get_gallery_image_ids() ) {
        return;
    }

    // Get gallery image IDs
    $gallery_image_ids = $product->get_gallery_image_ids();

    // Start output buffer
    ob_start();

    // Begin gallery HTML
    echo '<div class="wp-dudecom-product-gallery">';

    // Loop through each image ID
    foreach ( $gallery_image_ids as $image_id ) {
        // Get image URL
        $image_url = wp_get_attachment_image_url( $image_id, 'full' );

        // Output image HTML
        echo '<div class="wp-dudecom-gallery-item">';
        echo '<img src="' . esc_url( $image_url ) . '" alt="' . esc_attr( get_post_meta( $image_id, '_wp_attachment_image_alt', true ) ) . '">';
        echo '</div>';
    }

    // End gallery HTML
    echo '</div>';

    // Output buffer content
    echo ob_get_clean();
}

// Enqueue custom styles for the product gallery
function wp_dudecom_enqueue_gallery_styles() {
    if ( is_product() ) {
        wp_enqueue_style( 'wp-dudecom-gallery-styles', get_stylesheet_directory_uri() . '/css/wp-dudecom-gallery-styles.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'wp_dudecom_enqueue_gallery_styles' );

// Add custom CSS for the product gallery
function wp_dudecom_add_gallery_styles() {
    ?>
    <style>
        .wp-dudecom-product-gallery {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .wp-dudecom-gallery-item {
            flex: 1 1 calc(33.333% - 10px);
            box-sizing: border-box;
        }
        .wp-dudecom-gallery-item img {
            width: 100%;
            height: auto;
            display: block;
        }
    </style>
    <?php
}
add_action( 'wp_head', 'wp_dudecom_add_gallery_styles' );