Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Tuan Le
PLUS
Tuan Le
Courses Plus Student 298 Points
Posted by Tuan Le
Tuan Le
Courses Plus Student 298 Points

CSS broken in Woocommerce shop page

Hi everyone,I really need to ask if someone has the same problem,I can't figure it out after few weeks just try to fix it and been though so many acticles from Google but my Woocommerce shop page still look like a mess with a vertical list of images,please give me some advice or let me know what did I done wrong,I will much appreciate your help,please have a look on my site at this link,thank you everyone very much. http://no1nailsupply.co.uk/shop/

9 Answers

Mark Truitt
Mark Truitt
17,230 Points
Mark Truitt
Mark Truitt
17,230 Points

Hi Tuan,

The problem is that the woocommerce default styles are not getting loaded at all. The body class does contain woocommerce and woocommerce-page so this would lead me to believe that the styles are de-enqueued or something else theme based is an issue.

Mark Truitt
Mark Truitt
17,230 Points

If the theme is custom made. I would have to look at it to even give you a remote idea of what the issue is. If it isn't a custom one can you link me to the theme? I can install it and look locally.

Mark Truitt
Mark Truitt
17,230 Points

You could use something like this http://pastebin.com/ or if you want you could zip up the theme and I could take a look at it that way. Option 2 would be the easiest and would not require me having access to the site/server.

pastebin would take a bit because you would have to do it for each file.

Would need head.php, header.php, functions.php, etc.

Mark Truitt
Mark Truitt
17,230 Points

Hi Tuan,

You need to add this to the header.php just before you close the head. 

        <?php wp_head(); ?>
    </head>

And this to the footer 

<?php wp_footer(); ?>

Or even go with using the underscores theme from Automatic

http://underscores.me/

Then add your html etc to it as this is a very minimal theme from the makers of WordPress.

Mark Truitt
Mark Truitt
17,230 Points

I see them showing up on the site.

Tuan Le
PLUS
Tuan Le
Courses Plus Student 298 Points
Tuan Le
Tuan Le
Courses Plus Student 298 Points

Hi Mark! Thank you so much for your reply,yes I do believe that something wrong here but really don't know how and where to look to fix it, I what the videos again and again with many acticles but still can't make it right,,please help if you have any where should I look in my theme to solve this problem please.Thank you very much.

Tuan Le
PLUS
Tuan Le
Courses Plus Student 298 Points
Tuan Le
Tuan Le
Courses Plus Student 298 Points

Hi Mark! The theme is custom theme and I really grateful for your help, have you gat any idea how do I show you the theme source code show you can have a look? Thank you.

Mark Truitt
Mark Truitt
17,230 Points
Mark Truitt
Mark Truitt
17,230 Points

If you want to just send me the theme you can just email it to my personal email at matruitt30@gmail.com

Tuan Le
PLUS
Tuan Le
Courses Plus Student 298 Points
Tuan Le
Tuan Le
Courses Plus Student 298 Points

Hi Mark,just send the theme source code to your email,thank you so much for your help,this theme is a custom theme,I covert it from a static bootstrap html template,and stil trying to build it become an woocommerce wp site,but I am really stuck at this point,one again thank you very much for your help.

Mark Truitt
Mark Truitt
17,230 Points

Hi Tuan,

How large was the file as I have not seen it yet?

Tuan Le
PLUS
Tuan Le
Courses Plus Student 298 Points
Tuan Le
Tuan Le
Courses Plus Student 298 Points

Hi Mark! I just make the theme smaller and send it to you again,thank for your help.

Tuan Le
PLUS
Tuan Le
Courses Plus Student 298 Points
Tuan Le
Tuan Le
Courses Plus Student 298 Points

Hi Mark! Thank you for your reply,I just added the code to header and footer file.but some how all the images disappear only the h1 tag and some text are show,I think I stiil got something wrong here,please have a look for me and let me know,thank you so much for your help.thank you.

Tuan Le
PLUS
Tuan Le
Courses Plus Student 298 Points
Tuan Le
Tuan Le
Courses Plus Student 298 Points

Hi Mark! Thank you for your great help,finaly I can see them showing up on my site,you are absolutely right,after I added <?php wp_head(); ?> then it working,but only thing is the Woocommerce shop page seem to be too big on the site so all the images and text on left and right site of the page seem to breaking a bit that's why I can't see the full images and text,I know it should be something not quite right on the css for Woocommerce,I am trying to sort it out but still not work,can you advice me what should I do on the css to make it show on the page correctly please,anyway,it was a big help I got from you,I am grateful for that,you are a star,thank you very much,i am still working on the site to make it perfectly and I am feeling much better now,so one again thank you for your help and all the best to you Mark. :D

Muhammad Ehsan Hanif
Muhammad Ehsan Hanif
8,236 Points
Muhammad Ehsan Hanif
Muhammad Ehsan Hanif
8,236 Points

Hi Your theme is not woocommerce compatible. There are videos here on treehouse to make theme woocommerce compatible. Otherwise follow the guide below, it's pretty easy and straight forward if you know a little bit of coding which i hope you know. With just 4-5 line of code it will be all set.

https://docs.woocommerce.com/document/third-party-custom-theme-compatibility/

Thx