Botão de comprar está em cima do preço

jbbmagnetico · Dezembro 17, 2020, 2:09pm

Bom dia alguém pode me ajudar quando passo o mouse sobre o produto o botão de compra sobrepõe o preço queria abaixar um pouco.

Jose_Claudio_Alvarez · Dezembro 17, 2020, 2:17pm

Você só precisa inserir esse CSS e alterar o valor do bottom até o botão ficar na posição desejada:

.listagem-item:hover .acoes-produto {
    bottom: 0%;
    padding: 0;
}

jbbmagnetico · Dezembro 17, 2020, 2:35pm

ha blz amigo no caso eu vou em editar css e só colo o codigo né

Jose_Claudio_Alvarez · Dezembro 17, 2020, 2:43pm

Exatamente. É só adicionar esse código no “Editar CSS”.

jbbmagnetico · Dezembro 17, 2020, 3:59pm

Deu certo amigo muito obrigado. agora tem como diminuir um pouco ? ele estar saindo um pouco do quadrado kkk . site : https://www.jbbmagnetico.com.br/

Jose_Claudio_Alvarez · Dezembro 17, 2020, 4:05pm

Tenta alterar o valor do padding, por exemplo usando padding: 15px;

jbbmagnetico · Dezembro 17, 2020, 4:24pm

nao deu certo o botão subiu p preço era tipo diminuir o tamanho do botaão que ta muito grande teria outra possibilidade ?

Jose_Claudio_Alvarez · Dezembro 17, 2020, 4:28pm

Ah não, você colocou 10% no padding, tenta trocar por 15px ou diminui esse valor para 7% ou 8%.

Jose_Claudio_Alvarez · Dezembro 17, 2020, 4:31pm

Se mesmo assim continuar grande, adiciona esse CSS:

.listagem-item .acoes-produto a.botao-comprar {
    width: auto;
}

Se não ficar bom, no width você vai testando alguns valores como 80%, 70%.

jbbmagnetico · Dezembro 17, 2020, 4:31pm

obrigado irmão funcionou certinho vc salvo minha vida hehe

jbbmagnetico · Dezembro 17, 2020, 4:36pm

era isso mesmo que eu queria diminuir o botão amigo obrigado. agora é so o quadrado que ta c om pouco esapços mas vou deixar assim acho que ta bom né

jbbmagnetico · Dezembro 17, 2020, 4:40pm

amigo você sabe como altero o tamanho dos preços nesse mesmo lugar onde arrumamos o botaão ?

Jose_Claudio_Alvarez · Dezembro 17, 2020, 4:46pm

Você quer alterar os textos relacionados só ao preço?

jbbmagnetico · Dezembro 18, 2020, 5:09pm

isso queria da uma diminuida um do outro porque está muito grande

Jose_Claudio_Alvarez · Dezembro 19, 2020, 11:43am

Sua loja está em manutenção? Não estou conseguindo acessá-la.

jbbmagnetico · Dezembro 19, 2020, 1:37pm

Desculpe quando vou ativa-la agora

jbbmagnetico · Dezembro 19, 2020, 1:42pm

amigo achei um codigo aqui de um membro para melhorar o checkuot fica mais rapido você sabe onde coloco esse codigo ?

CSS

#formularioCheckout .row-fluid {
margin-top: 20px;
display: block!important;
}

.campos-pedido .row-fluid .resumo-compra{
display: table-cell;
float: right;
width: 100%;
min-height: 30px;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.campos-pedido #login-content {
display: inline-block;
display: table-cell;
float: left;
width: 50%;
min-height: 30px;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.carrinho-checkout .identificacao .identificacao-inner {
padding: 0px 0 0px;
}
.carrinho-checkout .identificacao {
margin-bottom: 0px;
}

@media only screen and (max-width: 767px){
.campos-pedido #login-content {
display: block;
float: none;
width: 100%;
min-height: 30px;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.campos-pedido .row-fluid .resumo-compra {
display: block;
float: none;
width: 100%!important;
min-height: 30px;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#formularioLogin > div > div.login-data.hide > div > a {
display: inline-block;
float: none;
}
}

JS

(document).ready(function(){ (“body.carrinho-checkout”).length && function (){
(".campos-pedido #login-content .identificacao").css(“display”, “none”); (".campos-pedido #formularioCheckout .row-fluid.hide").removeClass(“hide”);

            $(document).on( "click", ".campos-pedido .fazer-login-btn", function(){
            $(".campos-pedido #login-content .identificacao").slideDown("display", "block");
            $(".campos-pedido .row-fluid .resumo-compra").css("width", "50%");
        });
            $(document).on( "click", ".campos-pedido .fazer-cadastro", function(){
            $(".campos-pedido #login-content .identificacao").slideUp("display", "none");
            $(".campos-pedido .row-fluid .resumo-compra").css("width", "100%");
        });
        
        $(".campos-pedido .checkout-alerta-seguro").remove();
        
        $("#corpo > div > div.secao-principal.row-fluid.sem-coluna > div.campos-pedido > div.campos-pedido > div.row-fluid > div").prepend($(".campos-pedido #login-content"));
        
        
    }()

});

Jose_Claudio_Alvarez · Dezembro 19, 2020, 2:21pm

Essa parte vai no “Editar CSS”:

#formularioCheckout .row-fluid {
	margin-top: 20px;
	display: block!important;
}

.campos-pedido .row-fluid .resumo-compra{
	display: table-cell;
	float: right;
	width: 100%;
	min-height: 30px;
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.campos-pedido #login-content {
	display: inline-block;
	display: table-cell;
	float: left;
	width: 50%;
	min-height: 30px;
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.carrinho-checkout .identificacao .identificacao-inner {
	padding: 0px 0 0px;
}
.carrinho-checkout .identificacao {
	margin-bottom: 0px;
}

@media only screen and (max-width: 767px){
	.campos-pedido #login-content {
	display: block;
	float: none;
	width: 100%;
	min-height: 30px;
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}
	.campos-pedido .row-fluid .resumo-compra {
	display: block;
	float: none;
	width: 100%!important;
	min-height: 30px;
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}
	#formularioLogin > div > div.login-data.hide > div > a {
	display: inline-block;
	float: none;
	}
}

Esse vai em “Incluir HTML” e você salva como JavaScript no rodapé, provavelmente da página do checkout, mas você pode salvar também em todas as páginas só por precaução:

(document).ready(function(){
	(“body.carrinho-checkout”).length && function (){
		(".campos-pedido #login-content .identificacao").css(“display”, “none”);
		(".campos-pedido #formularioCheckout .row-fluid.hide").removeClass(“hide”);
            $(document).on( "click", ".campos-pedido .fazer-login-btn", function(){
				$(".campos-pedido #login-content .identificacao").slideDown("display", "block");
				$(".campos-pedido .row-fluid .resumo-compra").css("width", "50%");
			});
            $(document).on( "click", ".campos-pedido .fazer-cadastro", function(){
				$(".campos-pedido #login-content .identificacao").slideUp("display", "none");
				$(".campos-pedido .row-fluid .resumo-compra").css("width", "100%");
			});
        
        $(".campos-pedido .checkout-alerta-seguro").remove();
        
        $("#corpo > div > div.secao-principal.row-fluid.sem-coluna > div.campos-pedido > div.campos-pedido > div.row-fluid > div").prepend($(".campos-pedido #login-content"));
    }()
});

jbbmagnetico · Dezembro 19, 2020, 2:29pm

blz vou fazer agora obrigado

jbbmagnetico · Dezembro 19, 2020, 2:34pm

amigo vc sabe pq no botão agora de compra o carrinho sumiu e ta aparecendo uma lupa

os só um ta aparecendo o carrinho

Tópico		Respostas	Visualizações
Alterar largura Botão comprar Layout	11	604	23 de Dezembro de 2020
Alteração de CSS Layout	13	1187	9 de Julho de 2020
Alteração no botão de comprar do produto Layout	9	619	26 de Novembro de 2020
Botão visível na listagem de produtos Layout	10	558	7 de Dezembro de 2022
Botão no rodapé do site está com o efeito hover travado Código CSS/HTML	3	336	26 de Agosto de 2021

Botão de comprar está em cima do preço

Tópicos relacionados