[Resolved] Layout issue: div extending outside row content

[Author]

Posts

[PiotrO586]

Hi,

I'm configuring products archive page. I want to rely on Layout plugin so I chose WooCommerce Views plugin default product archive template option. But there is something wrong with the container width as it extends beyond the right edge of the page. I show it on the following screen: hidden link
The page url is hidden link and take a look at <div class="container "> line where the invalid width seems to start. Is it something with products archive template of the WooCommerce Views plugin?

Best

[Nigel]

Hi Piotr

Nothing shows at the OneDrive link you shared, and the page on your site you linked to shows "No items found".

Do I need to be logged in to see something?

I'll mark you next reply as private in case you need to share log-in credentials with me.

[PiotrO586]

Hi Nigel, that's strange, the OD link works with me.
Anyway, I attach the screen to this post. In case you need access to the admin, let me know.

Thanks

[Nigel]

Hi Piotr

I think the Bootstrap CSS files are conflicting slightly with your theme settings.

The div with the container class needs to have the class container-fluid instead.

Your debug info isn't showing your plugins, for some reason, but are you using Layouts to insert the content?

This will probably be quicker if I can take a look at your site directly, if you don't mind.

I'll mark your next reply as private to get credentials from you (you can ignore where the template asks for FTP details).

[Nigel]

It looks like you had changed the setting for the row in the Layout used for the product archive (which appears on that page).

I changed it back to the default width-as-wide-as-the-content-area setting and it appears to have resolved the problem.

Have you manually edited the archive-product.php file you copied from the WooCommerce plugin to your child theme?

If the intention was just to remove the sidebar you should be able to do that with the Theme Settings section when editing the Layout, specifying no sidebars. That worked on my local test site without the need to manually edit the PHP template.

[PiotrO586]

Thanks Nigel, so, there should be "Row as wide as post content (recommended)" option enabled. I missed that for this layout somehow as I normally remember to check that out, sorry.

And yes, as I wrote I manually edited archive-product.php file, but obviously the current theme allows to choose No sidebar global option... Force of habit from former theme...

Thanks!

[PiotrO586]

Nigel, one more thing concerning this ticket. How to show an archive title on the shop archive page? The solution I use for blog page doesn't work here.

[Nigel]

Views and Layouts only take over the content part of the screen, specifically the part of the page rendered by the_content() in the theme PHP templates.

So although we tend to loosely describe the content area as the part in between the header and footer that isn't the sidebar, it is actually less than that, because the theme will normally display a post title and possibly some post meta (e.g. author, publication date etc.) before the actual content itself.

I looked and couldn't see any theme options for the page title that worked on the product archive (the shop page), and if you are creating a custom product archive and using the WooCommerce Views template for the product archive no title is added and your Layout will occupy the whole of the "content" area (between the header and footer), so you can add a title with a Visual Editor cell in the first row of your Template Layout assigned to the product archive.

You can enter the text manually, or use the wpv-archive-title shortcode: https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-archive-title

[PiotrO586]

Nigel,

I tried to add wpv-archive-title earlier, but it doesn't show anything. I added it now, so you can check.
Obviously I can add it manually, but I wanted to change the archive title as it shows the CTP plural name, and in my case the shop page's title is different than that.

[Nigel]

Sorry, of course, the wpv-archive-title shortcode won't work on the shop page because it is not a true archive page.

WooCommerce uses a normal static WordPress page for the shop page, which it displays the product "archive" on, but it is not an actual WordPress archive.

I think you should find that wpv-post-title will display the name of the shop page.

[PiotrO586]

Nigel,

I stayed with manual page title in a layout for products archive. But the wpv-post-title worked only with page id attribute. Anyway, the problem is that the actual page title (seen e.g. in a browser tab) remains "Products" (hidden link). Obviously I wouldn't like it this way and would like to change it to the title of the products archive set in the layout. I'm not sure if it relates to Toolset, but would appreciate any hints.

[Nigel]

It seems to come from WooCommerce itself.

If you disable all plugins except WC and switch to twentyseventeen theme you will see the same.

I can't find anything in the WC settings to modify this, you might try WC support because it almost seems like a bug to me.

In any case you can use the wp_title filter to change the title (https://developer.wordpress.org/reference/hooks/wp_title/), though you may need a high priority to make sure you override whatever WC is doing.

[PiotrO586]

Thanks Nigel, I've contacted WC.