0

Como mover um botão (link) para a parte de baixo de uma DIV?

<div class="item-info">
   <h3><a href="https://www.lookandsoul.com.br/produto/cinto-fivela-dupla-preto/">Cinto fivela dupla preto</a></h3>
   <span class="product-terms">
      <a href="https://www.lookandsoul.com.br/moda-feminina/news/" rel="tag">News</a>,
      <a href="https://www.lookandsoul.com.br/moda-feminina/acessorios/" rel="tag">Acessórios</a>
   </span> 
   <a href="/?add-to-cart=6245" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart  is-textual product-type-simple" data-product_id="6245" data-product_sku="199000" aria-label="Adicionar “Cinto fivela dupla preto” no seu carrinho" rel="nofollow">
      Comprar
   </a>
   <span class="price">
      <span class="woocommerce-Price-amount amount">
         <span class="woocommerce-Price-currencySymbol">R$</span>
         69,90
      </span>
      <span class="wc-simulador-parcelas-parcelamento-info-container">
         <span class="wc-simulador-parcelas-parcelamento-info best-value no-fee">
            Em até 1x de
            <span class="woocommerce-Price-amount amount">
               <span class="woocommerce-Price-currencySymbol">R$</span>
               69,90
            </span>
         </span>
      </span>
   </span>
</div>

Quero mover a classe BUTTON para baixo da classe ITEM-INFO.

Do ponto 1 para o 2.

EXEMPLO DO QUE ESTOU TENTANDO FAZER

Segue print do código CSS

Print do código CSS

3
  • 1
    Teria que ver quais as propriedades tem o botão "comprar". Se puder tirar um print da ferramenta "inspecionar" mostrando o CSS do botão iria ajudar a dar uma resposta.
    – Meu ovo
    21/09/2018 às 22:23
  • Esse CSS mostrado vc consegue alterar ou são do tema?
    – Meu ovo
    21/09/2018 às 23:14
  • É do tema. Mas consigo colocar um CSS sobrepondo.
    – rodrigom
    22/09/2018 às 3:28

2 Respostas 2

0

Altere a posição do HTML do botão, colocado-o abaixo de <span class="price">:

<div class="item-info">
   <h3><a href="https://www.lookandsoul.com.br/produto/cinto-fivela-dupla-preto/">Cinto fivela dupla preto</a></h3>
   <span class="product-terms">
      <a href="https://www.lookandsoul.com.br/moda-feminina/news/" rel="tag">News</a>,
      <a href="https://www.lookandsoul.com.br/moda-feminina/acessorios/" rel="tag">Acessórios</a>
   </span> 
   <span class="price">
      <span class="woocommerce-Price-amount amount">
         <span class="woocommerce-Price-currencySymbol">R$</span>
         69,90
      </span>
      <span class="wc-simulador-parcelas-parcelamento-info-container">
         <span class="wc-simulador-parcelas-parcelamento-info best-value no-fee">
            Em até 1x de
            <span class="woocommerce-Price-amount amount">
               <span class="woocommerce-Price-currencySymbol">R$</span>
               69,90
            </span>
         </span>
      </span>
   </span>
   <a href="/?add-to-cart=6245" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart  is-textual product-type-simple" data-product_id="6245" data-product_sku="199000" aria-label="Adicionar “Cinto fivela dupla preto” no seu carrinho" rel="nofollow">
      Comprar
   </a>
</div>

Para centralizar, utilize o estilo abaixo, ele deverá sobrepor o estilo padrão caso você não consiga alterá-lo:

div.item-info a.add_to_cart_button{
   position: relative;
   top: 0;
   right: 0;
   display: inline-block;
   left: 50%;
   -webkit-transform: translate(-50%);
   transform: translate(-50%);
   background: yellow;
}

Talvez seja necessário fazer um espaçamento acima do botão, então inclua mais uma propriedade margin-top: 15px; (altere o 15px conforme ache melhor).

4
  • Esqueci de comentar que é Wordpress. Como alteraria o HTML?
    – rodrigom
    22/09/2018 às 3:29
  • 1
    Aí eu já não sei, teria que achar o arquivo que contém esse HTML. Mas é possível fazer uma gambi e mudar a posição dos elementos via JavaScript.
    – Meu ovo
    22/09/2018 às 3:31
  • Eu tentei, mas não consegui colocar em baixo. Ficou no meio do preço. Consegue me dar uma luz do código que usou?
    – rodrigom
    22/09/2018 às 3:32
  • Coloque o CSS que coloquei na resposta e use isto no seu JS para ver se funciona: $(window).on("load", function(){ $("a.add_to_cart_button", ".item-info").appendTo(".item-info"); });
    – Meu ovo
    22/09/2018 às 3:38
0

Tenta fazer uma div que inclui todo esse texto que você tá pondo nessa área menos o botão, daí você colocar as propriedades do flex na div que engloba os dois:

display: flex;

align-items: center;

justify-content: center;

flex-direction: column;

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .