Shop Brand Icon on shop page product loop next to brand text.

Hello, I am wondering how we can add the brand image on the shop page at the product loop. We have enabled the option to show the brand at the product loop but it displayes it as text only, how can it add the logo as well? We want to display both brand text and image.

Thank you

Hi nowhere.gr,

Thanks for reaching to us and appreciate your patience.

Please refer to articles to setup Product Brands https://xtemos.com/docs-topic/product-brands/ and https://xtemos.com/docs-topic/variable-products-and-swatches/ but you can’t display both at the same time.

Regards,

We have already setup our brands the way your documentation says. We want on the shop page, at the product loop to show the brand image (swatch) and the brand text (just like it shows on the shop filters with woodmart widget) or at least just the brand image instead of the text. We would also like to know what’s the field name you use for the brand image.

Hi nowhere.gr,

In WoodMart, there is an option Show attribute label on products https://monosnap.com/file/8lNyPZLW7vpsjUClLkKPw2rxwT5DFT with the help of which the term will be displayed https://prnt.sc/S4BjhAdyCQGP

Please read our documentation for more details https://xtemos.com/docs-topic/product-labels/

Regards,

Alright we made it 🙂 I wasn’t aware of this “Label” feature. Thanks a lot. One more thing, how can we switch the appearance so it loads above the labels and below the sale price? We only use these 2 kind of labels.

One more thing, we found a bug, when the user hovers over a product with gallery at the shop page it changes the label image with the product image. You can see this link https://e-costos.gr/piata-porselanes/seira-aqua-blue/. We are also using Wprocket.

Attachments:

You must be logged in to view attached files.

Hi nowhere.gr,

1. Labels position

Please add the following Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

.wd-product .product-label.onsale {
    order: 2;
}

2. Hovering issues.

To assist you in the best possible manner, I kindly ask that you please provide me temporary wp-admin info (wp-admin URL, username, password) to Private Content area, this will allow me to thoroughly investigate and address your concerns in a more efficient.

Regards,

Hello, any chance you took a look at the bug we mentioned in our previous post?

Hi nowhere.gr,

I have replied in the latest answer:

To assist you in the best possible manner, I kindly ask that you please provide me temporary wp-admin info (wp-admin URL, username, password) to Private Content area, this will allow me to thoroughly investigate and address your concerns in a more efficient.

Regards,

Sure, I send you details in private message.

Hi nowhere.gr,

Would you mind if I deactivate extra plugins for testing? Please confirm me back.

Regards,

Hello, I answered you privately

Hi nowhere.gr,

I can’t access dashboard in staging site to deactivate extra plugins for testing https://prnt.sc/K5tvjQ3bSqRL

There is a <picture> tag added to Product label https://prnt.sc/shlvYmkfQywg

I replicated the same settings and didn’t face this issue https://prnt.sc/IPFslwqDwtz4

Regards,

Hello again, we figured out what caused the issue, it was imagify. It was changing the tag to <picture> so it can load webp/avif images. We changes the options and now it works fine. Thank you for pointing the tag though, it helped us.

Also how can we move this brand icon (attribute label) to the bottom left of the image in the product loop? Now it’s located on the top left with the sale price, we want it to be on the bottom left of the image.

Thank you very much

Hi nowhere.gr,

Please add the following Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

.product-wrapper .product-labels{
	top: auto;
	bottom: 0;
}

Regards,

Hello, the css you sent me does move the icons to the bottom but we want to keep sale price on top left and attribute icon (we use it as brand icon) on bottom left. I send you pictures of how it looks with your css and how we want it to look at the end. I also send you a link of the website. https://e-costos.gr/piata-porselanes/seires-lefkis-porselanis-economy/

Attachments:

You must be logged in to view attached files.

Hi nowhere.gr,

First of all, take my apologies for the delay in answering because of the weekend.

Please remove previous code and use below one

.product-wrapper .product-labels .label-attribute-pa_brand{
	position: absolute;
	top: 250px;
	bottom: 0;
}

Regards,

[Author]

Posts