Shop & Archive Pages look broken / squeezed

This topic has 39 replies, 3 voices, and was last updated 2 months ago by Artem Temos.

Viewing 30 posts - 1 through 30 (of 40 total)

1 2 →

Author

Posts
June 25, 2024 at 11:40 am #575263
shikv
Participant
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 2 months, 3 weeks ago by shikv.
Attachments:
You must be logged in to view attached files.
June 25, 2024 at 3:16 pm #575365

Aizaz Imtiaz Awan
Keymaster

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.

June 25, 2024 at 3:27 pm #575373

shikv
Participant

Hi there,

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

June 25, 2024 at 4:31 pm #575401

Aizaz Imtiaz Awan
Keymaster

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.

June 25, 2024 at 5:29 pm #575420

shikv
Participant

Hi, please find info in the private field.

June 26, 2024 at 9:24 am #575532

Aizaz Imtiaz Awan
Keymaster

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.

June 26, 2024 at 9:32 am #575542

shikv
Participant

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

June 26, 2024 at 3:11 pm #575668

Aizaz Imtiaz Awan
Keymaster

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.

June 26, 2024 at 4:12 pm #575694

shikv
Participant

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.

June 27, 2024 at 9:45 am #575803

Aizaz Imtiaz Awan
Keymaster

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.

June 27, 2024 at 10:09 am #575828

shikv
Participant

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.

June 27, 2024 at 11:41 am #575872

shikv
Participant

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

June 27, 2024 at 1:13 pm #575913

shikv
Participant

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.

June 27, 2024 at 2:07 pm #575923

Aizaz Imtiaz Awan
Keymaster

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.

June 27, 2024 at 5:11 pm #576012

shikv
Participant

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.

June 28, 2024 at 8:56 am #576099

Aizaz Imtiaz Awan
Keymaster

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.

June 28, 2024 at 9:54 am #576129

shikv
Participant

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

June 29, 2024 at 2:41 pm #576424

Aizaz Imtiaz Awan
Keymaster

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.

July 11, 2024 at 5:54 pm #582737

shikv
Participant

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

July 12, 2024 at 9:24 am #582811

Aizaz Imtiaz Awan
Keymaster

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.

July 12, 2024 at 10:01 am #582827

shikv
Participant

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.

July 12, 2024 at 3:27 pm #582968
Aizaz Imtiaz Awan
Keymaster
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.
July 12, 2024 at 4:15 pm #582992

shikv
Participant

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.

July 13, 2024 at 3:02 pm #583141

Aizaz Imtiaz Awan
Keymaster

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.

July 15, 2024 at 12:45 pm #583356

shikv
Participant

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.

July 15, 2024 at 4:39 pm #583464

Aizaz Imtiaz Awan
Keymaster

Hello,

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

Best Regards.

July 16, 2024 at 2:12 pm #583679

shikv
Participant

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

July 16, 2024 at 3:08 pm #583701

Artem Temos
Keymaster

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.

July 16, 2024 at 4:24 pm #583726

shikv
Participant

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.

July 16, 2024 at 4:26 pm #583730

Artem Temos
Keymaster

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