Home>Support>Woo commerce layout wrong, product page

Woo commerce layout wrong, product page

By Joey Koelewijn, 9 years ago. Last reply by Andrew Misplon, 9 years ago.

Hello,

After searching and trying out different css codes, I still could not figure it out to display correctly. The layout is completely wrong.

When you see my site, you will know what I mean. If possible I would like to have same thumbail pictures whit even spacing in between. Also on the single product page, the “gerelateerde producten” pictures are to big.

Can you please advice me with css codes.

Many thanks, Joey

URL: http://noa-actief.nl/winkel-online/

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 7 months ago Daniel
    Hi, I Work Here

    Hi Joey,

    Kindly place the following css at the Custom CSS section:

    For even spacing

    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
padding: 10px 25px!important;
}

    re-sizing pictures

    img.attachment-shop_catalog.wp-post-image {

height:150px!important;
}

    You can change the size in px to meet your requirements

    Try that out and let me know the outcome.

    Cheers

  2. 9 years, 7 months ago Joey Koelewijn

    Thanks Addo for the reply. Unfortunately this did nog worked out the way it was meant.

    If you take a look at the page now you can still see the layout is way off as what is should be. What I would like to have is, 3 products next to each other with same picture sizes. Pictures should al start at same height lines ant width lines.

    If you also could inform me about how to remove the page title and the “nav class” titles? This titles together make no sense and are to huge for me. Thanks and hope to hear soon from you.

    Cheers

  3. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    Hi Joey

    Apologies for the hassle. If we can just work this page first:

    http://noa-actief.nl/winkel-online/

    If I remove all of your Custom CSS there is still a problem, it looks like it starts with differing image heights, WooCommerce styles don’t appear to handle that. Please try running the following plugin and see if that helps our image situation:

    http://wordpress.org/plugins/regenerate-thumbnails/

  4. 9 years, 7 months ago Joey Koelewijn

    It is still not very good. I am missing two products on the second row. If I add products they will not show up on these spots but simple at the bottom. Any other thoughts?

    Thanks

  5. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    Thanks. Try testing without any of your Custom CSS added, that’s much better. The only remaining issue (with no Custom CSS) is that your button text is creating a button width that’s too wide for the product container. So try this, temporarily remove all Custom CSS and add back only this selector:

    .woocommerce #page-wrapper .button {
font-size: 11px;
}

    You should now be back to normal. From there you could slowly add back your Custom CSS, one selector at a time and try figure out where things go wrong.

  6. 9 years, 6 months ago Joey Koelewijn

    Perfectly working now. Except the thumbnails are blurry. Do you have a quick fix for this s well?

    Now the other thing is that I like to give the customers the opportunity to add their reviews/meanings on the products. I checked the box in the product page and in settings but it is not showing up. Any thoughts on this?

    Thanks!!!

  7. 9 years, 6 months ago Andrew Misplon
    Hi, I Work Here

    Glad to hear you’re making progress. Looks like there is currently a front facing PHP error on your shop page. Please let us know once you’ve had a chance to resolve that and I’ll jump in and take a look at the image issue.

  8. 9 years, 6 months ago Joey Koelewijn

    I figured it out, I think! Everything works perfectly now!

    The only request I have now is how to enable the reviews boxes? I enabled it in woo commerce settings and as well on the product pages. Unfortunately no review box is present….. Can you please take a look at this?

    Thanks a lot.

  9. 9 years, 6 months ago Andrew Misplon
    Hi, I Work Here

    Super, really glad to hear you’ve made progress here. I don’t think it’ll be possible for me to immediately tell what’s up with reviews not displaying. Can you perhaps run through the advice offered here and see how you come along:

    http://stackoverflow.com/questions/23591938/reviews-are-not-working-in-woocommerce

    Thanks

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More