Botão de Comprar Fixo Desktop

Layout
1

Olá pessoal,

Estou com dificuldade de deixar o botão de comprar fixo no desktop.

Nenhum que tentei abaixo funcionou:

.listagem-item .acoes-produto {
  opacity: 1;
}

@media only screen and (max-width: 767px){
  #listagemProdutos.listagem .listagem-item .acoes-produto-responsiva,
  .listagem.aproveite-tambem .listagem-item .acoes-produto-responsiva {
    visibility: visible;
  }
  
  #listagemProdutos.listagem .listagem-item .acoes-produto-responsiva .tag-comprar i {
    display: none;
  }
  
  #listagemProdutos.listagem .listagem-item .acoes-produto-responsiva .tag-comprar span {
    font-size: 12px;
  }
  
  #listagemProdutos.listagem .listagem-item .acoes-produto-responsiva {
    position: unset!important;
  }
}

<style>
.listagem-item .acoes-produto.hidden-phone{bottom:40%!important;opacity:1!important;}
</style>

Será que alguém consegue me ajudar?
O site é: https://www.belezadivina.com.br/
E o fornecedor do tema já não presta mais suporte.

image
image1892×912 96.7 KB

2

Boa noite
Pode mandar um print de onde vc quer ajustar?

3

Oi @Paulo21,

Abaixo você pode reparar que meu cursor está em cima do primeiro produto. Os outros não aparecem. Gostaria que eles ficassem fixos.

image
image1416×506 96.4 KB

4

CSS

.listagem-item .acoes-produto {
    opacity: 1;
    border: none;
    transition: none 0s ease 0s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    bottom: 0;
    background: white;
}

.listagem-item .acoes-produto .botao-comprar {
    width: 90%;
    padding: 0px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1vw;
    font-weight: bold;
    border-radius: 2px;
    margin: 0px auto;
    color: white ;
    text-transform: lowercase;
    background: var(--cor-botao);
}

.listagem-item .acoes-produto .botao-comprar-ajax {
    width: 55%;
    margin: 0;
}

.listagem-item .acoes-produto .qtde-adicionar-carrinho {
    width: 35% ;
    display: flex;
    height: 100%;
}

.listagem-item .acoes-produto .qtde-adicionar-carrinho .qtde-carrinho {
    max-width: 40px;
    margin: 0px 10px;
    height: 40px;
    text-align: center;
    background: rgb(226, 226, 226);
    border: none;
    box-shadow: none;
}

image
image1385×536 123 KB

2 curtidas
5

Oi Leonardo,

Isso de fato me ajudou!

Gostaria só de separar o tamanho das fontes no desktop e mobile, porque 1vw fica muito pequeno no mobile, e se eu aumentar no desktop fica muito grande.

Além disso,
Estou com outro problema que não encontro a solução. Se você puder me ajudar ficarei grato:

image
image1919×907 348 KB

Os botôes alguns estão como: “adicionar” outros como: “comprar agora”.

Reparei que:

Botão “adicionar”: Está como: .listagem-item .acoes-produto .botao-comprar-ajax
Botão “comprar agora”: Está como: .listagem-item .acoes-produto .botao-comprar

Saberia dizer como eu altero o nome dos que estão adicionar para “comprar agora”?

6

CSS

@media only screen and (min-width: 1200px) {
    /*PC*/
    .listagem-item .acoes-produto .botao-comprar,
    .listagem-item .acoes-produto .botao-comprar:hover{
        font-size: 1vw!important;
    }
}
@media only screen and (max-width: 1200px) {
    /*mobile / table*/
    .listagem-item .acoes-produto .botao-comprar,
    .listagem-item .acoes-produto .botao-comprar:hover{
        font-size: 18px!important;
    }
}
7

CSS

@media only screen and (min-width: 1200px) {
    /*PC*/
    .listagem-item .acoes-produto .botao-comprar,
    .listagem-item .acoes-produto .botao-comprar:hover{
        font-size: 1vw!important;
    }
    .listagem-item .acoes-produto a.botao.botao-comprar.principal.botao-comprar-ajax {
        font-size: 0px!important
    }
    .listagem-item .acoes-produto a.botao.botao-comprar.principal.botao-comprar-ajax:after {
        font-size: 1vw!important;
        content: "Comprar Agora"
    }
}

@media only screen and (max-width: 1200px) {
    /*mobile / table*/
    .listagem-item .acoes-produto .botao-comprar,
    .listagem-item .acoes-produto .botao-comprar:hover{
        font-size: 18px!important;
    }
    .listagem-item .acoes-produto a.botao.botao-comprar.principal.botao-comprar-ajax {
        font-size: 0px!important
    }
    .listagem-item .acoes-produto a.botao.botao-comprar.principal.botao-comprar-ajax:after {
        font-size: 18px!important;
        content: "Comprar Agora"
    }
}