Search code examples
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
    }