Modify WooCommerce Product Gallery Layout for Better Display

How to customize woocommerce product galleryChange woocommerce product gallery layoutWoocommerce product gallery layout optionsEdit product gallery in woocommerceWoocommerce product gallery customization guideModify product gallery columns in woocommerceWoocommerce product gallery layout tutorialAdjust woocommerce product gallery settingsWoocommerce product gallery design tipsCustomize product gallery appearance in woocommerce

Explanation

Want to give your WooCommerce product gallery a fresh look? Here's a simple way to customize it:

Check WooCommerce: First, make sure WooCommerce is active. This code won't run without it.
Remove Default Gallery: The default gallery display is removed to make way for your custom layout.
Add Custom Gallery: A new gallery layout is added. It loops through your product images and displays them in a grid format.
Image Display: Each image is fetched and displayed with its URL and alt text for accessibility.
Custom Styles: Custom CSS is added to style the gallery. Images are arranged in a flexible grid with a gap between them.
Responsive Design: The gallery items are set to take up one-third of the row, adjusting automatically to different screen sizes.

To make these changes visible, ensure your custom CSS file is loaded on product pages. This setup gives you a neat, responsive gallery that enhances your product 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' );

Instructions

File Location: Add the following code to your theme's functions.php file or a custom plugin file.

Prerequisites: Ensure that the WooCommerce plugin is installed and activated on your WordPress site.

Implementation Steps:

Access Your WordPress Dashboard: Log in to your WordPress admin panel.
Navigate to Theme Editor: Go to Appearance > Theme Editor. If you prefer using a custom plugin, navigate to Plugins > Editor and select your custom plugin.
Open functions.php: In the Theme Editor, find and open the functions.php file from the list on the right. If using a plugin, open the main plugin file.
Copy and Paste Code: Copy the provided code and paste it at the end of the functions.php file or your plugin file.
Save Changes: Click the Update File button to save your changes.
Create Custom CSS File: If you haven't already, create a CSS file named wp-dudecom-gallery-styles.css in your theme's css directory. Add any additional styles you want for your gallery.
Verify Changes: Visit a product page on your site to ensure the new gallery layout is displayed correctly.

If you encounter any issues or need further customization, consider reaching out to wp-dude.com for expert assistance with your WordPress projects.