Lightbox shows UTF-8 characters instead of arrows

3 Views

I have a problem with my woocommerce lightbox product gallery that you can see on my website here

When looking at the product images they show up as (what I believe are) UTF-8 characters, rather than arrows. I’ve found it happens inconsistently, one minute it’ll show the arrows, the next it’ll shows the E008 code again. Here’s a screencap to show what I mean: http://puu.sh/atg2C.jpg

Read More

I’ve tried disabling all my plugins, clearing the cache, etc. But nothing seems to fix the problem. I have the correct charset specified in my meta tags, too.

It happens especially in Firefox but Chrome sometimes has trouble displaying the arrows as well.

If anyone has any idea what the problem is (is it on my end or is it a browser issue and etc.?) I’d really appreciate any help!

Post Views: 3

Related posts

Leave a Reply

2 comments

  1. What’s supposed to be happening

    The PrettyPhoto styles in prettyPhoto.css (part of the WooCommerce plugin) has a font icon defined called WooCommerce. The full definition of the style is below:

    @font-face {
    font-family: "WooCommerce";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/WooCommerce.eot?#iefix") format("embedded-opentype"), url("../fonts/WooCommerce.woff") format("woff"), url("../fonts/WooCommerce.ttf") format("truetype"), url("../fonts/WooCommerce.svg#WooCommerce") format("svg");
}

    And then they’re using this icon font to style those buttons as seen further into prettyPhoto.css:

    div.pp_woocommerce .pp_arrow_next:before, div.pp_woocommerce .pp_arrow_previous:before {
  font-family: WooCommerce;
  content: "e00b";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  text-indent: 0;
}

    The problem

    Firefox is (for some reason that I don’t fully understand) acting like it doesn’t know what the WooCommerce icon font is.

    I do see one problem… The SVG file (as reference in their @font-face declaration is bad. Visit here to see: http://switch-witch.com/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.svg

    The only thing I suspect is that Firefox is hitting that SVG when parsing the CSS and bomb out (thus making Firefox think that font isn’t available or usable). I would expect Firefox to gracefully degrade and move to the next good usable src.

    To confirm if this is the issue, you can try a couple of things.

    1. Delete WooCommerce.svg from /plugins/woocommerce/assets/fonts/. Maybe Firefox will be okay with a missing SVG rather than a bad one?

    2. Remove the reference to it from the prettyPhoto.css file. (It’s a minified file, so it’ll be a little more difficult to find, but it’s right at the beginning of the file so it shouldn’t be too bad to find it).

    If that fixes the problem I would report the issue to the WooCommerce support team. It’ll only be temporarily fixed. (If you update the plugin and they haven’t solved the issue then it’ll break for you again).

  2. I had the same issue in both browsers and my first suspect was the WooCommerce case sensivity in my apache, and tried to replace it with lowcase characters but it still failed.
    After struggling a few hours I finally found the problem was from the css file located in /wp-content/plugins/yith-woocommerce-ajax-navigation/assets/css (line 220):

    ul.yith-wcan-list li.chosen a:before{
    font-family: woocommerce;
    speak: none;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    text-decoration: none;
    font-weight: 400;
    line-height: 1;
    /* content:""; */ /* <<== here was the problem source in my case */
    color: #a00;
    margin-right: .618em;
}

    so I comment it out and everything is fine now.