Content Area Off canvas broke after updating Pro

[Misho]

Hi!

This is kind of an urgency.

I have a lead capturing system on the website that was working for more than two years, until recent updates.

This is the example product page to reproduce the issue:

Dolce & Gabbana Monogram 6141 501 8G | Optika Kobačić

I will rework the page to utilize product layouts, but for now I have to stick to my old WooCommerce customization.

There is an Content Area off canvas button on the page. The lower one with the “Info” icon:

That button is placed inside the product page using Global Blocks.

When the user clicks on the Off-canvas button, the Off-canas areal appears. However, as soon as a form field gets clicked, it retracts.

This happened after updating to New Pro.

Can you please take a look?

Thanks!

The Off canvas content is a Gravity Form shortcode.

[prakash_s]

Hello @Misho,

Thanks for writing to us.

I checked your given page URL it seems there is some JS console error on the page.

It might be because of any plugin conflict or any JS customization. I would suggest you troubleshoot with a few of the common issues before we investigate your settings.

1.Plugin Conflict
2.Theme Update related issue
3.Child Theme Related issue
4. Disabling Cache
5. Disabling Cdn
6. Css/Js Customization

If none of those work, It would be best if you could copying your live website to your staging area. and send your details in a secure note so that we can investigate your setting without breaking your live site.

Thanks

[Misho]

Hi!

That JS that has the error is there for a long time. I has never affected the site. I have tried to remove it from Global JS, and the problem persists. It wasn’t present before the Update to new Pro.

I have done all the staging testing (even before I wrote), but the problem persists.

In the secure not I am attaching the staging url. All plugins except GF and WooCommerce are disabled there, and also the child theme deactivated.

Thanks!

[tristup]

Hi @Misho,

I have checked your single product page and found the issue, and seen that the Global Block is actually generated two Off-Canvas while rendering it to the browser. I have added the same to a test page and found everything is working fine. Please find the page URL: https://www.staging7.optika-kobacic.hr/test-by-themco/

Thanks

It seems that there might be some issue with adding the Global Blocks through the Short Description. I would suggest you use the WooCommerce pre-defined filter to add the Global Blocks, please find the articles below which may help you on this.

1. https://www.businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/
2. https://wcsuccessacademy.com/woocommerce-visual-hook-guide-single-product-page/
3. https://stackoverflow.com/questions/44548763/display-a-custom-field-under-woocommerce-single-product-title

Hope this helps.

[Misho]

Hi! I knew that they are working elsewhere. My point was that they worked like this for years, until the new Pro came out. Ok, I will re-work the system, since it isn’t working like this anymore.

Thanks!

[alexander]

Hi @Misho,

I’m sorry you ended up having to rework that. I just came across this thread and checked your site and see you’ve already moved it into an Accordion Item. From how you’re describing it, that might have very well been a bug introduced in the 4.2 cycle. I’ll keep an eye out for cases like it.

Later this month we’re going to push out our beta for what we’re calling the “Mega Menu” update. The biggest change will be the addition of Modal, Dropdown, and Off Canvas elements that you can use in any builder and place elements inside of them directly. This will eliminate all the Global Block workarounds and just make it easier in general to setup custom builds like this.