En el mundo del comercio electrónico, ofrecer descuentos personalizados y fáciles de usar puede marcar la diferencia. Si te fijas en grandes marketplaces como Amazon, Temu o Shein, verás que permiten a sus usuarios aplicar cupones directamente desde la página del producto. Esta funcionalidad mejora la experiencia del usuario y fomenta las ventas, al hacer que los descuentos sean más accesibles y visibles:
En este tutorial, te enseñaré cómo copiar e implementar esta misma funcionalidad en tu tienda WooCommerce. Aprenderás a asociar cupones específicos a productos y a mostrar un checkbox en la página del producto para que tus clientes puedan aplicar el descuento con un solo clic. Todo esto con código personalizado, sin necesidad de instalar plugins adicionales.
Índice
Ventajas de aplicar la casilla de aplicar cupón en el producto
Incorporar esta funcionalidad en tu tienda WooCommerce puede ofrecer numerosas ventajas, tanto para ti como para tus clientes. Estas son algunas de las más importantes:
- Facilita la toma de decisiones del cliente: Mostrar un descuento destacado justo en la página del producto elimina pasos innecesarios, ayudando al cliente a percibir el valor de la oferta de forma inmediata.
- Reduce fricciones en el proceso de compra: Los usuarios no necesitan recordar ni buscar códigos de descuento. Con un simple clic en la casilla, pueden aprovechar el beneficio, lo que hace que la experiencia sea más fluida.
- Aumenta la percepción de valor: Mostrar descuentos visibles en el producto refuerza la sensación de que el cliente está obteniendo una oferta exclusiva, incentivando la compra inmediata.
- Impulsa las conversiones: Asociar cupones directamente a productos específicos crea urgencia y motiva al cliente a finalizar su compra, evitando distracciones o abandonos del carrito.
- Promociona productos clave o en stock limitado: Puedes dirigir la atención hacia productos con alta rotación, promociones especiales o exceso de inventario, maximizando tus estrategias de ventas.
- Genera confianza y transparencia: Mostrar el descuento directamente en la página del producto refuerza la percepción de una tienda confiable, donde las ofertas son claras y fáciles de usar.
- Incrementa el ticket promedio: Esta funcionalidad puede complementar estrategias de ventas cruzadas y upselling, motivando al cliente a aprovechar otras ofertas visibles relacionadas.
Con estas ventajas, integrar esta funcionalidad en tu tienda no solo mejora la experiencia del cliente, sino que también optimiza tus resultados de ventas de forma efectiva.
Implementar en WooCommerce
Para poder tener esta funcionalidad en nuestra tienda online con WordPress, no he encontrado ningún plugin que la tenga. Es por ello, que he creado el siguiente código que tendremos que añadir al functions.php de nuestro Child Theme o bien nuestro plugin de funcionalidades como explico aquí.
// Añadir campos en la pestaña "General" de los datos del producto
add_action('woocommerce_product_options_general_product_data', 'add_coupon_fields_to_product');
function add_coupon_fields_to_product() {
// Campo para el código del cupón
woocommerce_wp_text_input(array(
'id' => '_custom_coupon_code',
'label' => __('Cupón Asociado', 'woocommerce'),
'description' => __('Introduce el código del cupón que deseas asociar a este producto.', 'woocommerce'),
'desc_tip' => true,
'type' => 'text'
));
// Campo para el texto del cupón
woocommerce_wp_text_input(array(
'id' => '_custom_coupon_text',
'label' => __('Texto del Cupón', 'woocommerce'),
'description' => __('Introduce el texto que aparecerá junto al checkbox, por ejemplo: "Aplicar cupón de 40€".', 'woocommerce'),
'desc_tip' => true,
'type' => 'text'
));
}
// Guardar los valores de los campos
add_action('woocommerce_admin_process_product_object', 'save_coupon_fields_to_product');
function save_coupon_fields_to_product($product) {
if (isset($_POST['_custom_coupon_code'])) {
$product->update_meta_data('_custom_coupon_code', sanitize_text_field($_POST['_custom_coupon_code']));
}
if (isset($_POST['_custom_coupon_text'])) {
$product->update_meta_data('_custom_coupon_text', sanitize_text_field($_POST['_custom_coupon_text']));
}
}
// Mostrar la etiqueta y el checkbox en la página del producto
add_action('woocommerce_before_add_to_cart_button', 'add_coupon_checkbox_with_label');
function add_coupon_checkbox_with_label() {
global $product;
// Obtener los valores configurados
$coupon_code = $product->get_meta('_custom_coupon_code');
$coupon_text = $product->get_meta('_custom_coupon_text');
if (!empty($coupon_code)) {
// Mostrar la etiqueta estilizada
echo '<div class="apply-coupon-section">';
echo '<span class="newCouponBadge">Cupón</span>';
// Mostrar el checkbox con el texto personalizado
echo '<label>';
echo '<input type="checkbox" id="apply_coupon_checkbox" value="' . esc_attr($coupon_code) . '">';
echo ' ' . (!empty($coupon_text) ? esc_html($coupon_text) : __('Aplicar cupón', 'woocommerce'));
echo '</label>';
echo '</div>';
}
}
// Aplicar cupón vía AJAX
add_action('wp_footer', 'add_coupon_application_script');
function add_coupon_application_script() {
if (is_product()) {
?>
<script>
jQuery(function($) {
$('#apply_coupon_checkbox').change(function() {
var couponCode = $(this).val();
if ($(this).is(':checked')) {
$.ajax({
url: '<?php echo esc_url(admin_url('admin-ajax.php')); ?>',
type: 'POST',
data: {
action: 'apply_product_coupon',
coupon_code: couponCode
},
success: function(response) {
if (response.success) {
alert('<?php _e("Cupón aplicado correctamente.", "woocommerce"); ?>');
location.reload();
} else {
alert(response.data);
}
}
});
}
});
});
</script>
<?php
}
}
// Lógica de aplicación del cupón
add_action('wp_ajax_apply_product_coupon', 'apply_product_coupon');
add_action('wp_ajax_nopriv_apply_product_coupon', 'apply_product_coupon');
function apply_product_coupon() {
if (!isset($_POST['coupon_code'])) {
wp_send_json_error(__('No se ha enviado ningún cupón.', 'woocommerce'));
}
$coupon_code = sanitize_text_field($_POST['coupon_code']);
$applied = WC()->cart->apply_coupon($coupon_code);
if ($applied) {
wp_send_json_success();
} else {
wp_send_json_error(__('El cupón no se pudo aplicar.', 'woocommerce'));
}
}Y como estilos de CSS a añadir para dejarlo bonito y atractivo visualmente para el usuario:
.newCouponBadge {
font-weight: bold;
background-color: #ff9900;
white-space: nowrap;
min-width: 54px;
text-align: center;
padding: 2px 6px;
border-radius: 4px;
color: #fff;
display: inline-block;
margin-right: 8px;
margin-bottom: 10px;
}
.apply-coupon-section {
margin-top: 10px;
}El código permite:
- Añadir dos campos en la edición del producto, uno para poner el cupón asociado a ese producto y el texto que quieres que salga para describir el cupón.
- Mostrar el checkbox o casilla para aplicar el cupón.
- La funcionalidad para aplicar el cupón.
Mostrar aviso en el catálogo
Para que el cliente sepa desde el catálogo que ese producto tiene un cupón también lo podríamos avisar como hace Amazon:
Para aplicarlo en WooCommerce, implementamos el siguiente código:
add_action('woocommerce_product_options_general_product_data', 'dl_wc_coupon_on_product_savings_field');
function dl_wc_coupon_on_product_savings_field() {
woocommerce_wp_text_input(array(
'id' => '_custom_savings_text',
'label' => __('Texto cupón del catálogo', 'dl_wc_coupon_on_product'),
'description' => __('Introduzca el texto de ahorro que desea mostrar en el catálogo, por ejemplo, «Ahorre 40,00 €».', 'dl_wc_coupon_on_product'),
'desc_tip' => true,
'type' => 'text',
));
}
// Guardar el Texto de Ahorro
add_action('woocommerce_admin_process_product_object', 'dl_wc_coupon_on_product_save_savings_field');
function dl_wc_coupon_on_product_save_savings_field($product) {
if (isset($_POST['_custom_savings_text'])) {
$product->update_meta_data('_custom_savings_text', sanitize_text_field($_POST['_custom_savings_text']));
}
}
add_filter('woocommerce_get_price_html', 'dl_wc_coupon_on_product_display_savings_text', 10, 2);
function dl_wc_coupon_on_product_display_savings_text($price, $product) {
// Solo aplicar en páginas de catálogo, no en la ficha de producto
if (is_product()) {
return $price; // Devolver el precio sin modificar en la ficha de producto
}
// Obtener el texto de ahorro y el código del cupón
$savings_text = $product->get_meta('_custom_savings_text');
$coupon_code = $product->get_meta('_custom_coupon_code');
// Mostrar el texto si hay un cupón asociado y un texto de ahorro configurado
if (!empty($coupon_code) && !empty($savings_text)) {
$price = '<span class="savings-text">' . esc_html($savings_text) . '</span> ' .
'<span class="coupon-note">' . __('con un cupón', 'dl_wc_coupon_on_product') . '</span><br>' .
$price;
}
return $price;
}
También añadimos un css personalizado en los estilos de nuestro theme:
.savings-text {
display: inline-block;
font-size: 14px;
color: #111;
background-color: #7fda69;
padding: 0 6px;
font-weight: bold;
border-radius: 3px;
margin-right: 5px;
}Tendremos como resultado:
El código también añade un campo de edición en el producto para que pongamos lo que está en fondo verde(ej: Ahorra un 10%):
Conclusión
Añadir cupones específicos por producto con un checkbox en WooCommerce es una funcionalidad que puede transformar la experiencia de tus clientes y aumentar las conversiones.
Recuerda que en el blog tienes una guía de cupones y otros tutoriales como excluir el uso de cupones u ocultar el aviso de cupón.
Deja una respuesta