Cambiar de posición botón comprar

[Anamartin]

¡Hola! Me gustaría subir la posición del botón comprar para que se vea sin tener que hacer scroll en la página de producto. ¿Qué tipo de código debo modificar para que se muestre por ejemplo al lado del precio del producto? ¡Gracias!

[Rolige]

Hola,

Necesitas compartir la URL para ver cómo está estructurado.

 

Saludos!

[Anamartin]

¡Hola! Aquí está la URL de una página de producto https://abiebrown.es/inicio/495-organizador-verde-mar.html

¡Gracias!

[Anamartin]

¿Alguna idea?

[Rolige]

Lamento decirte que no es tan simple, el botón de comprar esta en un div que se usa para hooks adicionales, lo mas facil seria mover uno encima de otro, y eso lo puedes hacer desde el tpl del producto, basta con que inspecciones un poco el código fuente de la página y revises las clases para que identifiques los elementos.

[adriangb91]

Hola,

Una posible solución sería dejar el botón de "Comprar" flotante, para que independientemente de donde se encuentre el cliente vea a primera vista el botón de comprar. Para ello puedes modificar la id #add_to_cart de tu botón en tu CSS de la siguiente manera:

#add_to_cart {
    position: fixed;
    top: 250px;
    right: 10px;
}

Tu web quedaría de la forma que se ve en la imágen que adjunto. Ya es cuestión de ir alterando los valores y ponerla a tu gusto.

[burrots]

On 3/29/2019 at 6:55 PM, adriangb91 said:

Hola,

Una posible solución sería dejar el botón de "Comprar" flotante, para que independientemente de donde se encuentre el cliente vea a primera vista el botón de comprar.

Y q pasa con el responsive? 😉

Edited March 31, 2019 by burrots (see edit history)

[adriangb91]

En un principio no tienes por que tener problemas con el responsive, con utilizar las media query correspondiente para que se visualice de forma correcta en todos los dispositivos.

[burrots]

2 hours ago, adriangb91 said:

En un principio no tienes por que tener problemas con el responsive, con utilizar las media query correspondiente para que se visualice de forma correcta en todos los dispositivos.

claro, pr ponselo en la respuesta al muchacho pobrecito..... 😋

Edited April 1, 2019 by burrots (see edit history)

[adriangb91]

Genial, por mi parte no hay problemas por facilitar el código. Lo que tendrías que hacer sería incluir las media querys en tu fichero CSS de la siguiente forma:

@media only screen and (max-width: 600px) {
	
	/* Aqui establece los valores que adapten el 
	   boton a esta resolucion.	
	*/
	#add_to_cart{
		position: fixed;
		top: 250px;
		right: 10px;
	}
}


@media only screen and (min-width: 600px) {
	
	/* Aqui establece los valores que adapten el 
	   boton a esta resolucion.	
	*/
	#add_to_cart{
		position: fixed;
		top: 250px;
		right: 10px;
	}
}


@media only screen and (min-width: 768px) {
	
	/* Aqui establece los valores que adapten el 
	   boton a esta resolucion.	
	*/
	#add_to_cart{
		position: fixed;
		top: 250px;
		right: 10px;
	}
}


@media only screen and (min-width: 992px) {
	
	/* Aqui establece los valores que adapten el 
	   boton a esta resolucion.	
	*/
	#add_to_cart{
		position: fixed;
		top: 250px;
		right: 10px;
	}
}


@media only screen and (min-width: 1200px) {
	
	/* Aqui establece los valores que adapten el 
	   boton a esta resolucion.	
	*/
	#add_to_cart{
		position: fixed;
		top: 250px;
		right: 10px;
	}
} 

Espero que esto te ayude ;)

[burrots]

perfecto. yo creo q asi a kien le interese puede servirle más.

buena trabajo