Replace attribute text with icon or image

Resolved mhayek83
(@mhayek83)

7 years, 12 months ago

This is not a bug or issue but I’m seeking advise on how to do this easily if possible.
I sell fabric in my store, and want to add Washing/Care instructions as an attribute, but instead of writing this information in text like: Wash at 40 C, I want to put an icon like those printed on clothes labels.

Is there a way to achieve this without extreme amounts of code (as I actually can’t code), by using icomoon font for example? Can someone guide me through this?

Thanks,
Maria

The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

linux4me2
(@linux4me2)

7 years, 12 months ago

I can’t think of a way to do that without some code, but what about adding either an image overlay containing the care instructions icon(s) to one of the images for the fabric, or an additional image to the product gallery that contains the icon(s) you want for care instructions? It seems like that would be much easier to do and to maintain than attributes. The only downside I can think of over using attributes is that the care instructions wouldn’t be searchable as an image, whereas attributes might be.

Plugin Support Ryan Ray
(@ryanr14)

7 years, 12 months ago

Hi @mhayek83,

Is there a strategy to using attributes? I assume so that a customer could filter by items that have specific instructions or something along those lines?

If you didn’t need to use attributes, it’d likely be much simpler using the description where you can embed an image and give it a descriptive title.

Thread Starter mhayek83
(@mhayek83)

7 years, 12 months ago

Hi @linux4me2,

Thanks for your suggestion. My issue with that solution would be that it doesn’t look/feel professional enough for me, that’s all. As for code, my problem is I can’t write it from scratch myself, I’m more of a reverse engineering type of person, in the sense that I’m happy playing around with the php and ccs files and testing things out as long as I have a snippet or similar code…so far I haven’t been able to find a similar code…

Hi @ryanr14,

Thanks for your answer. What do you mean by embed an image exactly? embed it where?
I do use some of the attributes for filtering but this will not be one of them. I find this attribute table a neat way to have the characteristics of the product clearly displayed in one place.

Regards,
Maria

jessepearson
(@jessepearson)

Automattic Happiness Engineer

7 years, 12 months ago

@mhayek83 I believe both answers above were very similar. They both mentioned using images for what you are wanting to do.

For the icons you mentioned, it is possible to include icon fonts into WordPress itself and then use those fonts within different sections of the site. I am not sure if they are able to be used within attributes due to how WordPress/WooCommerce clean text when it’s being submitted to the database. The icons would need to be included in both the admin area and the front end of your site to work. There may or may not be plugins that have this functionality.

Thread Starter mhayek83
(@mhayek83)

7 years, 12 months ago

Thanks @jessepearson for the reply. I have not been able to find a plugin yet. There are topics elsewhere that mention that “Taxonomy image plugin” with a twist to the code works…but so far I haven’t even managed to understand how to use it without the twist 🙂

jessepearson
(@jessepearson)

Automattic Happiness Engineer

7 years, 12 months ago

@mhayek83 You’re welcome. I know what you are wanting to do is possible, but it would require some sort of customization to your theme, or it would require an additional plugin. Codeable may be a good place to get a quote to see how much something like this may cost you:
https://woocommerce.com/customizations/

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Replace attribute text with icon or image’ is closed to new replies.