WP SITES

3087 Coded Tutorials & 293 Plugins

Display All Brand Thumbnails on Product Page

This code display all your brand thumbnails on the product page. The thumbnails are added on the Products > Brands edit screen and selected on the single product edit page in WooCommerce.

add_action( 'woocommerce_single_product_summary', 'display_all_brand_thumbnails_on_product_page', 25 );
function display_all_brand_thumbnails_on_product_page() {
    global $post;

    $brands = wp_get_post_terms( $post->ID, 'product_brand' );

    if ( ! empty( $brands ) && ! is_wp_error( $brands ) ) {
        // Output container for brand logos
        echo '<div class="product-brand-thumbnails">';

        foreach ( $brands as $brand ) {
            $thumbnail_id = get_term_meta( $brand->term_id, 'thumbnail_id', true );

            if ( $thumbnail_id ) {
                $image_url = wp_get_attachment_image_url( $thumbnail_id, 'full' );

                if ( $image_url ) {
                    echo '<img class="brand-logo" src="' . esc_url( $image_url ) . '" alt="' . esc_attr( $brand->name ) . '" />';
                }
            }
        }

        echo '</div>';
    }
}

You can also added some inline styling like this :

add_action( 'wp_enqueue_scripts', 'add_brand_logo_inline_styles' );
function add_brand_logo_inline_styles() {
    $custom_css = "
        .woocommerce .product-brand-thumbnails {
            display: flex;
            gap: 10px;
            align-items: center;
            margin-top: 15px;
        }
        .woocommerce .product-brand-thumbnails img.brand-logo {
            height: 30px !important;
            width: auto !important;
            max-width: none !important;
        }
    ";
    wp_add_inline_style( 'woocommerce-inline', $custom_css );
}

If you prefer a more flexible solution using a plugin, check this plugin out.

Leave a Reply

New Plugins