0

First off I apologise for any cringe worthy ignorance, I am a novice.

I'm having some trouble changing the product rating stars to an image of my choice on woo commerce.

I understand woocommerce uses a woff file from the fontawesome pack, I found the plugin.css, located the fontface code for the woff file.

I converted an SVG to a ttf and then to woff and replaced the star woff file with that (keeping the same name to avoid changing code)

But the result is a series of S's.

Totally stuck on this for a few days.

I appreciate any insight.

Thank you

Ronan
  • 821
  • 12
  • 30
rich wid
  • 3
  • 1
  • 4
  • `converted an SVG to a ttf and then to woff` ... that sounds un-straightforward, even problematic. Maybe a good start would be to change from the star to a different image on the easiest terms possible, and then stretch from that point. – Smandoli Mar 26 '14 at 14:15
  • Thanks for the suggestion, I had tried that previously but the result was unfortunately the same. – rich wid Mar 26 '14 at 15:47
  • How about posting a precise step-by-step description of that attempt? Allows us to work on the failed scenario that is the least complicated. Also this post will benefit from addition of details. – Smandoli Mar 26 '14 at 15:53
  • I found the svg, ttf, woff files in the woo commerce assets/fonts folder. These are called from the woo commerce css in the woo commerce plugin folder. Firstly I removed the svg file and replaced it with my own but I think that the svg file only applies to the rating icons seen on the woo commerce comment section. The woff files etc.. are for the stars as displayed on the product listings. The woff file is the main file to be concerned with I think as woff is the default for most browsers and ttf etc... and fallbacks. The issue that I am having is that I can't make a woof file that is – rich wid Mar 26 '14 at 17:50
  • correctly suited to being a font and I can't edit the css correctly to replace the use of fonts with a simple image. I know nothing of woff and fonts so I'm sure the way in which I am creating my font file is somehow incorrect. – rich wid Mar 26 '14 at 17:55

1 Answers1

0

You appear to have replaced the entire font with your new font.

A font is a series of designs (glyphs) associated with different character positions. So a W in Times New Roman looks different to an W in Comic Sans.

Dingbat/icon fonts put arbitrary images in place of letters.

Your new image should be where the S is. As it is not, and there is no character at that position in the font file, your browser will be defaulting to a different font (which, as might be expected, has an S allocated to the S position).

You will probably find that other icons around the site look wrong, because you've swapped out the whole .woff file.

You need to use a font editor that will let you set glyphs in the right place.

Paul Gregory
  • 1,733
  • 19
  • 25
  • Thank you I think this will help me a lot I had used fontstruct.com to make the initial attempt at font replacement. Could you recommend a font editor? Very much appreciate your help. – rich wid Mar 28 '14 at 14:20
  • I can't, but if you say what platform you're on (Win/Mac etc), someone else might. – Paul Gregory Mar 28 '14 at 14:42
  • Thank you, I use a Mac primarily but also have a PC if there are better options available for the PC. – rich wid Mar 29 '14 at 10:19