[Résolu] Product archive displays correctly – individual products do not.

[Auteur]

Publications

[davidS-53]

Basically, the woocommerce product archive is displaying as I want.

However, the individual products don't load in my theme's container. See screenshots below. There's some weird breadcrumbs etc going on, and no max-width being applied.

[davidS-53]

There is an htaccess password to access it too by the way:

username: flexo
password: password

I know this is public but it doesn't matter, i'll just change it after getting the issue sorted.

[Luo Yang Supporter Languages: Anglais (English ) Chinois simplifié (简体中文 ) Timezone: Asia/Hong_Kong (GMT+08:00)]

It seems to be a compatibility problem between your theme "Pro" and Woocommerce view plugin, please try these:
1) Deactivate other plugins (except Views plugin + Woocommerce Views plugin) and switch to original parent theme "Pro", if the
2) If the problem still persists, please provide a copy of theme "Pro" in below private detail box, I need to test and debug it in my localhost, thanks

[davidS-53]

Done all that, problem still there.

Here's a copy of the theme: hidden link

[Luo Yang Supporter Languages: Anglais (English ) Chinois simplifié (简体中文 ) Timezone: Asia/Hong_Kong (GMT+08:00)]

Thanks for the details, I can duplicate same problem, you can try this:
1) Copy file "woocommerce.php" from original "pro" theme folder, paste it into your current theme folder, rename it as "single-product.php"
2) Go to wordpress admin side, dashboard-> Toolset-> Woocommerce Views
in section "Product Template File", Enable option "Pro Theme Custom Product Template ", and test again

[davidS-53]

That's literally made it worse. See screenshots and website.

[Luo Yang Supporter Languages: Anglais (English ) Chinois simplifié (简体中文 ) Timezone: Asia/Hong_Kong (GMT+08:00)]

Where can I see the screenshot you mentioned above?
hidden link

I just checked it in your website, test the single product post in front-end, for example:
hidden link

I see screenshot: single-product.JPG

And it is only an example to show how to setup a theme file to display the single product post, and you will need to customize theme file to that you want.

More help:
https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
single-{post-type}.php – If the post type is product, WordPress would look for single-product.php.

[davidS-53]

Surely that doesn't look right to you- my theme's header and footer has disappeared.

Let me lay it out.

If I select Pro – Child Theme Custom Product Template, the single product loads fine, but I lose my theme's header and footer.

If I select WooCommerce Plugin Default Templates, My site's header and footer load, but the product page is messed up- hasn't loaded a container or something, as well as loading a strange breadcrumb thing that I never created.

If I select WooCommerce Plugin Default Templates, My site's header and footer load, but the product page is messed up- hasn't loaded a container or something, as well as loading weird.

If I select WooCommerce Views plugin default single product template, It loads my content template, but literally nothing else.

So, to summarize, here is what I want to happen (refer to the screenshot attached):

The area OUTSIDE the red box to be controlled by my theme, and appear exactly as it does in the screenshot.

The area INSIDE the red box to be controlled by Views, so I can use it to customize the layout using content templates.

Hopefully that makes sense- cheers!

[Luo Yang Supporter Languages: Anglais (English ) Chinois simplifié (简体中文 ) Timezone: Asia/Hong_Kong (GMT+08:00)]

As you can see it is a compatibility problem between your theme "Pro" and "Woocommerce Views" plugin, currently you can try this:
1) Restore your theme file back:
a) remove theme file "single-product.php"
b) Go to wordpress admin side, dashboard-> Toolset-> Woocommerce Views
in section "Product Template File", enable option "WooCommerce Plugin Default Templates"

2) Use Woocommerce plugin action hook to add a HTML div tag to wrap the product content, add below codes into your theme/functions.php:

add_action('woocommerce_before_main_content', 'my_func1');
add_action('woocommerce_after_main_content', 'my_func2');
function my_func1(){
	echo '<div class="x-container max width offset">';
}
function my_func2(){
	echo '</div>';
}

More help:
https://docs.woocommerce.com/document/third-party-custom-theme-compatibility/#section-5