![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
Tagged: child theme, enfold, logo, woocommerce
-
AuthorPosts
-
January 3, 2022 at 1:14 pm #1334060
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, 8 months ago by
envis. Reason: Asked for IP Address for Under Cunstruction IP Address whitelisting
January 4, 2022 at 12:28 pm #1334175Hi envis,
Please see response in private content.
Best regards,
NikkoFebruary 11, 2022 at 12:17 am #1340057Nikko,
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 #1340454Hi 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,
NikkoFebruary 14, 2022 at 10:18 pm #1340593Nikko,
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?
February 15, 2022 at 11:58 pm #1340802Hi 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,
NikkoFebruary 16, 2022 at 12:16 am #1340804Nikko, 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 #1340813Hi 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,
NikkoFebruary 16, 2022 at 12:26 pm #1340899Nikko,
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, 6 months ago by
envis.
February 16, 2022 at 10:48 pm #1340987Nikko, 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, 6 months ago by
envis.
February 17, 2022 at 7:17 am #1341071Hi 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,
NikkoFebruary 18, 2022 at 11:48 am #1341313Nikko,
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 #1341552Hi 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,
NikkoFebruary 21, 2022 at 1:33 am #1341553This reply has been marked as private.February 21, 2022 at 1:46 am #1341554Nikko,
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:
- Logo is extremely biga (looking into a CSS-fix)
- The logo changes the colors of main logo (here the black in de logo is turned into yellow of van der valk logo)
Best regards,
Gerben
-
This reply was modified 2 years, 6 months ago by
envis.
February 21, 2022 at 3:51 am #1341560Hi 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,
NikkoFebruary 21, 2022 at 11:01 pm #1341729Nikko,
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 #1341902Hi 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,
NikkoFebruary 23, 2022 at 11:57 am #1341975Nikko,
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 #1341985Hi Gerben,
Please try adding this CSS code in Enfold > General Styling > Quick CSS:
.logo .st0 { fill: #231f20; } .logo .st1 { fill: #00aeef; }
Best regards,
NikkoApril 1, 2022 at 9:36 pm #1346934Nikko, 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 #1346982Hi,
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 -
This topic was modified 2 years, 8 months ago by
-
AuthorPosts
- The topic ‘WooCommerce Brands overview page’ is closed to new replies.