Categorias
Web

WooCommerce: como alinhar verticalmente os botões de compra

O WooCommerce conta agora com blocos que facilitam a criação de páginas personalizadas de produtos e uma das vantagens ao usar os blocos é a facilidade de alinhar o último elemento (por padrão, o botão) de cada produto listado.

Baita mão na roda

Essa opção, porém, não está disponível para sites ainda utilizando o shortcode [products] Nesse caso, ou você usa um plugin como o Woo Align Buttons ou adiciona um código CSS ao seu site:

/* WooCommerce Products Shortcode: bottom-align buttons -- https://wp.me/paOFn3-TO */
@media screen and (min-width: 768px) {  
  ul.products {
    display: flex;
    flex-wrap: wrap;
  }
   
  ul.products li.product {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
   
  ul.products li.product .button {
    align-self: center;
  }
}

E segue o resultado:

Imagens que trazem paz: botões propriamente alinhados

Caso queira mudar o alinhamento dos botões, mude o valor do align-self para um outro qualquer.

Deixe uma resposta