Shop & Archive Pages look broken / squeezed

[shikv]

I am experiencing an issue on my shop and product archive pages whereby the page and header looks squeezed / broken. Please see attached image of shop page compared to image of home page.

• This topic was modified 5 months ago by shikv.

Attachments:

You must be logged in to view attached files.

Hello,

Navigate to Theme Settings > General > Site width > Set the Site width “Full Width”.

For the Page container > edit the page with page builder > Edit Container > Set the Content Width “Full Width” and in the Xtemos layout choose the Stretch Container.
https://ibb.co/s1DYvJ4

Best Regards.

Hi there,

I have tried this however the page and header still remains the same, nothing has changed.

Hello,

Sorry to hear about the inconvenience. Kindly, please share your Site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.

Best Regards.

Hi, please find info in the private field.

Hello,

You have missed the admin login URL. Can you please share the WP admin login URL in the private area so I will check and give you a possible solution?

Best Regards.

HI, please find wp admin login url in private field.

Hello,

I am unable to visit your site. Please remove the IP restrictions. We are accessing the site from Pakistan. So I will check and give you a possible solution.

Best Regards.

Hi there,

There is no IP restriction on the site so i am not sure why you cannot log in. Will you not be able to assist without accessing the site?

For instance by viewing the screenshots i have provided, it seems that only the product archive pages and shop pages are affected by this.

Hello,

For the Header Width > Navigate to WoodMart > Heder Builder > Edit Current Header > Configure Header settings > Enable the option “Full width header”.
https://ibb.co/bKbSdyS

For the layout Container Width, Navigate to Layout > Edit Product Archive Layout > Edit Container and set the width:
https://ibb.co/wK0Q2G1

Also you can choose the Stretch Container in the Xtemos layout.
https://ibb.co/s1DYvJ4

Best Regards.

1. None of these options work
2. I do not want a full width header as it does not look right on the site
3. This bug is affecting the header and the page
4. When editing in elementor the page looks fine but it is broken on the live site
5. See attached image of how the menu is 1 line above

Attachments:

You must be logged in to view attached files.

I want the home page and product archive pages to look like the demo: https://woodmart.xtemos.com/mega-electronics/

See how the text is a bit bigger in your demo and everything is on one line and fits nicely.

I want the layout to be the same

I notice that when i go to product archive layout and click view then it shows a preview which looks fine but the url is:

https://game4u.co.za/woodmart_layout/product-archive-layout-shop/

However if i simply go to https://game4u.co.za/shop/ then that is where the issue is occuring.

Please see attached file, how can i resolve this?

Attachments:

You must be logged in to view attached files.

Hello,

Please deactivate all the 3rd party plugins and activate only theme-required plugins on the site and then check the issue. I am sure your issue will be solved. Then Activate the 3rd party plugins one by one and check which plugin is creating the issue for you.

Otherwise, if the issue still exists then keep the 3rd party plugins deactivated and let me know I will check and give you a possible solution.

Best Regards.

I have tried this and the issue still persists.

I have been having this issue since before I installed any third party plugins.

I am not sure why this page which is the same page looks fine: https://game4u.co.za/woodmart_layout/product-archive-layout-shop/

But the actual live page looks broken: However if i simply go to https://game4u.co.za/shop/ then that is where the issue is occuring.

Hello,

I think it is the cache issue on the site because I have checked the layout that you have created for the product archive page is showing fine in the Elementor page editor:

Try to temporarily disable the CDN and remove the server cache/browser cache /site cache and check the issue.

Best Regards.

Hi,

I have tried all of the above, it is not a caching issue, it happens to all of the product archive pages such as shop, hardware & components, etc.

It displays fine in elementor but not on the live site but what is strange is that it affects the header, body and footer as well so it must be an issue with the layout, page or theme itself

Hello,

I did not see any issue on the shop page and the other page here:https://game4u.co.za/woodmart_layout/product-archive-layout-shop/

I have disabled the custom layout for the archive pages and it is showing fine.

Now, please remember that the theme settings width do not apply on the custom layouts. You have to set the width of the page for the custom layout from the ELementor page builder settings: https://ibb.co/NyHqNCG

Best Regards.

Hi, it does not show when you preview it using this link: https://game4u.co.za/woodmart_layout/product-archive-layout-shop/

but it does show on the actual shop page here: https://game4u.co.za/shop/

This seems to be an issue / bug with the theme

Hello,

I understand your concern regarding the layout preview link: https://game4u.co.za/woodmart_layout/product-archive-layout-shop/

Please note that the layout preview link is designed to work when you are logged in as an admin. This is due to the functional structure of WooCommerce pages within the Woodmart theme. As an admin, you have access to preview and customize layouts before they are published live.

The actual shop page (https://game4u.co.za/shop/) reflects the live layout that your customers will see.
Please let us know if you have any further questions or need additional assistance. We’re here to help!

Best Regards.

Hi,

I understand that but my issue is that the actual live shop layout looks squashed and broken, please see attached screenshot of this.

It looks normal on the layout preview however in the second screenshot.

It needs to look the same on the live page as well, there should not be a difference between the two as one is simply a preview of the actual page.

Attachments:

You must be logged in to view attached files.

Hello,

Please try to use the below custom CSS code and paste it to Theme Settings >> Custom CSS >> Global CSS section:

ul#menu-header-menu-mega-electronics {
    margin-bottom: 0px;
}

I am sure your menu layout issue will be solved.

Best Regards.

Hi there, this only fixes the height of the menu however if you hover over the menu, you will notice it still looks broken and the page and elements still look squashed and for some reason the text is in bold.

Hello,

I did not see the issue like the text in bold font. Can you please mark the issue in the screenshot for a better understanding?

Best Regards.

Hi, please see attached screenshot where the menu looks broken and menu text is in bold.

Attachments:

You must be logged in to view attached files.

Hello,

So do you want to apply this layout on the front as well: https://ibb.co/MnHyFrH ?

Best Regards.

Hi there,

Yes i want the menu to look normal like it does on the homepage however on the product layout pages such as the shop page it looks squeezed or squashed and the text is in bold

Hello,

Please disable any plugins not directly related to our theme so we can check. We will log in to your dashboard and investigate the issue. Please ensure that you only keep the following plugins that are necessary for our theme to work correctly:
– WoodMart core
– WooCommerce
– Elementor/WPBakery Page Builder

Thank you in advance.

Hi there,

This is a live transactional site so I cannot disable the plugins however I have tested it before to confirm it is not a plugin conflict.

Why would a plugin conflict only affect product layout pages and not anything else? It also affects the header on these pages which is separate.

In this case, you need to create a staging development copy of your website. There, you will be able to do such kind of experiments without any harm to your production website.

Kind Regards

[Author]

Posts