Adjust White Space Woocommerce Single Product & Archive Pages/ Integrity Stack

[fantasy_5]

Hi,

I started a previous thread in reference to how to remove white space from my Woocommerce single product pages and how to ensure the page is full-width even if I do not use the theme’s standard layout options. See thread here: Adjust Top padding and Page Layout Woocommerce Single product page/Integrity stack Within the thread, I was told to conduct several tests, which I did, and no change. I am using a plugin called Elementor to customize the single product template. I believe the X integrity stack, in some cases, adds white space to the top of the page by default. I had the same issues when adding revolution sliders. See thread here https://theme.co/forum/t/remove-white-space-above-rev-slider-intergity-stack/78863

Things I hope to accomplish at the end of this thread is

1. Make my single product pages and archives full width

2. Remove white space from the top of said pages. It appears that the white space is caused by the entry-wrap. If I add this to CSS .entry-wrap {display:none} it messes up the product information on all other pages and on the single product page and archives for related products it keeps the image of the related product, but not the name info.

3. Not have the default theme colors and styles remain after I’ve customized the single product pages and archives.

Since I am using a plugin to help with customization. Is it recommended that I copy the single product template file to my child theme first prior to making changes? Not sure just throwing my hat in the wind so whatever help you can offer will be greatly appreciated. Yes, I have also, reached out to the plugin authors and awaiting additional replies. So far they have said X theme default theme options are taking over rather than allowing all customization from the plugin.

[tristup]

Hi @fantasy_5,

Thanks for reaching out.
To remove the white space only on the Single Product page, please add the following code into Theme Options > CSS.

.single-product .entry-wrap
{
    display: none;
    padding-top:0px !important;
}

Please remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[fantasy_5]

Hi, Tristup

Thank you so much for the code. Is there a way to tweak it so it does not remove the entry-header for related products? I’m trying to ensure it does not affect the functionality of related products at all. Entry-wrap display none, when used alone, for some strange reason, also removes the related product titles and the mouse over add to cart button too.

Also, what CSS can be used to ensure the single product pages and archives remain full width with a little padding above the footer whether I use the theme’s page layout defaults or a plugin?

[marc_a]

Hi @fantasy_5,

We don’t usually provide custom CSS to change the layout because it might break some functionality in the future and this will also under customization. Regretfully, customization is outside the scope of our theme support. You may seek 3rd party developers to help you with your problems or you can avail One where we can answer questions outside of the features of our theme.

On the other hand, I suggest that you upgrade your X theme to Pro so because you can customize your WooCommerce pages without any custom CSS. To know how to convert X to Pro, please check it here.

Some ideas about the functionality that’s only available in Pro.

Loopers:

• https://www.youtube.com/watch?v=-LSZ7cGLNso&feature=youtu.be
• https://www.youtube.com/watch?v=dfhD5M8A8As&feature=youtu.be
• https://www.youtube.com/watch?v=MkP_4NFTd6s&feature=youtu.be
• https://www.youtube.com/watch?v=VuE-NXnanC4&feature=youtu.be

Layout Builder:

• https://theme.co/docs/layout-builder-overview
• Videos for Layout Builder

Hope that helps.

Thank you.

[fantasy_5]

Hi, Marc_a

That’s totally not true. I have several threads here to prove it. If you personally do not wish to offer help then that would be a valid response. I like X theme and have purchased it for more than one website. Why do I need to completely switch just because I’m asking for assistance with removing white space and adjusting the layout so that it remains full width for Woocommerce single product/ archive pages? In some cases this white space is added to some pages by default even when I do something as basic as add a slider.

[ruenel]

Hello @fantasy_5,

You need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use. In your case, you have this:

Therefore, you may add a custom CSS something like this:

.single-product .woocommerce-notices-wrapper+.entry-wrap{
    display: none;
}

Feel free to make adjustments as you need. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Intro to CSS - https://goo.gl/mFuWQT
How to get CSS selectors - https://goo.gl/BmoH39
Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
CSS Media Queries - https://goo.gl/L3ZHNg

Best Regards.

[fantasy_5]

Hi, Ruenel

Oh, I can clearly see now that the notices wrapper was missing. Thank you so much for all that you do. I have made all the necessary adjustments and I am pleased with how everything looks for the most part.

One more thing. How can I add a little bit of padding above the footer on the Woocommerce single product and archive pages only?

[ruenel]

Hey @fantasy_5,

Please edit your section in the Elementor layout builder and add a 40 pixel margin.

Hope this helps.

[fantasy_5]

Hi, Ruenel

That did the trick. Thank you so much for your continued support. You’re one smart cookie. I appreciate you.

[tristup]

Hi @fantasy_5,

Thanks for your appreciation and we are glad that we are able to help you.

Thanks