Modyfikacja układu galerii produktów WooCommerce w celu poprawy wyświetlania

How to customize product gallery in woocommerceChange product gallery layout in woocommerceProduct gallery layout options in woocommerceEdit product gallery in woocommerceGuide to customizing product gallery in woocommerceModify product gallery columns in woocommerceTutorial on product gallery layout in woocommerceCustomize product gallery settings in woocommerceTips for designing product gallery in woocommerceCustomize appearance of product gallery in woocommerce

Objaśnienie

Chcesz nadać swojej galerii produktów WooCommerce świeży wygląd? Oto prosty sposób na jej dostosowanie:

Sprawdź WooCommerce: Najpierw upewnij się, że WooCommerce jest aktywne. Ten kod nie zadziała bez niego.
Usuń Domyślną Galerię: Domyślne wyświetlanie galerii zostaje usunięte, aby zrobić miejsce dla Twojego niestandardowego układu.
Dodaj Niestandardową Galerię: Dodawany jest nowy układ galerii. Przechodzi przez obrazy produktów i wyświetla je w formacie siatki.
Wyświetlanie Obrazów: Każdy obraz jest pobierany i wyświetlany z jego URL oraz tekstem alternatywnym dla dostępności.
Niestandardowe Style: Dodawane są niestandardowe CSS, aby stylizować galerię. Obrazy są ułożone w elastycznej siatce z odstępami między nimi.
Responsywny Design: Elementy galerii są ustawione tak, aby zajmowały jedną trzecią wiersza, automatycznie dostosowując się do różnych rozmiarów ekranów.

Aby te zmiany były widoczne, upewnij się, że Twój niestandardowy plik CSS jest załadowany na stronach produktów. Ta konfiguracja zapewnia schludną, responsywną galerię, która poprawia wyświetlanie Twoich produktów.

Kod
// 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' );

Instrukcja

Lokalizacja pliku: Dodaj poniższy kod do pliku functions.php swojego motywu lub do pliku własnej wtyczki.

Wymagania wstępne: Upewnij się, że wtyczka WooCommerce jest zainstalowana i aktywna na Twojej stronie WordPress.

Kroki wdrożenia:

Dostęp do panelu WordPress: Zaloguj się do panelu administracyjnego WordPress.
Przejdź do Edytora motywu: Przejdź do Wygląd > Edytor motywu. Jeśli wolisz używać własnej wtyczki, przejdź do Wtyczki > Edytor i wybierz swoją własną wtyczkę.
Otwórz functions.php: W Edytorze motywu znajdź i otwórz plik functions.php z listy po prawej stronie. Jeśli używasz wtyczki, otwórz główny plik wtyczki.
Skopiuj i wklej kod: Skopiuj podany kod i wklej go na końcu pliku functions.php lub pliku swojej wtyczki.
Zapisz zmiany: Kliknij przycisk Aktualizuj plik, aby zapisać zmiany.
Utwórz plik CSS: Jeśli jeszcze tego nie zrobiłeś, utwórz plik CSS o nazwie wp-dudecom-gallery-styles.css w katalogu css swojego motywu. Dodaj wszelkie dodatkowe style, które chcesz zastosować do swojej galerii.
Zweryfikuj zmiany: Odwiedź stronę produktu na swojej stronie, aby upewnić się, że nowy układ galerii jest wyświetlany poprawnie.

Jeśli napotkasz jakiekolwiek problemy lub potrzebujesz dalszej personalizacji, rozważ skontaktowanie się z wp-dude.com w celu uzyskania fachowej pomocy w swoich projektach WordPress.