[Resolved] Woocommerce single product page not displaying correctly

[Author]

Posts

[Harvey]

I am trying to:

Get the WooCommerce single product page showing correctly.

Link to a page where the issue can be seen:

hidden link

I expected to see:

Properly styled page with correct components.

I have tried to display the page using both the default WooCommerce template (i.e. no layouts) and also with the WooCommerce Views plugin (so using a layout that I have defined). Neither works right but I have no idea why not?

Harvey.

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Harvey

Firstly, please note that you are posting in the Community Forum for users of the free Types plugin. As a Toolset customer you can and should post in the Technical Support forum which we prioritise and where you should receive speedier service.

What exactly is the issue?

I visited your link. I can imagine that it doesn't necessarily look how you would like it to, but it surely is using a custom template for products (doesn't resemble the standard WooCommerce template), so my initial impression is that it is working and that "not displaying correctly" means not displaying how you want.

Would that be right?

Or am I missing something? What is it that you expect to look different?

[Harvey]

Hello Nigel,

Sorry about my delayed response, I did not get an email confirming your reply (possibly because I'm on the community forum?).

I'm not sure what's happening, but if I desactivate the layouts plugin then WooCommerce's single product page displays just fine, but with layouts (even when using Woo's default view) it looks wrong, as you saw. Is this to be expected?

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Harvey

You should be getting notifications for either forum.

There is a minor Layouts UI issue that I have seen whereby if Layouts is active and you have created and assigned a custom template for products, that is used even when the settings in WooCommerce Views say to use the standard WooCommerce template.

You can fix that by simply un-assigning the Layout from products, without needing to de-activate Layouts.

Is that what's happening here?

[Harvey]

I think this is already the case, when I visit the single product page iy displays the following on it:

"You need to select a layout for this page. The layout selection is available in the page editor."

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

I think it might help if I could take a look myself.

I will mark your next reply as private so that I can get log-in credentials from you—you may want to create a temporary admin user for me to use that you can later delete. And be sure to have a current backup of your site, even though I don't intend to break anything while looking around.

[Harvey]

Hi Nigel, were my login details ok? Did you manage to see what the problem is?

[Harvey]

Hello Nigel,

Are you still looking into this and have you made any progress? Sorry to press but it's getting a little urgent for me now.

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Harvey

Sorry for the delay getting back to you, the support queue has been extremely busy over the past few days and as this is in the wrong forum it is not in my direct line of sight. (We'll be closing this forum soon to prevent this going forward.)

I looked at your site but it is not so easy for me to see what's going on because it is a multisite and I can't disable/enable plugins or switch to a default theme.

I want to see what the product page looks like with Toolset plugins disabled, i.e. just using your theme, and then start re-activating the plugins and assigning a product Layout etc. to observe what changes when, but I can't currently do that.

Can I get superadmin credentials for this? I'll mark your next reply as private in case you want to provide updated credentials.

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Harvey

I went through steps of checking how a product looks with and without Toolset and with your own theme or with twentyseventeen, and I've confirmed that the Layout template is being applied to products and have identified why it doesn't look how you are expecting.

So, note the screenshots.

I started with Toolset disabled and used the 2017 theme ("product-no-toolset-2017.png") which shows how WooCommerce renders the standard product without Toolset.

You can see how WooCommerce renders the product using your theme in "product-no-toolset.png".

Now I tested with Toolset active, and with your Layout assigned and the appropriate WooCommerce Views settings, but still using the 2017 theme "product-toolset-2017.png". You can see from your text comments for the start and end of the content cell that this Layout *is* being used, although the appearance isn't quite what is expected.

The reason is that on your site in the Toolset > Settings you have the option that says Bootstrap is being loaded by the theme. It's not by 2017, and so Bootstrap is not being loaded. Layouts uses the Bootstrap grid, and hence the displaying content in different columns isn't working. (The product image uses float:left which is why it sort-of appears to be in a column.)

Lastly I tested your theme with Toolset enabled ("product-toolset-sage"). Look closely and you can see that, yes, the Layout is still being used but that its appearance is not what is expected.

Your theme doesn't load Bootstrap, but changing the Toolset settings to load Bootstrap does not much help.

You can see why in the last screenshot: bootstrap-conflict.png.

Some Bootstrap classnames are fairly generic, e.g. "container", and your theme is adding its own style rules for such classes that override and break the Bootstrap grid.

I'm not sure there is much useful advice I can give here.

Our advice for other themes which are not compatible with Bootstrap is to not use Layouts. Use Views Content Templates instead.

They don't have a page-builder-type interface for putting content into columns, for example, but it is essentially a blank slate for your HTML markup. I noticed your theme says it has its own grid system, so you can manually set up the required HTML to benefit from that inside a Views Content Template.

The alternative of trying to reconcile the differences between your theme's CSS styles which clash with Bootstrap styles can get messy and is not a route I'd recommend.

[Harvey]

Hello Nigel,

Sorry for the delay in my response. Thank you for your comprehensive investigation into all this. If I've understood correctly, this all boils down to CSS incompatibility with the theme I am using and the way Layouts expects Bootstrap's grid styles to be? I tried not loading the themes CSS so Bootstrap's would not be overridden but this did not help. I'm perplexed, it appears that using Layouts causes the structure of the single product page to change so it no longer properly marksup the page's content. All I want is for Layouts to get out of the way when the site is on the WooCommerce single product page!! (As if the Layouts plugin had been temporarily disabled whilst rendering such pages). Wouldn't this solve this issue if that were possible, as disabling the Layouts plugin causes the single product pages to render (almost!) properly?

[Beda]

You can choose to not use Layouts on Products, this is made by just assigning the layout from products, and setting the WooCommerce Views Settings to not use our template but WooCommerce's template.

Then, Products single pages won't display with the layout.

If this is what you want, you probably do not even need WooCommerce Views, as it seems you do not want to alter the product and shop using Toolset?

[Harvey]

Hello Beda,

Yes I'd like to not use Layouts while the page is a single product. Initially I'd wanted to be able to use the Layouts system to organise page content like for other pages but now I'll be content to have a standard WooCommerce single product page rendering correctly! Sorry to be a pain, but could you tell me the exact steps I need to do in order to achieve this. I have disabled the WooCommerce views plugin entirely as I've abandoned all hope of this working with my theme, so now you say I need to assign a layout from products - could you tell me precisely the steps I need to follow for this? At the moment, I have Layouts active and displaying my other pages correctly although now that WooCommerce Views has been disabled, there seems to be no theme styling applied at all to the single product pages! It's certainly not the same result that I get here when I just disable the Layouts plugin entirely?

[Beda]

In theory, this is what you do if you do not want Toolset to take any action in Products or Shop:

- do not install WooCommerce Views.
- If installed already, check it uses the native WooCommerce Template Files and not the WooCommerce Views Template files.

That should be enough already.

Now, if you already had Layouts assigned to the Products or Shop please remove that assignment either in every single Product (DO not use layouts) or in the Template layout > Layout Usage > remove products from it.

Now your Products will render exactly as the theme wants.

To doublecheck if that works, you can simply disable WooCommerce Views and make sure NO Layout is assigned to the Products (or simply disable Layouts as well).

If then the Products display wrongly it is due to the theme, as you surely understand Toolset could then not affect the output at all anymore.

Currently, on your site, you do not have either WooCommerce Views nor Layouts active, hence there cannot be any problem with them.
To confirm your products look exactly like the Theme wants, you can disable the entire Toolset.
It will still look as in the screenshot shared.

It seems you already achieved your goal?

[Harvey]

Actually, I have not achieved this, I had tried another theme and was switching various options/plugins in order to get a handle on this. I have followed all your steps and as far as I know, all layouts for all products have been disassociated. If you look at the site now, Toolset Layouts & WC Views have been disabled, so the single product shows just fine but of course the rest of the site that relies on layouts is not how it should be. I'm at a loss as to why and seem to be going round in uber circles. Could you take a look in the admin (the credentials I gave to Nigel previously are still ok to use) and check if I have followed all your steps correctly, and try to see why reenabling Layouts (with or without WC Views, although preferably I would have this playing nicely also) is messing up the single products?