gerardoboni
Respuestas de foro creadas
-
Foro: WooCommerce
En respuesta a: Boton comprar, personalizar funcioneste es el codigo html que le quiero insertar
<!DOCTYPE html>
<html>
<head>
<meta name=»viewport» content=»width=device-width, initial-scale=1″>
<style>
body {font-family: Arial, Helvetica, sans-serif;}/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}/* Modal Content */
.modal-content {
position: relative;
background-color: #fff;
margin: auto;
border-radius: 22px;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}/* The Close Button */
.close {
color: #000;
float: right;
font-size: 28px;
font-weight: bold;
}.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}.modal-header {
padding: 2px 16px;
text-align: center;
border-radius: 18px 18px 0px 0px;
background-color: #fff;
color: #000;
}.modal-body {
padding: 2px 16px;
height: 140px;
text-align: center;}
.modal-footer {
padding: 2px 16px;
background-color: #FFFFFF;
border-radius: 0px 0px 18px 18px;
color: white;
text-align: center;
}
</style>
</head>
<body><h2></h2>
<!– Trigger/Open The Modal –>
<button id=»button product_type_external»>comprar</button><!– The Modal –>
<div id=»myModal» class=»modal»><!– Modal content –>
<div class=»modal-content»>
<div class=»modal-header»>
<span class=»close»>×</span>
<h2>¡Hey! Abriremos una nueva pestaña</h2>
</div>
<div class=»modal-body»>
<p>Para continuar con tu compra te llevaremos directo a la tienda donde lo encontramos. </p>
<p>Pero no te preocupes, nosotros no nos iremos.</p>
</div>
<div class=»modal-footer»>
<h3></h3>
<button class=»enlace» role=»link» onclick=»window.location=’https://soymsi.com'»>soymsi.com</button>
<button class=»enlace» role=»link» onclick=»window.location=’https://soymsi.com'»>ir a la tienda</button></div>
</div></div>
<script>
// Get the modal
var modal = document.getElementById(«myModal»);// Get the button that opens the modal
var btn = document.getElementById(«button product_type_external»);// Get the <span> element that closes the modal
var span = document.getElementsByClassName(«close»)[0];// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = «block»;
}// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = «none»;
}// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = «none»;
}
}
</script></body>
</html>Foro: WooCommerce
En respuesta a: Boton comprar, personalizar funcionhola adrian gracias por comentar. he probado con insertar con codigo html al codigo php que tengo,y aun no me funciona o algo estoy haciendo mal.
estoy utilizando el plugins code SNIPPETS para agregar codigo php y personalizar el comportamiendo del boto comprar de mi woocomcerce .el codigo es la siguiente.
si alguien me podria decir en donde puedo insertar el codigo html que se ejecute cuando haga clic en comprar, se lo agradeceria
###############################################################################add_filter( ‘woocommerce_loop_add_to_cart_link’, ‘ts_external_add_product_link’ , 10, 2 );
remove_action(‘woocommerce_external_add_to_cart’, ‘woocommerce_external_add_to_cart’, 30 );
add_action( ‘woocommerce_external_add_to_cart’, ‘ts_external_add_to_cart’, 30 );
function ts_external_add_product_link( $link ) {
global $product;if ( $product->is_type( ‘external’ ) ) {
$link = sprintf( ‘%s‘,
esc_url( $product->add_to_cart_url() ),
esc_attr( isset( $quantity ) ? $quantity : 1 ),
esc_attr( $product->id ),
esc_attr( $product->get_sku() ),
esc_attr( isset( $class ) ? $class : ‘button product_type_external’ ),
esc_html( $product->add_to_cart_text() )
);
}
return $link;
}
###############################################################################- Esta respuesta fue modificada hace 6 años, 11 meses por gerardoboni.
Foro: WooCommerce
En respuesta a: Boton comprar, personalizar funcionhola fernando tellado, gracias por comentar..
si asi es, al darle clic en comprar en vez de abrir una nueva pestaña de donde viene el producto, quiero que me habrá una ventana emergente en la cual quiero poner un aviso. ejemplo:»esta a punto de salir de ‘mi pagina’ y al momento de dar aceptar que me mande a la otra pagina en otra ventana».
por el momento al darle clic en comprar solo me abre la otra ventana.
solo quiero incorporar el mensaje emergente. no tengo idea como hacerla.si me pueden ayudar se los agradecería muchísimo. 🙂
gracias:)
saludos!!