- This topic has 11 replies, 3 voices, and was last updated 2 years, 2 months ago by Tom.
April 24, 2019 at 3:14 pm #878229Daniel
I’m using Woocommerce in GPP as a way to organize and present data rather than as an ecommerce site. I’d like to try using Font Awesome icons instead of Media Library images as the featured image for each “product” since they scale so well. Also, it would be a great way to maintain branding on our site. Any suggestions for how to do this?
Thanks!April 24, 2019 at 4:12 pm #878277TomLead DeveloperLead Developer
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.April 24, 2019 at 4:16 pm #878281Daniel
Yes, all the above. Anywhere product images normally appear. ThxApril 25, 2019 at 7:49 am #879268TomLead DeveloperLead Developer
I wonder if this would help?: https://wordpress.org/plugins/post-featured-font-icon/April 25, 2019 at 9:35 am #879403Daniel
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:
- get archive-product.php and single-product.php into my child theme,
- 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.
ThxApril 25, 2019 at 4:23 pm #879765TomLead DeveloperLead Developer
David actually pointed me to it 🙂
the_post_font_icon()goes into your
functions.phpfile? 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.April 25, 2019 at 4:54 pm #879783Daniel
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 brainstormsApril 26, 2019 at 1:58 am #880087DavidStaffCustomer Support
just to throw an alternative solution out there, you can grab the FA 4.7 icons as SVG here:April 26, 2019 at 11:04 am #880750Daniel
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.April 26, 2019 at 6:12 pm #881031TomLead DeveloperLead 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.April 26, 2019 at 9:36 pm #881101Daniel
Agreed. I’m on it. I’ll treat this as resolved and open a new ticket as needed. Thx for your help.April 27, 2019 at 7:45 am #881520
- You must be logged in to reply to this topic.