Brand image in product archives and in elementor widget

This topic has 4 replies, 4 voices, and was last updated 2 months, 1 week ago ago by Samir Malik

  • Avatar: Denurade
    Denurade
    Participant
    January 24, 2025 at 14:14

    Good afternoon, please tell me how in widgets in elementor. such as product list. Instead of the text of the brand, specify its logo?
    And is it possible to do it in the Product Archives? Because there is no option to display the brand name there.

    Files is visible for topic creator and
    support staff only.
    3 Answers
    Avatar: Justin
    Luca Rossi
    Support staff
    January 25, 2025 at 08:51

    Hi @Denurade,

    It’s not possible to display the brand image in products archive page yet.

    We highly encourage you to share your suggestion on our Taskboard at https://www.8theme.com/taskboard/. If your idea garners sufficient support from other customers, our development team will carefully evaluate the possibility of including it in a future update.

    For any additional customizations beyond the default functionalities, we kindly invite you to submit a request through our Customization Panel at https://www.8theme.com/account/#etheme_customization_panel. Please note that customization services are subject to additional charges.

    Should you have any further questions or require assistance, please do not hesitate to contact us.

    Best regards,
    8Theme’s Team

    Avatar: Dominic Legare
    Dominic Legare
    Participant
    January 2, 2026 at 21:39

    hello,it works for me try this in function.php with native woo products brand:
    add_shortcode(‘logo_marque’, ‘afficher_logo_marque_robuste’);

    function afficher_logo_marque_robuste($atts) {
    global $product, $post;

    $target_product = null;

    // MÉTHODE 1 : La variable globale WooCommerce standard
    if ( $product && is_a( $product, ‘WC_Product’ ) ) {
    $target_product = $product;
    }

    // MÉTHODE 2 : Si la méthode 1 échoue, on regarde l’ID de la page actuelle
    if ( ! $target_product ) {
    $page_id = get_queried_object_id();
    if ( $page_id ) {
    $target_product = wc_get_product( $page_id );
    }
    }

    // MÉTHODE 3 (La “Sauvegardeur”) : Si on est dans un Hero/Header, on force via l’objet $post global
    if ( ( ! $target_product || ! is_a( $target_product, ‘WC_Product’ ) ) && isset( $post->ID ) ) {
    $target_product = wc_get_product( $post->ID );
    }

    // Si après tout ça, on n’a toujours pas de produit (ex: page d’accueil), on ne peut rien afficher.
    if ( ! $target_product || ! is_a( $target_product, ‘WC_Product’ ) ) {
    return ”;
    }

    // — On a trouvé le produit, maintenant on cherche la marque —

    $taxonomies = array(‘product_brand’, ‘brand’, ‘pwb-brand’);
    $thumbnail_id = false;
    $brand_link = ”;

    foreach ($taxonomies as $tax) {
    if (taxonomy_exists($tax)) {
    $terms = get_the_terms($target_product->get_id(), $tax);
    if ($terms && !is_wp_error($terms)) {
    $brand = array_shift($terms);
    // On cherche l’image dans les meta ‘thumbnail_id’ ou ‘image’
    $thumbnail_id = get_term_meta($brand->term_id, ‘thumbnail_id’, true);
    if (!$thumbnail_id) $thumbnail_id = get_term_meta($brand->term_id, ‘image’, true);

    if ($thumbnail_id) {
    $brand_link = get_term_link($brand);
    break;
    }
    }
    }
    }

    if ($thumbnail_id) {
    $a = shortcode_atts(array(
    ‘size’ => ‘medium’, // Par défaut ‘medium’ pour ne pas charger une image géante
    ‘class’ => ‘brand-logo-hero’,
    ), $atts);

    $image_html = wp_get_attachment_image($thumbnail_id, $a[‘size’], false, array(‘class’ => $a[‘class’]));

    if (!is_wp_error($brand_link) && !empty($brand_link)) {
    return ‘‘ . $image_html . ‘‘;
    } else {
    return $image_html;
    }
    }

    return ”;
    }

    and css:
    /* Force l’image à respecter son conteneur */
    .brand-logo-hero {
    max-width: 150px; /* Ajuste selon ton design */
    height: auto;
    display: block;
    z-index: 10; /* S’assure qu’elle est au-dessus du fond */
    position: relative;
    }

    Avatar: Samir Malik
    Samir Malik
    Support staff
    January 3, 2026 at 14:45

    Thanks for sharing @Dominic Legare!

    We’ve made the code readable:

    
    <?php
    /**
     * Shortcode: [logo_marque]
     * Displays the brand logo of the current WooCommerce product.
     */
    add_shortcode( 'logo_marque', 'afficher_logo_marque_robuste' );
    
    function afficher_logo_marque_robuste( $atts ) {
    	global $product, $post;
    
    	$target_product = null;
    
    	/**
    	 * METHOD 1:
    	 * Use the standard WooCommerce global $product.
    	 */
    	if ( $product instanceof WC_Product ) {
    		$target_product = $product;
    	}
    
    	/**
    	 * METHOD 2:
    	 * Fallback to the current queried object ID.
    	 */
    	if ( ! $target_product ) {
    		$page_id = get_queried_object_id();
    
    		if ( $page_id ) {
    			$target_product = wc_get_product( $page_id );
    		}
    	}
    
    	/**
    	 * METHOD 3 (Last resort):
    	 * Force product retrieval via the global $post object.
    	 * Useful in headers / hero sections.
    	 */
    	if (
    		( ! $target_product || ! $target_product instanceof WC_Product )
    		&& isset( $post->ID )
    	) {
    		$target_product = wc_get_product( $post->ID );
    	}
    
    	/**
    	 * If no product is found (e.g. homepage), abort.
    	 */
    	if ( ! $target_product instanceof WC_Product ) {
    		return '';
    	}
    
    	/**
    	 * Look for the product brand.
    	 */
    	$taxonomies   = array( 'product_brand', 'brand', 'pwb-brand' );
    	$thumbnail_id = false;
    	$brand_link   = '';
    
    	foreach ( $taxonomies as $taxonomy ) {
    		if ( ! taxonomy_exists( $taxonomy ) ) {
    			continue;
    		}
    
    		$terms = get_the_terms( $target_product->get_id(), $taxonomy );
    
    		if ( empty( $terms ) || is_wp_error( $terms ) ) {
    			continue;
    		}
    
    		$brand = array_shift( $terms );
    
    		// Try common brand image meta keys.
    		$thumbnail_id = get_term_meta( $brand->term_id, 'thumbnail_id', true );
    
    		if ( ! $thumbnail_id ) {
    			$thumbnail_id = get_term_meta( $brand->term_id, 'image', true );
    		}
    
    		if ( $thumbnail_id ) {
    			$brand_link = get_term_link( $brand );
    			break;
    		}
    	}
    
    	if ( ! $thumbnail_id ) {
    		return '';
    	}
    
    	/**
    	 * Shortcode attributes.
    	 */
    	$atts = shortcode_atts(
    		array(
    			'size'  => 'medium',
    			'class' => 'brand-logo-hero',
    		),
    		$atts
    	);
    
    	$image_html = wp_get_attachment_image(
    		$thumbnail_id,
    		$atts['size'],
    		false,
    		array(
    			'class' => $atts['class'],
    		)
    	);
    
    	if ( ! is_wp_error( $brand_link ) && ! empty( $brand_link ) ) {
    		return '<a href="' . esc_url( $brand_link ) . '">' . $image_html . '</a>';
    	}
    
    	return $image_html;
    }
    

    CSS codes:

    
    /* Ensure the brand logo respects its container */
    .brand-logo-hero {
    	max-width: 150px; /* Adjust based on design */
    	height: auto;
    	display: block;
    	position: relative;
    	z-index: 10; /* Keeps it above background layers */
    }
    

    Best Regards,
    8Theme’s Team

  • Viewing 4 results - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.