[Resolved] Updating WooCommerce Blocks Breaks Layouts

[Author]

Posts

[Jamal]

I assume that the product's archive is hidden link right? I can see that the header is different from the homepage as an example.

However, I can't escalate this to our 2nd Tier as a bug or compatibility issue without reproducing it on our platform. For that reason, I'll need you to reproduce it on the test site that I provided. And I will also need to know any additional steps you may have took.

Thank you for your collaboration.

[zacharyL]

Hey Jamal,

I've finished making preparations replicating the issue in your controlled environment.

The only thing I carried over in bulk was the child theme that I use to make customizations to Divi, and then I removed all but the most important features. The functions.php only has scripts that ensure that the styles take precedence over theme and plugins, one that pulls the Divi logo from the field in the Divi options, and one that loads in widget areas.

I rebuilt everything else by hand, as I have it on my hidden link template staging environment. Including building the header and footer areas in the Divi Theme Builder whilst the rest of the layouts are structured in Toolset Layouts, particularly WooCommerce's Product layout.

I still encounter the issue.

Attached are a couple images that illustrate this issue. Exhibit A features my Divi child theme, which loads in my styles to make things look somewhat functional. The left panel shows what the header looks like on WooCommerce page layouts, and the right panel shows what it should like on a standard WP page.

In Exhibit B, however, I only have Divi proper activated, which does not load any custom functionality or styles from my child theme. And while all the styles break, you can still see that the custom global header and footer areas appear to properly load their elements, as made evidenced by the footer bar text that says "This is a Custom Footer Bar".

Just so you know, Jamal, we are actually actively attempting to abandon the Divi Integration Plugin, as neither hidden link or hidden link have this plugin installed. The goal was to use Divi's own Theme Builder to structure the global header and footer areas, and then have the child layouts built out with Toolset Layouts. We found that using the Theme Builder for everything proved problematic for some Toolset shortcodes, such as the conditional logic containers, and there are certain limitations that the Theme Builder has that Toolset Layouts takes care of for us, such as complex, filterable, archive loop outputs, which are simply not possible with the Theme Builder.

Solving this problem will allow us to move away from the Divi Integration Plugin, and therefore help us move into integration with Toolset Blocks when it has all the same features of Views and Layouts that we've come to rely on for the past four or so years we've been using your platform.

[zacharyL]

Sorry, I just missed this message. I actually just spent a couple hours replicating this issue in your controlled environment and typing out a reply.

[Jamal]

Thank you for your collaboration to reproduce this issue. I am escalating it to our 2nd Tier, along with the PHPSESSID cookie issue.

For future websites, I would suggest dropping the Toolset Layouts plugin completely. And use only The Toolset Blocks plugin. You can activate the legacy editor along with the Blocks editor from Toolset->Settings->General->Editing experience. This way you can continue to build using the legacy editor which offers more features than the Blocks editor.

And you can work around the limitations inside Divi(conditional shortcodes) using a content template. Use the conditional shortcodes inside a content template(do not assign it to any post type), then include the content template inside Divi using a shortcode:

[wpv-post-body view_template="Name or slug of the content template"]

https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#wpv-post-body

And I'll get back to you as soon as possible.

[zacharyL]

Great, thanks for your assistance, Jamal.

I'm going to try Toolset Blocks in my next build, and see if I'm able to accomplish the same tasks that I have been accustomed to doing in Layouts.

Can I still use the Toolset Views plugin with Blocks?

[zacharyL]

So further developments. On my latest project: hidden link, I've disabled both Layouts and Views, and have started the process of using Toolset Blocks as the main means to structure layouts (now using content templates) and views, and have encountered the same problem. Pictured in the attached image.

[Jamal]

Hello again! I visited your website and I could not see any differences in the header between these pages:
- hidden link
- hidden link
- hidden link

I can see a slight difference(colors of titles) in the footer between the shop pages and other pages.

Would you like me to log in to this website and check it further? Your next reply will be private to let you share credentials safely.
Can you help me locate where the footer is been created? Maybe share a direct URL to it.

[zacharyL]

To answer your other question, the header and footer areas are both built with Divi's Theme Builder feature. You can find those site components under Divi > Theme Builder.

[zacharyL]

Just checking on the status of this ticket, as it's been a couple weeks.

I wanted to add to the ticket by updating you on the progress of my build utilizing strictly Toolset Blocks without the use of Layouts or Views. I started building out the WordPress Archive for the Shop page, and subsequently the product archives, and the header area broke just like the single product pages.

You can see it here: hidden link

I've also attached a screenshot of what it's currently looking like.

I am convinced that there's something in WooCommerce Blocks that simply doesn't like the interaction between Divi's Theme Builder and WooCommerce's product templates.

Any updates on this ticket would be greatly appreciated, otherwise I'd have to resort to using deprecated techniques in order to get the results I require, and I'd like to avoid that if at all possible.

[Minesh]

Jamal is not available at the moment and let me step in here. I hope this is OK.

We published the errata page where you can see more information:
- https://toolset.com/errata/toolset-woocommerce-blocks-3-x-breaks-divi-themer-custom-header-and-footer/

As this is a compatibility issue, this will take ages to solve that is why I honestly ask you to go with legacy to achieve what you want at the moment to fix this as there is no ETA when the fix made available.

[zacharyL]

I guess what I basically can do is run on an outdated version of WooCommerce Blocks. I still have an old copy installed on the IV Center sites.

[Minesh]

Ok - you can adopt the best workaround that suits your requirements. There is no issue with that.

[zacharyL]

I know it's kinda out of your hands at this point, but I just want to vent and speak my mind on the issue. Since it's a problem that wasn't a problem in an older version of the plugin, it shouldn't be necessary for the dev team to take "ages" to fix something THEY broke.

I don't know what kind of modifications they made beyond the UI changes, to make it all of sudden not work with Divi's Theme Builder, but they can't really blame a Divi or WooCommerce update or Theme Builder incompatibility on this. Things work as they should in WooCommerce Blocks version 2.9.4 with the latest version of Divi, WooCommerce, Toolset Blocks, and everything else. Updating to version 3.1 ONLY breaks layouts that should change from the default WooCommerce templates, so it should be more than clear that this is a problem that needs immediate attention for the tons of users that develop websites with both Toolset and Divi. That's not to mention all the legacy sites that we've spent the last four years building upon a foundation based on these two platforms.

We WANT to continue using Toolset AND Divi. Divi simply doesn't give us all the options and wealth of features that Toolset offers, so we NEED to continue using BOTH in order to provide the feature rich websites our clients have come to expect from us.

[Minesh]

I understand what you are saying but there is no possible fix available soon that is why I urge you to use the workaround that best suits your needs.