New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Default WooCommerce CSS does not display in custom theme [v2.0.3]. #2739

Closed
nyubbie opened this Issue Mar 17, 2013 · 20 comments

Comments

Projects
None yet
@nyubbie

nyubbie commented Mar 17, 2013

I don't know if this is a bug or not -- but the default CSS display used to work back in WooCommerce v1.6.6.

Now that I've upgraded, the default WooCommerce CSS doesn't display anything at all, even if I copied it out, put it into my theme folder's root and linked a tag to the woocommerce stylesheet.

However, the CSS works if I manually enter a 'style' tag inside my 'head' section.

What gives? Is it my code or is it a bug?

EDIT: Removed sitelink.

In this case, I've turned the default CSS option to 'off' and input a copy of woocommerce.css and put it inside a separate css folder inside my theme.

@nyubbie

This comment has been minimized.

Show comment
Hide comment
@nyubbie

nyubbie Mar 17, 2013

Update : I realized that only the woocommerce.php page doesn't display CSS styles for WooCommerce. A normal Page (like Cart, Checkout, My Account) loads and shows the CSS stylesheet styles.

Still can't figure out if its my code that's acting up or woocommerce, though.

nyubbie commented Mar 17, 2013

Update : I realized that only the woocommerce.php page doesn't display CSS styles for WooCommerce. A normal Page (like Cart, Checkout, My Account) loads and shows the CSS stylesheet styles.

Still can't figure out if its my code that's acting up or woocommerce, though.

@nyubbie

This comment has been minimized.

Show comment
Hide comment
@nyubbie

nyubbie Mar 17, 2013

Well after a day of trying to solve this and talking to myself online -- I found out that the problem was due to the (new?) css styles having a .woocommerce before it, thus killing the style display as the div I wrapped the entire content in was a custom class.

If anyone comes across this problem next time, be sure to wrap <?php woocommerce_content(); ?> in a <div class="woocommerce"></div> tag next time.

Now excuse me while I go talk to myself some more, then start working on how to adjust the store layout.

Also, if anyone could include this in the documentation for woocommerce (either that or I'm as blind as a bat) -- it'd actually help a lot of novice developers out there retain their sanity.

nyubbie commented Mar 17, 2013

Well after a day of trying to solve this and talking to myself online -- I found out that the problem was due to the (new?) css styles having a .woocommerce before it, thus killing the style display as the div I wrapped the entire content in was a custom class.

If anyone comes across this problem next time, be sure to wrap <?php woocommerce_content(); ?> in a <div class="woocommerce"></div> tag next time.

Now excuse me while I go talk to myself some more, then start working on how to adjust the store layout.

Also, if anyone could include this in the documentation for woocommerce (either that or I'm as blind as a bat) -- it'd actually help a lot of novice developers out there retain their sanity.

@mikejolley

This comment has been minimized.

Show comment
Hide comment
@mikejolley

mikejolley Mar 18, 2013

Member

We include the class for you, more likely than not your theme is missing body_class() from the body tag.

Member

mikejolley commented Mar 18, 2013

We include the class for you, more likely than not your theme is missing body_class() from the body tag.

@mikejolley mikejolley closed this Mar 18, 2013

@manovotny

This comment has been minimized.

Show comment
Hide comment
@manovotny

manovotny May 12, 2013

I wound up here because I had the same issue as @nyubbie after updating to version 2.

The woocommerce.css file was being loaded, but it was like none of the CSS was actually being applied. Extremely baffled until I read his comments. Sure enough, adding a woocommerce class to the body or main div fixed things instantly.

The only reason I am speaking up is because we were already using the body_class() in our theme and that still did not resolve the issue.

Unless I am missing something, I think this is still potentially an issue, especially if it is just supposed to work using the body_class() call.

This was all done while using v2.0.9.

manovotny commented May 12, 2013

I wound up here because I had the same issue as @nyubbie after updating to version 2.

The woocommerce.css file was being loaded, but it was like none of the CSS was actually being applied. Extremely baffled until I read his comments. Sure enough, adding a woocommerce class to the body or main div fixed things instantly.

The only reason I am speaking up is because we were already using the body_class() in our theme and that still did not resolve the issue.

Unless I am missing something, I think this is still potentially an issue, especially if it is just supposed to work using the body_class() call.

This was all done while using v2.0.9.

@coenjacobs

This comment has been minimized.

Show comment
Hide comment
@coenjacobs

coenjacobs May 13, 2013

Contributor

If you have body_class() function call in the right spot, it should add the classes properly. Test it out on a Twenty Twelve test site if you do not believe me. It must be related to something your theme does to make functions like is_woocommerce() not able to check if it's a WooCommerce page.

Start debugging in wp_head() function and see what conditional returns something wrong if you want to trace which one.

Contributor

coenjacobs commented May 13, 2013

If you have body_class() function call in the right spot, it should add the classes properly. Test it out on a Twenty Twelve test site if you do not believe me. It must be related to something your theme does to make functions like is_woocommerce() not able to check if it's a WooCommerce page.

Start debugging in wp_head() function and see what conditional returns something wrong if you want to trace which one.

@nyubbie

This comment has been minimized.

Show comment
Hide comment
@nyubbie

nyubbie May 13, 2013

I didn't update this as I was quite busy learning the advanced functions and woocommerce at the same time, but to add on to any developers stuck in this quadmire of code, here's the solution:

Put body_class() into your <body> tag, forming <body <?php body_class(); ?>> or something in your document. Google body_class();, I'm on mobile right now and I don't have the time to do a through research for you. After that, the woocommerce CSS shoud display.

If it still doesn't display, I think the best option would be to try and see which script conflicts with your css loading or anything. You do have wp_head();” andwp_footer();`, right?

One thing you gotta note coen, no offense but you guys gotta kinda explain a bit more in-depth... Especially to new developers who won't really understand what you're talking about, like for your reply I only found out what body_class() exactly did after Googling it... Of course I'm not saying every developer should be spoon fed, and Google is your best friend when you do code, but sometimes it just cuts to the chase, you know what I mean? Also, I understand that it doesn't help that 1000 developers ask the same question over and over again, so I pretty much understand why you might not explain too much to save time.

Anyway, cheers, hope the tip helps.

nyubbie commented May 13, 2013

I didn't update this as I was quite busy learning the advanced functions and woocommerce at the same time, but to add on to any developers stuck in this quadmire of code, here's the solution:

Put body_class() into your <body> tag, forming <body <?php body_class(); ?>> or something in your document. Google body_class();, I'm on mobile right now and I don't have the time to do a through research for you. After that, the woocommerce CSS shoud display.

If it still doesn't display, I think the best option would be to try and see which script conflicts with your css loading or anything. You do have wp_head();” andwp_footer();`, right?

One thing you gotta note coen, no offense but you guys gotta kinda explain a bit more in-depth... Especially to new developers who won't really understand what you're talking about, like for your reply I only found out what body_class() exactly did after Googling it... Of course I'm not saying every developer should be spoon fed, and Google is your best friend when you do code, but sometimes it just cuts to the chase, you know what I mean? Also, I understand that it doesn't help that 1000 developers ask the same question over and over again, so I pretty much understand why you might not explain too much to save time.

Anyway, cheers, hope the tip helps.

@coenjacobs

This comment has been minimized.

Show comment
Hide comment
@coenjacobs

coenjacobs May 13, 2013

Contributor

@nyubbie Thanks for the feedback. I do agree that sometimes we can be a bit more informative, but:

more likely than not your theme is missing body_class() from the body tag

this is what @mikejolley said in the initial reply to this ticket. If you read this carefully, this explains everything you've explained in your post, just in a real short version. The reason we do not dive in deeper in these kind of issues, is because it's a themes thing and not a WooCommerce thing. As a theme developer, you should know this kind of functions by heart or at least know how to Google them. It is not up to us (and certainly not through this channel, since this is our core bug tracker) to point you to the right resources if the body_class() documentation in WordPress Codex explains everything in the deepest detail possible.

This is not meant as an offence, not in the slightest bit, but more as an explanation of why we do not explain this kind of issues in more detail. Let's focus back on the issue here, if you still want to talk about it, feel free to email me.

Contributor

coenjacobs commented May 13, 2013

@nyubbie Thanks for the feedback. I do agree that sometimes we can be a bit more informative, but:

more likely than not your theme is missing body_class() from the body tag

this is what @mikejolley said in the initial reply to this ticket. If you read this carefully, this explains everything you've explained in your post, just in a real short version. The reason we do not dive in deeper in these kind of issues, is because it's a themes thing and not a WooCommerce thing. As a theme developer, you should know this kind of functions by heart or at least know how to Google them. It is not up to us (and certainly not through this channel, since this is our core bug tracker) to point you to the right resources if the body_class() documentation in WordPress Codex explains everything in the deepest detail possible.

This is not meant as an offence, not in the slightest bit, but more as an explanation of why we do not explain this kind of issues in more detail. Let's focus back on the issue here, if you still want to talk about it, feel free to email me.

@nyubbie

This comment has been minimized.

Show comment
Hide comment
@nyubbie

nyubbie May 13, 2013

Mmk. I understand what you're getting at. Anyway, I've already solved my problem so maybe the reply you should be waiting from would be from manovotny.

Cheers and keep up the great job for Woocommerce!
Sent via BlackBerry.

nyubbie commented May 13, 2013

Mmk. I understand what you're getting at. Anyway, I've already solved my problem so maybe the reply you should be waiting from would be from manovotny.

Cheers and keep up the great job for Woocommerce!
Sent via BlackBerry.

@manovotny

This comment has been minimized.

Show comment
Hide comment
@manovotny

manovotny May 13, 2013

While I think the discussion being had is good and relevant, it does not pertain to me. I am already very familiar and well versed in body_class().

@coenjacobs, the theme is already using <body <?php body_class(); ?>>. The only way I can get it to do what I want is by using a total hack of <body <?php body_class( 'woocommerce' ); ?>>.

As to why it's not working it's magic as it should is beyond me. And as far as I know, we are not doing anything to mess with is_woocommerce() checks.

A deeper debugging session, as you suggest in wp_head(), is probably needed, but I do not know when I'll have the time for that.

manovotny commented May 13, 2013

While I think the discussion being had is good and relevant, it does not pertain to me. I am already very familiar and well versed in body_class().

@coenjacobs, the theme is already using <body <?php body_class(); ?>>. The only way I can get it to do what I want is by using a total hack of <body <?php body_class( 'woocommerce' ); ?>>.

As to why it's not working it's magic as it should is beyond me. And as far as I know, we are not doing anything to mess with is_woocommerce() checks.

A deeper debugging session, as you suggest in wp_head(), is probably needed, but I do not know when I'll have the time for that.

@coenjacobs

This comment has been minimized.

Show comment
Hide comment
@coenjacobs

coenjacobs May 16, 2013

Contributor

As to why it's not working it's magic as it should is beyond me. And as far as I know, we are not doing anything to mess with is_woocommerce() checks.

You might be not doing this intentionally, but the conditionals used in the is_woocommerce() function might be screwed by the time we check it. Like I said, it works fine in Twenty Twelve and other themes, so it's definitely a theme issue. If it's something that we've made impossible to work around, or doesn't make any sense at all, just let us know and we'll look into making it easier or less hacky.

Contributor

coenjacobs commented May 16, 2013

As to why it's not working it's magic as it should is beyond me. And as far as I know, we are not doing anything to mess with is_woocommerce() checks.

You might be not doing this intentionally, but the conditionals used in the is_woocommerce() function might be screwed by the time we check it. Like I said, it works fine in Twenty Twelve and other themes, so it's definitely a theme issue. If it's something that we've made impossible to work around, or doesn't make any sense at all, just let us know and we'll look into making it easier or less hacky.

@sabarinathj

This comment has been minimized.

Show comment
Hide comment
@sabarinathj

sabarinathj Jul 16, 2013

Hi nyubbie,

you solved my problem in single step. you rock.. Im having the same problem displaying the products in correct order using woocommerce css. I added <div class="woocommerce"></div> in woocommerce_content();. its working fine....

sabarinathj commented Jul 16, 2013

Hi nyubbie,

you solved my problem in single step. you rock.. Im having the same problem displaying the products in correct order using woocommerce css. I added <div class="woocommerce"></div> in woocommerce_content();. its working fine....

@manovotny

This comment has been minimized.

Show comment
Hide comment
@manovotny

manovotny Jul 19, 2013

All : :

Everything is said in my "answer" comment is still true and still works, but I do know what was causing the issue now.

The page where I needed to add the woocommerce class to the <body> was not a WooCommerce page of any kind. It was a custom landing page which we custom designed to have WooCommerce products on it. That would explain why WooCommerce was not adding the class automatically for me and why manually adding the class whipped things back into shape, stylistically speaking.

I hope that clears some things up.

manovotny commented Jul 19, 2013

All : :

Everything is said in my "answer" comment is still true and still works, but I do know what was causing the issue now.

The page where I needed to add the woocommerce class to the <body> was not a WooCommerce page of any kind. It was a custom landing page which we custom designed to have WooCommerce products on it. That would explain why WooCommerce was not adding the class automatically for me and why manually adding the class whipped things back into shape, stylistically speaking.

I hope that clears some things up.

@cypress-net

This comment has been minimized.

Show comment
Hide comment
@cypress-net

cypress-net Jul 23, 2013

I had this same problem and scratched my head for a couple of hours. The solution (in my case) was to add the body_class to header.php. Replace

<body>

with

<body <?php body_class(); ?>>    

I still had issues overwriting some of the styles in woocommerce as woocommerce.css loaded after my style.css. The word around that I used for this was to disable woocommerce.css is woocommerce settings and use wp_enqueue to add woocommerce,css BEFORE my style.css.

Thanks to everyone on this thread for their input and help.

cypress-net commented Jul 23, 2013

I had this same problem and scratched my head for a couple of hours. The solution (in my case) was to add the body_class to header.php. Replace

<body>

with

<body <?php body_class(); ?>>    

I still had issues overwriting some of the styles in woocommerce as woocommerce.css loaded after my style.css. The word around that I used for this was to disable woocommerce.css is woocommerce settings and use wp_enqueue to add woocommerce,css BEFORE my style.css.

Thanks to everyone on this thread for their input and help.

@sarova

This comment has been minimized.

Show comment
Hide comment
@sarova

sarova Sep 11, 2013

Thank you so much. This was the solution. Somebody commented out the body_class in the header. I added it back it and the plugin and style is showing as intended.

sarova commented Sep 11, 2013

Thank you so much. This was the solution. Somebody commented out the body_class in the header. I added it back it and the plugin and style is showing as intended.

@dlchung

This comment has been minimized.

Show comment
Hide comment
@dlchung

dlchung Nov 25, 2013

Thanks for this solution. Wrapping the content in a div with the "woocommerce" class worked for me. Was unable to figure how to get the class listed in the body, even with the body_class() function there. I was working with a non-woocommerce page, trying to loop shop items with a custom taxonomy.

dlchung commented Nov 25, 2013

Thanks for this solution. Wrapping the content in a div with the "woocommerce" class worked for me. Was unable to figure how to get the class listed in the body, even with the body_class() function there. I was working with a non-woocommerce page, trying to loop shop items with a custom taxonomy.

@ksingh8

This comment has been minimized.

Show comment
Hide comment
@ksingh8

ksingh8 Mar 28, 2014

I have just installed woocommerce plugin (using woocommerce first time) on my test site, with same issue. But as soon as I added class ="woocommerce" to body tag, it works perfectly.
My question is do we have to manually add this class to body tag ???

ksingh8 commented Mar 28, 2014

I have just installed woocommerce plugin (using woocommerce first time) on my test site, with same issue. But as soon as I added class ="woocommerce" to body tag, it works perfectly.
My question is do we have to manually add this class to body tag ???

@sabarinathj

This comment has been minimized.

Show comment
Hide comment
@sabarinathj

sabarinathj Mar 29, 2014

That css class needs to be called only for woocommerce_content() in
woocommerce.php ......

On Fri, Mar 28, 2014 at 10:46 PM, Kuldeep Singh notifications@github.comwrote:

I have just installed woocommerce plugin (using woocommerce first time) on
my test site, with same issue. But as soon as I added class ="woocommerce"
to body tag, it works perfectly.
My question is do we have to manually add this class to body tag ???

Reply to this email directly or view it on GitHubhttps://github.com//issues/2739#issuecomment-38944470
.

sabarinathj commented Mar 29, 2014

That css class needs to be called only for woocommerce_content() in
woocommerce.php ......

On Fri, Mar 28, 2014 at 10:46 PM, Kuldeep Singh notifications@github.comwrote:

I have just installed woocommerce plugin (using woocommerce first time) on
my test site, with same issue. But as soon as I added class ="woocommerce"
to body tag, it works perfectly.
My question is do we have to manually add this class to body tag ???

Reply to this email directly or view it on GitHubhttps://github.com//issues/2739#issuecomment-38944470
.

@Aneeshcb

This comment has been minimized.

Show comment
Hide comment
@Aneeshcb

Aneeshcb commented Oct 9, 2014

I have solved this issue and it is working fine please see the solution
http://www.cybernob.com/woo-commerce-supporting-product-page-single-php-cart-checkout-others-working-fine/

@bogdanmoisin

This comment has been minimized.

Show comment
Hide comment
@bogdanmoisin

bogdanmoisin Dec 9, 2014

Great .

Thank you !

bogdanmoisin commented Dec 9, 2014

Great .

Thank you !

@tydzn

This comment has been minimized.

Show comment
Hide comment
@tydzn

tydzn Apr 22, 2015

THANK YOU! I came across this exact issue today.

Wrapping <?php woocommerce_content(); ?> in a <div class="woocommerce"></div> worked like a charm.

tydzn commented Apr 22, 2015

THANK YOU! I came across this exact issue today.

Wrapping <?php woocommerce_content(); ?> in a <div class="woocommerce"></div> worked like a charm.

@woocommerce woocommerce locked and limited conversation to collaborators Apr 22, 2015

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.