Criando elemento de página de produto

Código CSS/HTML
1

Tenho um elemento em HTML feito por mim mesmo e preciso colocá-lo dentro dessa parte assinalada na imagem, entre o preço do produto e o cálculo de frete. Alguém poderia me ajudar com o código para o botão entrar na posição correta.

image

O botão:

image

O html do botão:
image

link do botão: https://forms.gle/HppPVi3pcNYDm5c17

CSS do botão:

.btn-primary{
background-color:#E40000;
color: #ffffff;
padding: 7px 10px;
border: 2px solid #E40000;
border-radius: 30px;
font-size: 15px;
cursor: pointer;
font-weight: 500;
font-family: Sora, sans-serif;
text-decoration: none;
text-align: center;
}

.btn-primary:hover{
background-color: rgba(var(–cor-primaria-),.8);
color: #E40000;
border: 2px solid;
}

2

Olá @LeandroBS, tenta o seguinte código:

$(function(){
$(‘.btn-primary’).InsertAfter(‘.produto .acoes-produto .preco-produto’);
}); ou tenta trocando o “InsertAfter” por “append ou prepend”

2 curtidas
3

Como eu escrevo os códigos, depois de qual linha?

4

$(function(){$(‘.btn-primary’).insertAfter(‘.produto .acoes-produto .preco-produto’);});

Vai em Incluir html, coloca java script e rodapé, copia o código e ver se vai funcionar

1 curtida
5

Vou tentar agora, obrigado.

6

Não funcionou desse jeito.

7

Na verdade acabei de ver aqui, não vai funcionar dessa forma, por que tu criou o botão de forma nativa só em HTML, não vai conseguir posicionar ele de forma nativa

8

Nesse caso haveria alguma forma?

9

Pera ae vou criar outro código que vai funcionar

1 curtida
10

Obrigado pela ajuda!

12 
$(function(){$('.acoes-produto .preco-produto').prepend('<a href="O LINK" class="Envie seus arquivos aqui" rel="nofollow" data-placement="left"></i>Envie seus arquivos aqui</a>');});

Troca também o CSS para:

a.Envie.seus.arquivos.aqui {

  1. background-color: #E40000;
  2. color: #ffffff;
  3. padding:7px 10px;
  4. border: 2px solid #E40000;
  5. border-radius:
    30px;
  6. font-size: 15px;
  7. cursor: pointer;
  8. font-weight: 500;
  9. font-family: Sora, sans-serif;
  10. text-decoration: none;
  11. text-align: center;
    }
13

Tá quase lá:
image

Vou tentar mexer um pouco no CSS

14

O CSS é só renomear a nova div pow, .btn-primary por a.Envie.seus.arquivos.aqui

15

Ficou em cima do numero

image

17

Colocar aquela margem?

18

Você vai fazer o seguinte, por que não coloca esse botão abaixo dos atributos?

19

Se quiser fazer isso troca o código do Java script: .acoes-produto .preco-produto PELO CÓDIGO .produto .principal .atributos

20

Pra fazer isso excluir os código que eu te passei e segue esses agora…

$(function(){$('.produto .principal .atributos').append('<a href="O LINK" class="Envie seus arquivos aqui" rel="nofollow" data-placement="left"></i>Envie seus arquivos aqui</a>');});

E O CSS

.produto .principal .atributos {
    padding-bottom: 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.Envie.seus.arquivos.aqui {
    background-color: #E40000;
    color: #ffffff;
    padding: 7px 10px;
    border: 2px solid #E40000;
    border-radius: 30px;
    font-size: 15px;
    cursor: pointer;
    font-weight: 500;
    font-family: Sora, sans-serif;
    text-decoration: none;
    text-align: center;
    margin-top: 15px;
}
21

image
image1440×900 196 KB

ficaria assim

1 curtida
22

Vou fazer assim então.