Woo Commerce and Agency Pro – content background

[jbculp]

I'm working up a test of a site in Agency-Pro and have installed the Woo Commerce plugin. My issue is that on the Shop page and the Category Page, there is no background on the content frame.

I think this is an issue of needing a custom body class but don't know for sure and if so, what to use. (tried entry and entry-content in shop page but no dice).

I've come to this conclusion because of what I'm seeing in Firebug.

Examples:
Standard Page (section of the HTML from Firebug - some div's are closed in the sections I didn't expand)

<div class="content-sidebar-wrap">
<main class="content" itemprop="mainContentOfPage" role="main">
<article class="post-27 page type-page status-publish entry instock" itemtype="http://schema.org/CreativeWork" itemscope="itemscope">
<header class="entry-header">
<div class="entry-content" itemprop="text">
</article>
</main>
</div>

Shop Page (section of the HTML from Firebug - some div's are closed in the sections I didn't expand)

<div class="content-sidebar-wrap">
<main class="content" itemtype="http://schema.org/Blog" itemscope="itemscope" itemprop="mainContentOfPage" role="main">
<h1 class="page-title"> Shop </h1>
<div class="page-description"></div>
<ul class="products">
<div class="clear"></div>
</main>
</div>

As you can see, the Standard Page has one extra Div called article. This is where the CSS has the background color defined in the element .entry

The Shop page is an actual page but the product category page is made "on-the-fly" so there is nothing to shove a custom body class into.

Shop page has no background in the content area
Product-Category Page has no background in the content area
Product page HAS a background in the content area

I simply need to know how to get the .entry css to apply to the shop page and product category page. I'm sure this is real simple but I need a pointer. Am happy to add something to the functions.php if necessary.

Thanks all.

http://demo-tkt.culpepperweb.com/

[Tony @ AlphaBlossom]

Hello,

I think you're overcomplicating things 🙂

I recommend moving your css for your .entry to either .content-sidebar-wrap or .site-inner (or if you're using a sidebar to both your main.content and aside.sidebar if they're not sharing the same white background.)

Something like this should do the trick:

.content-sidebar-wrap {
background-color: #FFFFFF;
border-radius: 3px 3px 3px 3px;
display: block;
margin-bottom: 4rem;
overflow: hidden;
padding: 4rem 4rem 2.4rem;
}

Then you can remove these from .entry. You might have to tweak it a bit, but this should work for all pages and you don't have to worry about custom classes, etc.

Have a great night!
Tony

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[jbculp]

Thanks. I didn't pursue this line of reasoning because when I was trying to workout replacing home-middle posts with home-middle pages (a problem solved in another forum posting) the moving of background up higher in the heirarchy caused trouble on the home page where the content frame has a trans background and a backstretch image. Thus, the non-home pages have the white background and therefore the css is somewhat lower down the hierarchy.

That's not to say I'm not complicating things... its a lifestyle but still, I'm thinking I need to figure out how to tell Woo Pages to behave like other pages.

[Tony @ AlphaBlossom]

I got it...still might be the better way to go and just using the .home class on the home page to take care of those issues?

You can also try using the existing product classes for each page:

.post-type-archive-product .content-sidebar-wrap,
.tax-product_cat .content-sidebar-wrap {
/* styles from above */
}

that should do what you need for these two pages...I'm not sure if that covers all of them, but hopefully that gets you closer.

Another option is to use conditional statements to add the custom body classes to the pages needed:

//* Add custom body class to the head
add_filter( 'body_class', 'sp_body_class' );
function sp_body_class( $classes ) {
     if ( is_product_category() )
          $classes[] = 'custom-class';
          return $classes;
}

Here are the available woocommerce conditional tags:
http://docs.woothemes.com/document/conditional-tags/

You would just target whichever conditional tags you need to add a custom css class to those pages specifically. This would be added to your child theme functions.php file.

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[jbculp]

Sounds like an excellent set of things to test tomorrow.... when I'm not 2 martini's into Genesis! I'll give it a try and let you know. I appreciate it.

jc

[Tony @ AlphaBlossom]

You got it, jc! Some people do their best work after a couple of martinis 🙂

Let me know how things come along! Have a great night (sounds like you're off to a good start)!

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[jbculp]

Well, not as bad as I make is sound. Fact is I'm updating a mailing list for a volunteer group (with a martini at my side) but the serious thinking work will have to wait. I'll let you know as soon as I can test this (tomorrow or Saturday). Thanks for your advise.

Cheers

[Tony @ AlphaBlossom]

Sounds great. Just to elaborate real quickly, if you applied the background to .content-sidebar-wrap, you would then just add this rule below it:

.home .content-sidebar-wrap {
background: transparent;
padding: 0;
margin: 0;
}

If the home page is the only issue, I still think this might be the easiest way to go. Either way, hopefully one of these will take care of the issue for you.

Have a great weekend!

Tony

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[jbculp]

et toi, Thanks

[jbculp]

OK Tony, your work did the trick.

As I suspected, working too high up the tree is a problem. When I applied css to content-sidebar-wrap I got a nasty white frame on my home page where I didn't want it. However, following your notes, this worked perfectly for everything so far:

.post-type-archive-product .content-sidebar-wrap,
.tax-product_cat .content-sidebar-wrap {
	background-color: #FFFFFF;
	border-radius: 3px 3px 3px 3px;
	display: block;
	margin-bottom: 4rem;
	overflow: hidden;
	padding: 4rem 4rem 2.4rem;
}

Thanks very much.

[Author]

Posts