Support » Plugin: WooCommerce » WooCommerce Styling issues

  • Resolved r_chee


    Hi guys, I really hope someone can help me with this, it is driving me mad. I have installed WooCommerce on an off-line test site on a default theme (TwentyThirteen) and it works and looks great.

    When applying it to a theme I have developed however, the styling of the products completely break and display in a vertical list, with the links styled as per the rest of my page.

    I’ve tried all the instructions on the WooCommerce website to integrate it to my theme (both methods of either using a catch all page, or adding hooks), and all of this still results in the same broken layout.

    Now, through many hours of looking in to this and comparing my theme to that of TwentyThirteen, I have noticed that when I render the page, the ‘
    ul and li tags of the products on 2013 theme are using woocommerce.css, and on mine just the styles I had already set.

    So for some reason 2013 theme can look at the woocommerce stylesheet, and my theme can’t. All the settings for WooCommerce are identical as I am just switching themes.

    I have declared my style.css in my header but nothing else regarding enqueuing scripts etc. Is this where I am going wrong? And if that is the case could someone point me in the right direction on what to put either in my header or functions.php please to make it work? I seem have no trouble with any other plugin I use on my own theme.

    My sincere apologies if I don’t make sense or am asking a stupid question thats already been answered, just that from my research so far I keep getting led back to pages I have already read or have tips that I have already tried.

    Thanks for your time reading this and any advice you can give me. 🙂

Viewing 7 replies - 1 through 7 (of 7 total)
  • Have you checked the settings to make sure that you have activated the WooCommerce stylesheet? If that’s not already familiar to you, you can check it at WooCommerce > Settings > General where there’s a checkbox for “Enable WooCommerce CSS.”

    If that doesn’t fix your issue, what’s the URL of a page where this is happening?

    Hi, thanks for you reply.

    Yes I have enabled the WooCommerce stylesheet, and on a default wordpress supplied theme it works, just switching to my theme breaks it.

    As far as I can tell I have no other mentions to jQuery on my page, it is simply called in my Functions.php, indeed adding a little script to test jQuery shows me that it works – and yet WooCommerce still just shows all the products in one long vertical list.

    I’m afraid the installation is on an offline test environment so I can’t show a link to the site. However, the code I am using in my Functions.php to enqueue jQuery is

    if ( !is_admin() ) {
          wp_register_script('jquery', (""), false, '1.10.2');

    And thats it, no mention of it my header, and according to posts have read as long as jQuery is not conflicting it should work….. what am I missing?

    After my 3rd day of debugging I’ve got it. And it wasn’t what I expected – but then again I am still but a novice. One piece of code was wrong.

    JQuery was fine, in fact everything was except the <body> opening tag in my theme.

    Once I changed it to <body <?php body_class(); ?>> it all worked fine.

    Not sure why that would be but there you go. Thought I’d paste the result on the off chance it helps someone else!

    Thanks for your input thefieldset.

    Glad this worked out!

    My problem is same.

    Can you tell me, which file must i change the body tag?

    Thank you!

    I found it. It was in the header.php. 🙂

    Thank you so much! 🙂


    i too had the same prob!

    <body <?php body_class(); ?>> i was missing this.

    Thank you

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘WooCommerce Styling issues’ is closed to new replies.