html (font awesome) in place of featured image

Hi there,

Would these icons exist on the product catalogs? Single product pages? Both?

I'm not sure if it's possible, but I'll take a look at some WC filters.

Tom,
Yes, all the above. Anywhere product images normally appear. Thx

I wonder if this would help?: https://wordpress.org/plugins/post-featured-font-icon/

Hey Tom,
That is actually getting pretty close. How did you find that?? :) I just installed the plugin into my child theme and added <?php the_post_font_icon( $post_id ); ?> to my functions.php file. It is important to already have a featured image in place in order for the font icon to have something to replace. Great on regular posts and pages.

Getting it to work on woocommerce product pages is trickier. Those templates are inside the woocommerce plugin, so the functions.php code doesn't seem to be reaching them.

To test, I believe I want to do two things:

1. get archive-product.php and single-product.php into my child theme,
2. put the code into the appropriate place

I don't think I've ever copied plugin files into a child theme.

• Do I need to create a woocommerce folder with a templates folder inside of it and then
• put the archive-product.php file in there?

Then it's a matter of where to put the code inside that file.
I assume dealing with single-product.php would require a similar process...

Beyond that we'll see if they scale as needed or just stay small. I need them to scale like featured images do. Hopefully, I can address that with simple css.

Thx

Hi there,

David actually pointed me to it :)

the_post_font_icon() goes into your functions.php file? Or did it have to go into the template files for the theme?

I haven't done a lot of WooCommerce child theme-ing, but I assume the structure needs to match their plugin. This might help?: https://docs.woocommerce.com/document/template-structure/

I assume it would need to go where the product image is hooked into. I'm not sure how the plugin works though, so maybe it would be necessary to un-hook the default product image as well.

The developer said to put it in the template files, but I was assuming that is because it doesn’t need to be called every time a template that doesn’t use it is requested. That was just a quick way to experiment.

I would have to research how to unhook the featured image. No clue. I’vE also reached out to the developer. Let me know if you get any brainstorms

Hi there,

just to throw an alternative solution out there, you can grab the FA 4.7 icons as SVG here:

https://github.com/encharm/Font-Awesome-SVG-PNG/tree/master/black/svg

David, thanks much for that suggestion. That may end up being a better solution anyway. The whole font-icon vs. svg is quite a rabbit hole, unfortunately. Add e-commerce and product images on top of that and it gets more complicated. Right now I'll focus on using a few selected FA icons and see if I can make those work as featured images. The challenge is styling/sizing. I'm trying the SVG Support plugin with their Advanced (add default class) feature for inline styling, but so far it isn't working. I'll connect with the developer.

SVG is a pretty good idea here actually.

As for the plugin, it might be worth asking the developer how exactly it would work with WooCommerce product images. It might be that it won't work at all, as they aren't exactly like featured images.

Agreed. I’m on it. I’ll treat this as resolved and open a new ticket as needed. Thx for your help.

No problem! :)