SVG does not appear on certain woocommerce pages

  • Resolved DriftWeb

    (@driftweb)


    3 years, 11 months ago

    On my store’s homepage some SVG’S don’t load properly and if I remove the “g” tag from the DOM it appears normally. (SVG in div.plano.familia and a.pre-footer-redes-facebook linkedin)
    “https://telemedicina.unimedcriciuma.com.br/”
    On the homepage and in the cart this problem does not show an error on the console but at the end of the purchase it reproduces an error.
    “Uncaught TypeError: Cannot read property ‘match’ of undefined”

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Benbodhi

    (@benbodhi)

    Hi there,

    Your display issues are because you haven’t finished preparing the SVG for use. All objects need to be expanded and fonts outlined to avoid display issues. This is done inside your vector editing software. For example, I can see the social icons down the bottom of the page have clipping masks in them, which is why they won’t display.

    Just open in vector software select all and outline and expand everything, save again and upload. That should do it.

    As for the error in checkout, I haven’t seen this before. Please fix up the SVG files themselves first and then test. If that error is still there, let me know and I will keep digging to see if I can see why.

    Let me know how you go.

    Thread Starter DriftWeb

    (@driftweb)

    Hi again, thanks for the help. I managed to get the two SVG’S I needed, but on the checkout page the problem persists.

    Plugin Author Benbodhi

    (@benbodhi)

    Have you tested using the default twentytwenty theme?

    Please try with default theme and leave only svg support and WooCommerce plugins active and then test the checkout. This will rule out if it’s your theme or any plugin conflicts.

    If no error, reactivate each item one by one and check between each to see when the error pops up.

    If the error is still there using just WP/WC with default theme and my plugin, then I’ll have to do some more testing and try to reproduce the error.

    Plugin Author Benbodhi

    (@benbodhi)

    How are you going with this?

    Thread Starter DriftWeb

    (@driftweb)

    The error persists even with these possible solutions

    Plugin Author Benbodhi

    (@benbodhi)

    You tried with default theme and just my plugin and woocommerce active and it still persists?

    Any chance you can share a login so I can take a look? wp at benbodhi dot com

    If not, I’ll have to setup a test environment and reproduce the issue to try and troubleshoot.

    Thread Starter DriftWeb

    (@driftweb)

    Hi, I managed to find out what the error was. With the “Force Inline SVG” option checked, the error happened, so I unchecked it and added “style-svg” to my images.

    Plugin Author Benbodhi

    (@benbodhi)

    Ok great!

    Yeah that setting shouldn’t be used unless absolutely necessary. It needs to be less prominent as an option, which I’ll do in a future release. It’s a very brute way to do the job and will affect every single svg on the site.

    Glad you managed to sort it out! Thanks for letting me know.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘SVG does not appear on certain woocommerce pages’ is closed to new replies.

Tags