Clase 9 de 12 • Curso de Creación de Temas para WooCommerce
Contenido del curso
Andrés Felipe Patiño Vallejo
Julián Andrés Loaiza Ospina
Raul Acho
Cristian Ramanzin
Christopher Joel Delvicier Palacios
Esto es información que vale oro! Felicitaciones Cristian.
Personalizar botón “añadir carrito”
Para eliminar el carrito por defecto de woocommerce y agregar el nuestro con diseño personalizado debemos revisar el action que se encarga de traer el carrito y observar las funciones que lo componen:
/** * Hook: woocommerce_after_shop_loop_item. * * @hooked woocommerce_template_loop_product_link_close - 5 * @hooked woocommerce_template_loop_add_to_cart - 10 */ do_action( 'woocommerce_after_shop_loop_item' );
Indica que está compuesta por dos funciones una para cerrar el link y otra agrega el carrito, que en este caso necesitamos remover aquella acción. functions.php
remove_action("woocommerce_after_shop_loop_item", "woocommerce_template_loop_add_to_cart", 10);
ahora debemos agregar la función que muestre el carrito teniendo en cuenta que se agreguen las direcciones correspondientes a las imágenes.
function plz_add_to_cart(){ global $product; ?> <a href="<?php echo $product->add_to_cart_url();?>" class="productos__add-to-cart"> <img src="<?php echo get_stylesheet_directory_uri();?>/assets/img/add-to-cart.svg" alt="agragar al carrito"> </a> <?php } add_action("woocommerce_after_shop_loop_item","plz_add_to_cart",10);
Buenas tardes Profesor, una consulta, como puedo hacer para que en vez del "agregar al carrito" en "archive page", no me muestre "ver carrito", sino botones de cantidad - 1 +
Si, podés. El botón de + sería el que vemos en la clase, y el de - sería exatamente igual nada más que en vez de usar el método add_to_cart() usas el método get_remove_url().
Tambien es posible modificarlo así, pero esto afecta a todos los botones del tema.
/* Botones Woo */ .woocommerce .button { border: none; border-radius: 45px; transition: all 0.3s ease 0s; box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); } .button:hover { background-color: #7363ee; box-shadow: 0px 15px 20px rgba(101, 46, 229, 0.3); color: #fff; transform: translateY(-5px); } .button:active { transform: translate(-1px); }
