Woocommerce Single Layout Issue - HTML breaks up

Support
#1

Hi,

The product pages that I create using Woocommerce Single Layout and Booking WP’s Appointments plugin break the HTML. Regarding this issue, I opened a ticket last week, and the first impression was that the issue is plug-in-related.
https://theme.co/forum/t/sections-appearing-like-columns/107145/5

But it turned out that the problem is theme-related. The support team for the appointment plugin dedicated significant time to diagnosing this problem, so I would appreciate it if you do not to immediately shift responsibility to another party as a first response, as it can sometimes be a quick reaction.

Here is their response that can help you find the problem:

The issue is definitely coming from the theme.

I have a test appointments site. Using the Storefront theme, I put the appointments shortcode for a specific appointment on a page (the basic way of using the shortcode). I added one block with Gutenberg below it. That’s all there is on that page. I opened the page and checked the HTML structure and it’s as it should be – the block below it is below.

Then I installed and activated the Pro theme on my test site and reloaded that page. Nothing else was done to my site.
And the HTML is not ok. The block below was wrapped in the upper div, not one but 2 ways up and some extra divs were added to the output code.
Just in case, I did the same test with Astra and Divi theme and they both work fine.

Keep in mind I didn’t even touch any templating with the Pro theme. Just used the Gutenberg to populate content on a page, that’s it.

I took screenshots with the differences that you can forward to the theme developers. They should be able to figure out what to fix as they are most familiar with their theme.

Attached, you can find screenshots of the extra div (pro theme vs storefront) that they are talking about.

I also want you to know that in the below product page, I use Pro-theme, same Appointmens plug-in and Woocommerce Single Layout (I do not know if there were different versions of it). Everything works properly on this installation.

Also, another clue for you: When I place the plug-in’s shortcode in a row, it breaks the HTML in a different way than it does when I pace it in a Grid.

Credentials are in the secure note, and I appreciate your help!

Thanks

Gunes

PRO THEME:

pro-theme
pro-theme1265×709 43.9 KB

STOREFRONT THEME:

storefront-theme
storefront-theme1218×676 42.5 KB

#2

Hello Gunes,

Thanks for writing in!

The same thing happened here. As soon as I removed the shortcode [appointment_form show_title="0" show_rating="0" show_price="0" show_excerpt="0" show_meta="0" show_sharing="0" availability_autoselect="0"], the layout is displayed as expected. You can check the layout now.

Best Regards.

#3

RueNel,

I know that when we remove the shortcode, the layout is displayed properly, but that doesn’t solve the problem, and that also doesn’t mean that the problem is plug-in or theme-related.

If you read the plugin developer’s answer above, they tested their shortcode on three other themes and could not replicate the problem. I searched their support page and could not find a similar thread either. They say that they freshly installed Cornerstone and Pro and replicated the problem. Still, these do not prove that the problem is theme-related, but how do you explain this:

The product (appointment) pages on this website (ceramicfx.com) use the same shortcode, and the layout displays properly. Here is an example.
https://ceramicfx.com/service/pro-ceramic-coating-fullsize/

If the problem is plug-in-related, it should have created the same problem in this Pro installation as well, but it is not. Everything is up to date on this installation.

I am not a developer, but I am suspecting the current version of the WC Single Layout templates. When the theme is updated, I do not know if the layout templates are updated as well, but as I stated above, I did not have this issue on the 2021 version of the WC Single Layout template.

I appreciate your deeper help on this issue.

Thank you

#4

Hey @gunesinan,

This is neither an issue with Pro nor the appointment plugin. The reason why the plugin works in other themes while it doesn’t in Pro is because Pro does have WooCommerce integrations.

If you suspect the latest version of Pro is the issue (theme updates could change the files), kindly confirm this by downgrading to the previous version of Pro.

  1. Uninstall the latest version of Pro
  2. Download the previous version in your license page.
  3. Install the previous version of Pro in your site.

image

You can let us know the result maybe this will give us a lead on where the conflict is.

Please note that we do not provide support for plugin conflicts because the way our products are built are mainly for compatibility with all theme features as well as our supported plugins. I believe this is the same with the plugin developer as well. For example, if our theme and the third-party plugin are hooking to the same WooCoomerce function, it’s possible that neither party can give way because they have different interests.

With that said, though we can check where the conflict happens, we cannot guarantee a solution.

#5

Christian,

Thanks for the detailed answer, but this doesnt help. I do not need to test the previous version of Pro, because it is not a theme version related issue, even it is, using the older version of the theme is a not a solution.

I have two Wordpress, Pro and Booking Plug-in installations, and both installations are up to date:
WP: 6.3.2
Pro: 6.3.9
Appointments Plug-in: 4.17.3

In one installation, I am not having any issues (ceramicfx.com), on the fresh installation (gunesi.sg-host.com) however, I do.

This cannot be explained by “WooCommerce integrations” or “theme/plug-in versions”, or “plugin conflict”.

Please help me on this issue.

Thanks

Gunes

#6

Hey Gunes,

The version testing was a response to your concern:

Now, if it works on your site and not the other when they’re both using Pro, the problem could be in your child theme and/or another custom code or 3rd party plugin is conflicting.

And another thing. In https://gunesi.sg-host.com/, you’re using the default WooCommerce template. In https://ceramicfx.com/, you’re using the WC Single Layout. Please try building a WC Single Layout in https://gunesi.sg-host.com and assign it to your single product like you did in https://ceramicfx.com

In Pro’s default WooCommerce single template, hook priorities could conflict.

#7

Christian,

Thanks for your response.

The problem is probably not due to the child theme. I disabled the Child theme switched to Pro but still the problem continues. What do you mean by:

…you’re using the default WooCommerce template.

In Cornerstone, I see only one template for Woocommerce product pages and that is “Woocommerce Single”. Please see the attached screenshot.

Are “WC Single Layout” (that you refer in your message) and “Single Layout” (see attached screeenshot) the same thing?

If it is, can I create woocommerce product pages using both “Single Layout” and “Woocommerce Single”, as shown in the screenshot?

I appreciate your quick response. Again, the question is:can I create a product page using “Single Layout”, instead of “Woocommerce Single”?

Screenshot at Oct 31 09-32-37
Screenshot at Oct 31 09-32-37788×1278 118 KB

#8

Hey Gunes,

Thanks for testing this. Now it’s confirmed that it’s not the child theme.

That simply means that you’re not using the Layout Builder for your single products so the default WooCommerce template is being used.

It’s not recommended as WC elements might not work. But, if you’re using only the Single Layout in your https://ceramicfx.com site which you said works, go ahead and try it or replicate your https://ceramicfx.com setup.

Again, your site: https://gunesi.sg-host.com/
is not using the Layout Builder. The default WooCommerce template is possibly conflicting with your appointments plugin. And again, the WC PHP templates in our theme does not necessarily need to be updated. The only time it needs to be updated is if there’s a security issue or it conflicts with our support products. Your appointments plugin is not one of our supported products. You need to wait for the WC PHP templates to be updated. Otherwise, this is considered as customization which we only provide through One Total Care.

Thanks.

#9

Christian,

Thanks for the detailed response,

It’s not recommended as WC elements might not work. But, if you’re using only the Single Layout in your https://ceramicfx.com site which you said works, go ahead and try it or replicate your https://ceramicfx.com setup.

I never said that I am using Single Layout in [https://ceramicfx.com] in product pages. I use Woocommerce single, and here is a screenshot:

image
image1590×924 114 KB

#10

Christian,

Please us the same terminology that is used on Cornerstone. I do not understand what you mean by “Layout Builder” or “default WooCommerce template”.

Everytime, what I do is to press the “+” button and choose “WooCommerce Single” and I do not know what “default WooCommerce template” is and I do not want to use it, if it is the Wordpress template.

After pressing the "+"pres button, I choose either “from scratch” or “use template”, and in each of these cases – either (1) from scratch, or (2) use template > product 1, or (3) use template > product 2 – the columns does not display properly.

Why is it so difficult to get support regarding this issue? It has been two weeks that I couldn’t get solid support regarding this issue.

#11

Hey Gunes,

No worries. It’s not a big deal. I said “IF”

image
image836×85 12.8 KB

What are you expecting? I already mentioned that you should build the product page using the WooCommerce Single (in the Layou Builder). Build it the same way you built the WooCommerce Single at https://ceramicfx.com.

#12

Christian,

Can you please take the time to read the original thread? In the last two weeks, we have already been trying to create a product page that displays properly using " WooCommerce Single". The reason that I opened this ticket is that “WooCommerce Single” does not work properly on a fresh Woocommerce/WP/Pro installation.

We already proved that the Appointments plugin works properly on ceramicfx.com (which is built on Pro), and on other themes.

#13

Hey Gunes,

I did. But, your post was confusing because of the appointment plugin’s support investigation, which is not related to the WooCommerce Single (of the Layout Builder). And, when I previously checked, the product page uses the default WooCommerce template and not the WooCommerce Single Layout. We misunderstood you. You misunderstood us so we apologize for the confusion.

Now, let’s focus on the WooCommerce Single (of the Layout Builder) not working in https://gunesi.sg-host.com/ but works in https://ceramicfx.com/. Kindly provide WP admin access to https://ceramicfx.com/ so we can compare the setup.

Thanks.

#14

To summarize, the issue here is:

Using the same Appointment plugin shortcode
this product page is broken

this other domain product page is working

#15

Thanks Christian,

That is exactly the problem. I highly appreciate your help. You can find the credentials and a few details on the secure note.

#16

Hey Gunes,

When I checked, your single product uses the WooCommerce Single layout named “WooCommerce Single - Product 2” not “WooCommerce Single (DO NOT DELETE)”

In the “WooCommerce Single - Product 2” WooCommerce Single layout, I discovered the Appointments shortcode breaks the page IF there is a product element beneath it like the Product Long Description and Product Additional Information.

image
image725×430 32 KB

image

image

I created a template which is a copy of WooCommerce Single (DO NOT DELETE)

image

That template does not have WooCommerce elements after the Appointment plugin shortcode and it works.

Your cermicfx product page https://ceramicfx.com/service/pro-ceramic-coating-compact/, also does not have WooCommerce elements after or below the Appointment plugin shortcode.

What will work is the WooCommerce elements should be placed before or above the Appointment plugin shortcode like placing the WooCommerce elements to the left column and the Appointment shortcode in the right column.

image
image1329×793 66.2 KB

Regarding the Appointment plugin shortcode and our WooCommerce elements conflict, I’ll consult with our lead developer about this. He will be the one to decide if Pro will include compatibility with the appointments plugin. Please just note that we could not guarantee a solution for 3rd party plugin conflicts.

#17

Thank you so much for the detailed answer, Christian. I highly appreciate it!

When I remove the WC shortcodes from WooCommerce Single (DO NOT DELETE), I see that the page still breaks.

Here are the shortcodes that I removed:

{{dc:woocommerce:product_description}}
{{dc:woocommerce:product_short_description}}

There were so many layout templates on my installation, so I deleted some of them and created this one: WooCommerce Single (For Christian), which only has the Appointments shortcode and two text elements.

When you go to this page https://gunesi.sg-host.com/service/ceramic-coating-compact/, you will see that the text above the shortcode displays as it should, but the one below inherits the two-column layout of the row above, and there is no product element beneath here like the Product Long Description and Product Additional Information.

Regarding your support on this plugin: Woocommerce has a Booking plug-in as well, but there are two issues: (1) it has very low ratings, the support is not good, and people say it is buggy; and (2) I tried replicating the problem with that plug-in as well but I even could not find the shortcode, and there is no guarantee not to have the same problem with that plugin, and most likely, it is not tested and supported by Theme.co

As far as I know, the Appointments Plugin from BookingWP is the best one on the market, and the support is pretty good.

Anyway, thank you for your ongoing support. I hope we can find a solution.

#18

I couldn’t determine much besides the plugin is adding in too many closing DIVs if this layout works fine without the shortcode. I see notes on their changelog related to this, so I would contact them and let them know you are having issues. Hope this helps.

https://demo.bookingwp.com/woocommerce-appointments/wp-content/plugins/woocommerce-appointments/changelog.txt

#19

Thank you, Charlie! I highly appreciate the time you and Christian spent on this issue.

I will ensure your message reaches the plugin developers. However, I’ve decided to discontinue my attempts to use this plugin in a conventional way due to the challenges I’ve encountered.

1 Like
#21

Glad to hear that, Gunes.