OceanWP conflict with Imagify / WebP Images

  • Hi,

    I have a problem with Images rendering in OceanWP after the most recent upgrades of the theme and Woocommerce.
    The site is running Woocommerce with OceanWP.
    It also uses Imagify plugin for image compression & conversion to webp.

    Key item versions:
    – WP 6.0.2
    – OceanWP 3.3.5
    – Woocommerce version 6.9.4
    – Imagify 2.0

    Initially, this occured only after the WooCommerce update on debugging, so I had opened a support thread with them:
    Further information and the System Info is available here:
    https://www.ads-software.com/support/topic/image-link-changes-to-data-and-does-not-load/#post-16056533

    The finding was that it appears to be a conflict between Imagify and the theme as:

    • If I disable Imagify all works, but I loose webp image optimizations.
    • If I switch to Storefront with Imagify Active, all works well and I retain the optimized images

      • Please can you take a look – I have left the version with the issue in my staging as linked above.
      For reference, my live site also works, though the missing plugin in the case of live is woocommerce, where I tracked the 3-way issue arose only from woocommerce 6.8.0 and above.

      Thanks,

      Thiru

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

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hello @thiruc,

    Thank you for reaching out, and sorry for the trouble.

    How can we replicate your steps to arrive at the issue on a fresh WordPress installation?

    I have installed and configured Imagify plugin, and all images are converted to the webp format, but I didn’t see any issue; would you please share some screenshots or short video from the settings?

    You can upload your files to one of the following online services:
    https://postimages.org
    https://imgbb.com
    https://loom.com
    https://drive.google.com
    https://wetransfer.com
    https://dropbox.com

    I’ve checked the source of your website, and I saw the JS error in the website’s console; Also, since you are using the lazy load plugin and CDN, perhaps it’s a cache issue when plugins are deactivated; Please check this screenshot: https://i.postimg.cc/xTc9zHkf/image.png(when JS error appears, then most of other JS will stop working).

    For troubleshooting, please do the following steps and let me know the results:

    1- Head over to WP Dashboard > Plugin.
    2- Deactivate all plugins.
    3- Then, first activate the Ocean Extra plugin.
    4- Check your issue.
    5- Then, activate your plugins one by one
    6- After activation of any plugins, check your issue

    Note: if you have any cache plugin or server cache(CDN / Browser Cache and Cookies and …), you need to clear its cache contents or disable them to see your changes. Also, don’t forget to click on the regenerate all assets file and data in Elementor > Tools.

    Please keep us posted,
    Best Regards

    Thread Starter thiruc

    (@thiruc)

    Hi Shahin,

    Thanks for coming back.
    I actually used Tinytake – hope that is ok.

      Here is the information on the results of the testing:

    Not sure how we can replicate, though I can detail the sequence or clone the site for you and grant access.
    Steps I took would be, with upgrades after creation of product / post:
    – WP 6.0.1, after create and test upgrade to 6.0.2
    – OceanWP 3.3.3, after creation upgrade to 3.3.5
    – Imagify, 1.x, after image conversion and create shop page, ugrade to 2.0
    – Woocommerce 6.7.3, after creating shop page upgrade to 6.8.0+

    After upgrade of all the above the issue arose.

    As mentioned changing to Woocommerce Storefront the images appear normally.
    Disabling Imagify the images appear normally.
    Per the Woocommerce team therefore it appears to be a conflict that only occurs after all three plugins are updated.

    In live I have not updated Woocommerce from 6.7.x and therefore the issue is also not present.

    Here are links to screenshots / videos from my testing as you suggested:
    This was done after:

    • Clearing Cache and Disabling HummingBird
    • Clearing Cache and Disabling JetPack
    • Clearing cache and Setting my CDN to Developer moe to bypass
    • Clearing Cache and disabling Caching in the Bluehost MU plugin
    • Disabling all other plugins except Woocommerce and Ocean Extra
      Resources for reference:</ul

      Staging Inspector has no errors on my test – end tag is picture:

      Staging with no error and end-tag <picture> – URL data:

      Live Site Inspector – end tag is still closing tag img:

      Live site inspector – end tag as img

      Video goes through your suggestions – though summarising only where I found faulty / resolving combinations:

    • All plugins and CDN disabled except Ocean Extra and Woocommerce disabled – No issue
    • All plugins enabled except Jetpack – No Issue
    • Jetpack enabled with all others – immediate issue
    • All plugins enabled except Imagify – No Issue
    • All plugins enabled with Theme switched to Storefront – No Issue

      • Please note therefore, the image issue only arises with the combination of:

      OceanWP Theme, Jetpack, Imagify and Woocommerce (6.8.0+).

      If any one of these is deactivated or the theme changed the issue does not exist.

      Testing plugins deactivated / combinations

      I would prefer to keep using OceanWP, and retain the performance gains of Imagify and Jetpack, and off course Woocommerce is non-optional here.
      Therefore I would really like if you can find where the conflict combination arises.

      As mentioned, I am happy to set up a Cloned site to assist in your debugging / RCA.

      Look forward to an update soon.

      Thanks,

      Thiru`

    Hello @thiruc,

    Thank you for reaching out,

    I tried to reproduce the issue on my side but did not succeed. If you could reproduce the issue on a fresh WordPress installation(we should recreate the issue somewhere other than your website for a fix), please let us know the steps to reproduce the issue.

    In the meantime, this topic is forwarded to the developer team and will be checked; And improved for the next updates if we encounter an issue on our end.

    Best Regards

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘OceanWP conflict with Imagify / WebP Images’ is closed to new replies.