El botón «Añadir al carrito» de WooCommerce permite a los clientes comprar fácilmente artículos de tu tienda online. Cuando un cliente hace clic en el botón «Añadir a la cesta», el artículo se añade a su cesta de la compra, y puede seguir comprando o pasar al proceso de pago.
Este botón te ayuda a agilizar el proceso de compra para tus clientes, facilitándoles la tarea de añadir artículos a su cesta y completar sus compras. Sin embargo, puede que necesites personalizarlo para aumentar las ventas y mejorar la experiencia general del usuario para tus clientes.
En este tutorial, te contaré las ventajas de un botón de añadir al carrito personalizado y cómo puedes personalizarlo en tu tienda WooCommerce.
Ventajas del botón personalizado Añadir al carrito
Utilizar un botón personalizado «Añadir al carrito» en WooCommerce tiene varias ventajas. Déjame que te cuente 3 de ellas.
- Estética mejorada: Puede ayudar a mejorar la estética general de tu sitio web al permitirte adaptar el diseño del botón al estilo y la combinación de colores de tu marca. Esto puede ayudar a crear un aspecto cohesivo y profesional para tu tienda online.
- Funcionalidad mejorada: También puede ofrecer una funcionalidad mejorada, como mostrar información adicional sobre el producto, es decir, precio, disponibilidad o descuentos o promociones aplicables.
- Aumento de la tasa de conversión: Al mejorar la estética y la funcionalidad de tu botón «Añadir a la cesta», puedes aumentar tu tasa de conversión y los ingresos y la rentabilidad generales.
Mostrar el botón Añadir a la cesta en la plantilla
El siguiente fragmento de código mostrará el botón de añadir al carrito en cualquier página de plantilla de WooCommerce que elijas.
<?php
/* Template Name: Customize Add to Cart */
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<ul class="products">
<?php
$args = array(
'post_type' => 'product',
'posts_per_page' => 12,
);
$loop = new WP_Query( $args );
if ($loop->have_posts()) {
while ($loop->have_posts()) : $loop->the_post();
?>
<div id="product-image1">
<a href="<?php echo esc_url( get_permalink( $product->get_id() ) ); ?>"
title="<?php echo esc_attr( $product->get_title() ); ?>">
<?php echo $product->get_image(); ?>
</a>
</div>
<div id="product-description-container">
<ul>
<a href="<?php echo esc_url( get_permalink( $product->get_id() ) ); ?>"
title="<?php echo esc_attr( $product->get_title() ); ?>">
<li><h4><?php echo $product->get_title(); ?></h4></li>
</a>
<li><?php echo apply_filters( 'woocommerce_short_description', $post->post_excerpt )?></li>
<li><h2><?php echo $product->get_price_html(); ?> </h2></li>
<?php echo apply_filters( 'woocommerce_loop_add_to_cart_link',
sprintf( '<a href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" class="button %s product_type_%s">%s</a>',
esc_url( $product->add_to_cart_url() ),
esc_attr( $product->get_id() ),
esc_attr( $product->get_sku() ),
$product->is_purchasable() ? 'add_to_cart_button' : '',
esc_attr( $product->product_type ),
esc_html( $product->add_to_cart_text() )
), $product );?>
</ul>
</div>
<?php endwhile;
} else {
echo __( 'No products found' );
}
wp_reset_postdata();
?>
</ul><!--/.products-->
</main><!-- #main -->
</div><!-- #primary -->
<?php
do_action( 'storefront_sidebar' );
get_footer();
La siguiente instantánea muestra el fragmento de código en acción.
Explicación del fragmento de código
El fragmento de código anterior, aunque largo, es bastante sencillo de entender. Proporcionaré una breve descripción de los componentes importantes del fragmento de código para que puedas entenderlo y modificarlo según tus necesidades.
- ‘post_type’ => ‘product’ – Este es el tipo de entrada personalizado por defecto de WooCommerce.
- ‘posts_per_page’ => 12 – Es el número máximo de mensajes que se muestran en una página. En este momento, está establecido en 12. Puedes cambiarlo para adaptarlo a las necesidades de tu tienda.
- apply_filters( ‘woocommerce_short_description’, $post->post_excerpt ) – Muestra las descripciones corta y larga del producto.
- esc_url( $product->add_to_cart_url() ) – junto con la sentencia echo , muestra la URL de la página del carrito y los artículos del carrito (si los hay).
- esc_attr( $product->get_id() ) – Obtiene el ID del producto.
- esc_attr( $product->get_sku() ) – Obtiene el SKU del producto.
- esc_html( $product->add_to_cart_text() ) – Obtiene el texto del carrito.
Desde el lanzamiento hasta la personalización de tus tiendas WooCommerce, Cloudways está a tu servicio.
Tanto si eres principiante como experto, la Plataforma Cloudways se basa en la interfaz de usuario, con la que podrás crear y personalizar tu tienda online en pocos segundos.
Añadir texto encima del botón Añadir a la cesta
Otra gran oportunidad de personalización es añadir texto encima del botón personalizado de añadir al carrito. El siguiente fragmento añade la línea de texto. Esto es posible gracias a la sentencia echo.
add_action( 'woocommerce_single_product_summary', 'add_to_cart_button_woocommerce', 20 );
function add_to_cart_button_woocommerce() {
echo '<div class="button-text">WooCommerce customize add to cart button</div>';
}
Así es como se mostraría la línea de texto:
Cambiar el texto del botón Añadir a la cesta
Por último, es hora de añadir el último toque de personalización. Es fácil cambiar el texto que aparece en el botón. Esto se hace mediante un sencillo fragmento de código:
add_filter('woocommerce_product_single_add_to_cart_text','custom_add_to_cart_button_woocommerce');
function custom_add_to_cart_button_woocommerce() {
return __('WooCommerce custom add to cart button code', 'woocommerce');
}
Como puedes ver, la etiqueta del botón cambia al texto mencionado en la sentencia return de la función custom_add_to_cart_button_woocommerce().
Resumen
Un «botón Añadir al carrito» personalizado en WooCommerce es una función útil que permite a los propietarios de tiendas personalizar el aspecto y la funcionalidad de sus páginas de productos. Esto puede mejorar el recorrido del cliente y repercutir en el éxito general de la tienda online, ya que desempeña un papel crucial. Si tienes alguna pregunta relacionada con este artículo, escríbela en los comentarios.
Q. ¿Cómo personalizar el botón Añadir al carro en WooCommerce?
A) Para personalizar el botón «Añadir al carrito» en WooCommerce, puedes utilizar 3 métodos diferentes:
- Utilizar un Plugin
- Puedes modificar el archivo woocommerce/templates/single-product/add-to-cart/simple.php de tu tema para personalizar el aspecto y el comportamiento del botón.
- Utiliza ganchos como woocommerce_single_product_summary para cambiar el texto o el estilo del botón. También puedes utilizar CSS para modificar el aspecto del botón.
Q. ¿Cómo cambio el botón Añadir al carro en HTML en WooCommerce?
A) Para cambiar el botón «Añadir a la cesta» en HTML:
Paso 1: Crea un tema hijo o utiliza un tema existente.
Paso 2: Anula el archivo de plantilla de WooCommerce add-to-cart.php en la carpeta de tu tema.
Paso 3: Edita la estructura HTML dentro de este archivo para adaptarla a tus necesidades.
Q. ¿Cómo añado un campo personalizado a mi carrito de WooCommerce?
A) Para añadir un campo personalizado al carrito de WooCommerce, puedes utilizar el hook woocommerce_after_cart_item_name, puedes añadir un campo de texto, una casilla de selección o una casilla de verificación. Aquí tienes un ejemplo de cómo añadir un campo personalizado:
Q. ¿Cómo obtener el botón Añadir a la cesta?
A) Para obtener el botón «Añadir al carrito» en WooCommerce, puedes utilizar la función de WooCommerce woocommerce_template_single_add_to_cart(). Se mostrará el botón en la página del producto.
Sunyyan Junaid
Sunyyan Junaid es redactora jefe y copywriter en Cloudways. Tiene más de ocho años de experiencia combinada en el campo de la redacción y el marketing digital, y prefiere añadir un toque caprichoso a la mayoría de sus trabajos.
