Happy Halloween! Get 20% off GP Premium with the discount code: HALLOWEEN20

[Resolved] html (font awesome) in place of featured image

Home Forums Support html (font awesome) in place of featured image

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #878229
    Daniel

    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!

    #878277
    Tom
    Lead Developer
    Lead Developer

    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.

    #878281
    Daniel

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

    #879268
    Tom
    Lead Developer
    Lead Developer
    #879403
    Daniel

    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

    #879765
    Tom
    Lead Developer
    Lead Developer

    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.

    #879783
    Daniel

    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

    #880087
    David
    Staff
    Customer Support

    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

    #880750
    Daniel

    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.

    #881031
    Tom
    Lead Developer
    Lead 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.

    #881101
    Daniel

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

    #881520
    Tom
    Lead Developer
    Lead Developer
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.