phpwoocommercewebshop

Add to cart button alignment needed on webshop


On my shop's front page, my products add to cart buttons is not aligned.

See this picture

enter image description here

A fix to this would be to just make the titles shorter or make every title be on 2 lines, but that would bring me more problems on my category pages.

Is there a way to just fix this here on the front page?


Solution

  • Option #1: Set position: relative and optionally a min-height on your li.product and set position: absolute and bottom: 0 on your [Add to cart] buttons in your theme's CSS. Note that your theme may be using different classes/IDs. If the ones I've used don't work, you'll need to inspect with your browser's inspector tools to see which to use for your theme:

    li.product {
      position: relative;
      min-height: 400px; // you may or may not need to set the height 
    }
    
    li.product a.button {
      position: absolute;
      left: 0; // combined with right: 0, will center the button
      right: 0; // combined with left: 0, will center the button
      bottom: 0;
    }
    

    Option #2: Set a min-height on your product's title (e.g., h2)

    li.product h2 {
      min-height: 100px; // Adjust to account for your shop's product with the longest title
    }