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);
Raul Acho
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 +
Cristian Ramanzin
ProfesorSi, 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); }
