Suffusion and Woocommerce product alignment issue in product category

  • PatrickAtWMVA

    (@patrickatwmva)


    12 years 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

Viewing 5 replies - 1 through 5 (of 5 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years ago

    Because some of the products are taller than others

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years 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;
}

    Thread Starter PatrickAtWMVA

    (@patrickatwmva)

    12 years ago

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

    Thread Starter PatrickAtWMVA

    (@patrickatwmva)

    12 years ago

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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years ago

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

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Suffusion and Woocommerce product alignment issue in product category’ is closed to new replies.