Aligning products in WooCommerce WordPress plugin

4 Views

I’m using the WooCommerce plugin for WordPress, but I can’t seem to get my products aligned right. When images are different sizes, the product names and prices aren’t aligned. How can I fix this? It needs to be a pure CSS solution.

HTML:

Read More
<ul class="products">
  <li class="product">
    <a href="http://renservice.dk/produkt/hmk-m529-reparationssaet-marmor/">
            '<img width="246" height="300" src="http://renservice.dk/wp-content/uploads/2016/01/HMK-M529-Reparationssæt-til-marmor-246x300.jpg">
        <h3>HMK M541 Plejesæt til natursten</h3>
        <span class="price">
                <span class="amount">363,75&nbsp;DKK</span>
          <small class="woocommerce-price-suffix">inkl. moms
                    <span class="amount">291,00&nbsp;DKK</span>
                </small>
            </span>
        </a>
  </li>
  <li class="product">
    <a href="http://renservice.dk/produkt/hmk-m541-plejesaet-til-natursten/">
      <img width="300" height="268" src="https://www.natursteinpflege24.de/media/image/22/cc/9a/HMK-M541-Naturstein-Pflegeset564dbdd087b73.jpg">
      <h3>HMK M541 Plejesæt til natursten</h3>
      <span class="price">
                <span class="amount">363,75&nbsp;DKK</span>
      <small class="woocommerce-price-suffix">inkl. moms
                    <span class="amount">291,00&nbsp;DKK</span>
                </small>
      </span>
    </a>
  </li>
  <li class="product">
    <a href="http://renservice.dk/produkt/hmk-p301-3-i-1/">
      <img width="131" height="300" src="http://renservice.dk/wp-content/uploads/2016/01/HMK-P301-3-i-1-131x300.jpg">
      <h3>HMK P301 3-i-1</h3>
      <span class="price">
            <span class="amount">178,13&nbsp;DKK</span>
      <small class="woocommerce-price-suffix">inkl. moms
            <span class="amount">142,50&nbsp;DKK</span>
                </small>
      </span>
    </a>
  </li>
</ul>

CSS: 

ul.products {
  margin: 0 0 1em;
  padding: 0;
  list-style: none;
  clear: both;
  display: block;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 40px;
}

ul.products::before,
ul.products::after {
  content: " ";
  display: table;
}

ul.products li.product {
  float: left;
  margin: 0 3.8% 2.992em 0;
  padding: 0;
  position: relative;
  width: 22.05%;
  text-align: center;
  list-style: none;
  display: list-item;
  color: #141412;
  line-height: 1.5;
  font-family: "Source Sans Pro", Helvetica, sans-serif;
  font-size: 100%;
}

ul.products li.product a {
  text-decoration: none;
  color: #ca3c08;
}

ul.products li.product a img {
  margin-left: auto;
  margin-right: auto;
  height: auto;
  display: block;
  margin: 0 0 1em;
  box-shadow: none;
  width: auto;
  max-width: 100%;
  border: 0;
  vertical-align: middle;
}

ul.products li.product a h3 {
  padding: .5em 0;
  margin: 0;
  font-size: 1em;
  font-family: "arial black", arial, helvetica, sans-serif;
  letter-spacing: -0.070em;
  line-height: 1.3;
  color: #333333;
  display: block;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  font-weight: bold;
}

ul.products li.product a .price {
  color: #77a464;
  display: block;
  font-weight: 400;
  margin-bottom: .5em;
  font-size: .857em;
  visibility: collapse;
}

ul.products li.product a .price .amount {
  visibility: visible;
}

ul.products li.product a .price .woocommerce-price-suffix {
  visibility: visible;
}

ul.products li.product a .price .woocommerce-price-suffix .amount {
  display: inline;
  white-space: pre;
  color: #CCCCCC;
  visibility: visible;
}

ul.products li.product a .price .woocommerce-price-suffix .amount::before {
  content: 'A(' !important;
}

ul.products li.product a .price .woocommerce-price-suffix .amount::after {
  content: ' ekskl. moms)';
}

https://jsfiddle.net/zs3Lrg10/

Post Views: 4

Related posts

2 comments

  1. Since your images are variable in size, you can specify a fixed height value for all the images and set width to auto:

    ul.products li.product a img {
  ...
  height: 150px;
  width: auto;
  ....
}

    Updated solution

    There are two steps which need to be considered.

    Use flexbox and align product items flex-end which will position the items at the bottom of the container. Also 

    ul.products {
  ...
  /*display: block */;
  display: flex;
  flex-wrap: wrap; /* allow items to be flowed on multiple lines */
  align-items: flex-end;
}

    After this update, it is easily seen that the producs name and prices still are not correctly aligned because some names might span over 2 or more rows. For this you could specifying a min-height value for the header tags:

    ul.products li.product a h3 {
  ...
  min-height: 40px;
}

    In order to maintain the alignment for smaller viewports, you could use javascript to calculate the min-height based on the height of the heighest header tag. Hopefully I explained clear enough.

    Please see updated fiddle.

  2. I found a solution myself. Added this to the CSS:

    ul.products li.product a {
    height: 425px;
    display: block;
}
ul.products li.product a h3 {
    position: absolute;
    bottom: 50px;
    width: 100%;
    height: 50px;
}
ul.products li.product a .price {
    position: absolute;
    bottom: 0;
    width: 100%;
}

    Seems to work 🙂

Comments are closed.