WordPress.org

Forums

Suffusion and Woocommerce product alignment issue in product category (6 posts)

  1. PatrickAtWMVA
    Member
    Posted 11 months ago #

    First I want to express how much I'm loving suffusion. This problem has more to do with the incorporation of woocommerce and less to do with this awesome them. So on to the problem I'm having:

    I used the recommended CSS code in custom includes to successfully align the products on my main woocommerce page: http://breakingthefreewillillusion.com/store/

    Looks great, each row has products.

    But when I click on a category (called "shirts") the products misalign: http://breakingthefreewillillusion.com/product-category/shirts/

    The first row looks fine but the second row has a product in the middle and pushes all other products to the third row.

    This is the CSS I'm currently using:

    /* woocommerce product display*/
    .woocommerce .products ul, .woocommerce ul.products, .woocommerce-page .products ul, .woocommerce-page ul.products {clear: both;float: left;width: 100%;}
    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {width: 21.5%;clear: none;min-height:220px;}
    
    /* woocommerce related products*/
    .woocommerce .related ul.products li.product, .woocommerce-page .related ul.products li.product, .woocommerce .upsells.products ul.products li.product, .woocommerce-page .upsells.products ul.products li.product, .woocommerce .related ul li.product, .woocommerce-page .related ul li.product, .woocommerce .upsells.products ul li.product, .woocommerce-page .upsells.products ul li.product {width: 21.5%;clear: none;min-height:220px;}
    
    /* No border at woocommerce product-category page*/
    div.product.status-publish {clear: both;float: left;width: 100%;border:none;}

    I've tried a number of different variations. Any help with this problem would be greatly appreciated. I've been looking everywhere and can't find if there is a different CSS code I need to use to fix the "product-category" pages.

    Thanks,
    'Trick

  2. Andrew
    Forum moderator
    Posted 11 months ago #

    Because some of the products are taller than others

  3. Andrew
    Forum moderator
    Posted 11 months ago #

    Increase the min-height of the products from 220px to 285

    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product {
     min-height: 285px;
    }
  4. PatrickAtWMVA
    Member
    Posted 11 months ago #

    I sized the images all the same, and the primary page works fine. It's strange.

  5. PatrickAtWMVA
    Member
    Posted 11 months ago #

    Andrew, You are a genius! That worked. Thank you thank you thank you!!
    It's been driving me up a wall for hours.

  6. Andrew
    Forum moderator
    Posted 11 months ago #

    That's okay, it's a common problem in e-commerce sites

Reply

You must log in to post.

About this Topic