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.

2 Comments

  1. deu certo obg! porém para celular continua desalinhado, como posso resolver o alinhamento dos botões de celular?

    1. Opa! O código foi criado para apenas funcionar em telas mais largas que 768px, mas você pode remover esse limite deletando a linha @media screen and (min-width: 768px) { e também o último } que você vê no código!

Leave a Comment

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *