WooCommerce Brands overview page - Support | Kriesi.at

Tagged: child theme, enfold, logo, woocommerce

Viewing 22 posts - 1 through 22 (of 22 total)

Author

Posts
January 3, 2022 at 1:14 pm #1334060
envis
Participant
I have installed the official WooCommerce Brands plug-in and set it up. I have added two brands with descriptions and a logo (SVG). I have added a piece of code to the functions.php of my child-theme to add the logo to a product detail page:
/**
* Adds brand image to product page
*/
add_action( ‘woocommerce_single_product_summary’, ‘wc_ninja_add_brand_to_product_page’, 19 );
function wc_ninja_add_brand_to_product_page() {
echo do_shortcode(‘[product_brand width=”128px” height=”128px” class=”alignright”]’);
}
And I changed the slug “brand” into its dutch equivalent “merk”.

This works like a charm.

I have a problem though: The logo (SVG) is not shown on my Brand overview page (ie. [url]/merk/qcells/). Is there a way to override the \wp-content\plugins\woocommerce-brands\templates\brand-description.php to show the logo?

I have reached out to WooCommerce support and they have established that it is working in default WordPress theme and it is not an SVG-issue.
- This topic was modified 2 years, 3 months ago by envis. Reason: Asked for IP Address for Under Cunstruction IP Address whitelisting
January 4, 2022 at 12:28 pm #1334175

Nikko
Inactive Moderator

Hi envis,

Please see response in private content.

Best regards,
Nikko

February 11, 2022 at 12:17 am #1340057

envis
Participant

Nikko,

I can not filter a dynamic IP. So I have no means of revealing to you this page. But the brands overview page does not show a logo.
I have created a login for you as a reader so you can view the page. Check private data please.

With kind regards,

Gerben

February 14, 2022 at 10:26 am #1340454
Nikko
Inactive Moderator
Hi Gerben,

Thanks, please try adding this code in your child theme’s functions.php:
```
add_action( 'woocommerce_before_shop_loop', 'add_brand_woocommerce_before_shop_loop', 19 );

function add_brand_woocommerce_before_shop_loop() {
	echo do_shortcode('[product_brand width="128px" height="128px" class="alignleft"]');
}
```
Hope it helps.

Best regards,
Nikko
February 14, 2022 at 10:18 pm #1340593

envis
Participant

Nikko,

Thank you for your proposed solution. This displays 2 logos on the page and they are below the description of the brand. Can you tell me how I can adjust the code to display the logo above the content?

Screenshot of the brand page

February 15, 2022 at 11:58 pm #1340802
Nikko
Inactive Moderator
Hi envis,

Please replace this part of the code:
```
add_action( 'woocommerce_before_shop_loop', 'add_brand_woocommerce_before_shop_loop', 19 );
```
to:
```
add_action( 'woocommerce_before_shop_loop', 'add_brand_woocommerce_before_shop_loop', 5 );
```
Best regards,
Nikko
February 16, 2022 at 12:16 am #1340804

envis
Participant

Nikko, if a product bundle consists of mutiple brands and is included in the brands page, then there will be 2 logo’s above the page.
Is this something that can be fixed?

Screenshot of brands page which features product bundles with mutiple brands

February 16, 2022 at 1:20 am #1340813
Nikko
Inactive Moderator
Hi envis,

Yes, please replace this code:
```
function add_brand_woocommerce_before_shop_loop() {
	echo do_shortcode('[product_brand width="128px" height="128px" class="alignleft"]');
}
```
with:
```
function add_brand_woocommerce_before_shop_loop() {
	global $wp_query;
	$brand_id = $wp_query->get_queried_object()->term_id;
	$thumbnail_id = WC_Brands::get_term_meta( $brand_id, 'thumbnail_id', true );
	if ( $thumbnail_id ) {
		$thumb_src = wp_get_attachment_image_src( $thumbnail_id, $size );
		echo "<img src=\"{$thumb_src[0]}\" width=\"{$thumb_src[1]}\" height=\"{$thumb_src[2]}\" />";
	}
}
```
Best regards,
Nikko
February 16, 2022 at 12:26 pm #1340899
envis
Participant
Nikko,

Notice: Undefined variable: size in functions.php on line 66

Line 66:
$thumb_src = wp_get_attachment_image_src( $thumbnail_id, $size );

Does this have to do with SVG image support?
- This reply was modified 2 years, 1 month ago by envis.
February 16, 2022 at 10:48 pm #1340987
envis
Participant
Nikko, I am pretty sure it has something to do with a SVG filetype. So I tried to do something like this: detect the filetype, then return the content of the SVG as source in the page or if PNG/JPG just use normal <img src.
I don’t have the skills to do this right, but maybe you can make it work :)
```
/**
 * Adds logo to brand page
 */

add_action( 'woocommerce_before_shop_loop', 'add_brand_woocommerce_before_shop_loop', 5 );
function add_brand_woocommerce_before_shop_loop() {
	global $wp_query;
	$brand_id = $wp_query->get_queried_object()->term_id;
	$thumbnail_id = WC_Brands::get_term_meta( $brand_id, 'thumbnail_id', true );

        $file_info = pathinfo( wp_get_attachment_url( $thumbnail_id ) );

	if ( $thumbnail_id ) {
	        if ( $file_info['extension'] === 'svg' ) {
		        echo file_get_contents( wp_get_attachment_url( $thumbnail_id ) );
                } else {
		        $thumb_src = wp_get_attachment_image_src( $thumbnail_id, $size );
		        echo "<img src="{$thumb_src[0]}" width="{$thumb_src[1]}" height="{$thumb_src[2]}" />";
                }
	}
}
```
- This reply was modified 2 years, 1 month ago by envis.
February 17, 2022 at 7:17 am #1341071
Nikko
Inactive Moderator
Hi envis,

I think the issue is with the variable $size though I never got an issue on my end, please try to replace:
```
$thumb_src = wp_get_attachment_image_src( $thumbnail_id, $size );
```
with:
```
$thumb_src = wp_get_attachment_image_src( $thumbnail_id, 'full' );
```
Best regards,
Nikko
February 18, 2022 at 11:48 am #1341313
envis
Participant
Nikko,

The code puts the SVG on the page with size 1 by 1 px.
<img src="https://www.qsolarpanels.nl/wp-content/uploads/2022/01/Huawei_logo.svg" width="1" height="1">

So I added some code to make them show:
```
/* SVG brands overview */
div#our-brands-logo {
    margin-bottom: 20px;
}

div.our-brands-logo img[src$=".svg"] {
    height: 120px !important;
	width: auto !important;
}
```
The problem is now that the normal categorie show a large thumb above it. How can I show logo, but hide that thumb?
February 21, 2022 at 1:21 am #1341552
Nikko
Inactive Moderator
Hi envis,

Please replace the whole code with this, so it should target only the brand archives page:
```
add_action( 'woocommerce_before_shop_loop', 'add_brand_woocommerce_before_shop_loop', 5 );
function add_brand_woocommerce_before_shop_loop() {
	if (is_tax('product_brand')) {
		global $wp_query;
		$brand_id = $wp_query->get_queried_object()->term_id;
		$thumbnail_id = WC_Brands::get_term_meta( $brand_id, 'thumbnail_id', true );

        	$file_info = pathinfo( wp_get_attachment_url( $thumbnail_id ) );

		if ( $thumbnail_id ) {
	        	if ( $file_info['extension'] === 'svg' ) {
		        	echo file_get_contents( wp_get_attachment_url( $thumbnail_id ) );
                	} else {
		        	$thumb_src = wp_get_attachment_image_src( $thumbnail_id, 'full' );
		        	echo "<img src="{$thumb_src[0]}" />";
                	}
		}
	}
}
```
Best regards,
Nikko
February 21, 2022 at 1:33 am #1341553

envis
Participant

This reply has been marked as private.

February 21, 2022 at 1:46 am #1341554
envis
Participant
Nikko,

I had to escape the ” in one line of your code:
echo "<img src=\"{$thumb_src[0]}\" />";

Then it works, but with 2 major downsides:
1. Logo is extremely biga (looking into a CSS-fix)
2. The logo changes the colors of main logo (here the black in de logo is turned into yellow of van der valk logo)
Screenshot

Best regards,

Gerben
- This reply was modified 2 years, 1 month ago by envis.
February 21, 2022 at 3:51 am #1341560

Nikko
Inactive Moderator

Hi Gerben,

I’m glad that you were able to fix it.
As for the logo, I can’t get to see it on my end and try to inspect what’s happening (I have posted a screenshot in private content on how it looks on my end).
It seems I can only see it if I’m logged in however the credentials don’t work anymore.

Best regards,
Nikko

February 21, 2022 at 11:01 pm #1341729

envis
Participant

Nikko,

The logo of the website has the same colors as the logo of the brand. So that’s why it looks good in your screenshot, but not for the other brand. For the other brandpages the brands logo messes up color of the website logo.

Read below in private comments.

Best regards,

Gerben

February 23, 2022 at 4:07 am #1341902

Nikko
Inactive Moderator

Hi Gerben,

Thanks, the logo and the brand logo seems to be using the same class which causes it to override the colors.
I have attached screenshots showing that both logo and brand logo are using the classnames .st0 and .st1.

Best regards,
Nikko

February 23, 2022 at 11:57 am #1341975

envis
Participant

Nikko,

This is new for me, are the classes stored inside the SVG-file? I just downloaded them from their respected websites.
So I have to change them manually? or is there another solution?

With kind regards,

Gerben

February 23, 2022 at 12:57 pm #1341985
Nikko
Inactive Moderator
Hi Gerben,

Please try adding this CSS code in Enfold > General Styling > Quick CSS:
```
.logo .st0 {
    fill: #231f20;
}

.logo .st1 {
    fill: #00aeef;
}
```
Best regards,
Nikko
April 1, 2022 at 9:36 pm #1346934

envis
Participant

Nikko, that fixed it for me. As I understand correctly both documents used the same CSS Classes and this gave the logo a default color. Thanx a lot!

April 2, 2022 at 2:07 pm #1346982

Mike
Moderator

Hi,
Glad Nikko was able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike
Author

Posts