Personalizando el botón de Añadir a carrito

Clase 9 de 12 • Curso de Creación de Temas para WooCommerce

Andrés Felipe Patiño Vallejo

student•

Esto es información que vale oro! Felicitaciones Cristian.

Julián Andrés Loaiza Ospina

student•

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

student•

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

teacher•

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().

Christopher Joel Delvicier Palacios

student•

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);
}

/**
 * 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' );

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);

/* 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);
}

Personalizando el botón de Añadir a carrito

Preparando nuestro proyecto

Configuración de StormFront y WooCommerce para eCommerce

Instalación de Storefront y WooCommerce en WordPress

Creación y uso de temas hijo en WordPress

Convirtiendo nuestro theme en child theme de StoreFront

Extendiendo nuestro Theme

Aprovechando las funcionalidades de StoreFront

Adaptando nuestro theme base

Remplazando las vistas de WooCommerces desde nuestro theme

Personalizando la lista de productos.

Personalizando el botón de Añadir a carrito

Agregando elementos a nuestro producto

Ajustes finales

Finalizando nuestro proyecto

Cierre del curso