WooCommerce Shop full page template – shop page content has no padding

[David Borrink]

My first forum post here. Hello everyone.

For my first Genesis child theme, I've installed WooCommerce. My theme is modified from the Genesis-Sample. I found I needed to install the Genesis Connect plugin for WooCommerce to get the content to not touch the edge of .site-inner class. It worked. I get the padding I want for content, but I wanted to have a full-width page for the shop only. The regular site will have sidebars, so I've left the content-sidebar as my default template.

I manually choose the full width template on the shop page's content editor, and on the few sample products I entered, but when I do that I get the main shop page has no padding in .site-inner area. This is only happening on the main shop page and not on any other WooCommerce content. I'm not sure why. I don't want to do a CSS edit and add even more padding to all pages just to compensate for the front page.

If I choose content-sidebar from the templates for the shop/home page, I get the padding I need, but that gives me a sidebar I don't want. Since I'm dealing with a plug-in that is designed to get these two systems to communicate, I'm not sure which one is causing the problem, Woo or Genesis?

Has anyone run into this, and could advise me?

http://www.learning-engineer.com/

[Victor Font]

Look for the following CSS block around line 593 in you theme's style.css and add the padding as in the example below:

.full-width-content .content {
    width: 100%;
    padding: 40px;
}

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[David Borrink]

Thanks for the reply, Victor. Your suggestion adds 40px of padding to all sides ... and does it to the product pages as well, which were okay to begin with. So all other pages now have double padding on them.

My request is to know why this is happening to just the main shop page and not to any other pages.

[David Borrink]

After I added some category pages, I discovered that it happens to them, too. Trying a few body class attempts to add padding didn't work, but I did find something that worked.

I modified Victor's suggestion to just the left and right padding amounts:

.full-width-content .content {
    width: 100%;
    padding: 40px;
}

Then I used the .woocommerce body tag to remove the 60 pixels on the left and right of content entries. That balanced out the display on all pages. This would appear to have solved my problem.

.woocommerce .content .entry {
    padding-left: 0;
    padding-right: 0;
}

[Author]

Posts