Adjust Top padding and Page Layout Woocommerce Single product page/Integrity stack

[fantasy_5]

Hi,

I have customized the design for my Woocommerce single product page layout. However, It seems that the theme overrides quite a few of my customizations. For starters, there’s a gap of white space between the breadcrumbs in the page vs the single product and remaining page content. I believe it’s coming from the entry-wrap. Also, I have customized some colors on the page and they do not appear only the default theme colors.

As for page layout, I’m using default. Any other page layout causes the content to disappear. Also, all the content appears smushed rather than full width. I have included screenshots of how the page looks vs how it should look with the customizations in place. I guess I’m trying to figure CSS that would fix all of the Woocommerce single product and product archive pages. Here are some old threads about white space removal Remove white Space Above Rev Slider Intergity Stack and Remove White Space from shop page

Some customizations appear on the backend, but not on the front end of the website. For others, they are customized on the backend but remain unchanged.

[nabeel]

Hi @fantasy_5,

Thank you for reaching out to us. I checked your product page and I see you’re using Elementor plugin, please note that we cannot provide support for third party plugins or scripts as our support policy in the sidebar states due to the fact that there is simply no way to account for all of the potential variables at play when using another developer’s plugin or script.

I’d recommend you to use Layout Builder to create the Woocommerce single or archive page layouts to avoid such conflicts.

We’ve quite a few helping video tutorials on Layout Builder that will help you in getting started. Please checkout the following tutorials:

• Single Layout
• Archive Layout

To see more please visit https://www.youtube.com/channel/UCgY5E3tOI83kBEahh9Y3uRg/videos

Upon further testing your site I see the broken HTML markup in the source code which could be causing all other layout issues, please check for the following first:

1. TESTING FOR PLUGIN CONFLICT
2. THEME UPDATE
3. CHILD THEME
4. CSS/JS CUSTOMIZATION
5. DISABLING CACHE
6. DISABLING CDN
7. VERSION COMPATIBILITY

Let us know how this goes!

[fantasy_5]

Hi, Nabeel

I am using X theme so how can I use the Pro layout builder? There’s no issue with the plugin. It does not use CSS to design the pages, but blocks that are dropped in. I’ve used it on other pages and didn’t have this problem. I guess I was trying to understand why my page wasn’t fullwidth unless I used the theme default and why white space was added to the top of it and why certain customizations like specific colors were not reflected on the single product pages and archives. I do not wish to deactivate every single thing on my website to resolve this issue. What HTML markup in the source code is causing all other layout issues?

[tristup]

Hi @fantasy_5,

My colleague was referring to the Layout Builder to modify the Single Product page in WooCommerce. As you are using the X theme, all the options are available in the Theme Options, if that is not working there might be some different issues that are conflicting with the predefined functionalities and styles. To know the exact reason and rectify it, we refer the troubleshoot the common issues, which has been referred by my colleague in his post. I would suggest you go through the suggestion given by my colleague to recognize the issue.

Thanks