Asesor
Asesor Disponible
¡Hola! 👋 ¿Qué servicios estás buscando hoy?
Escribiendo...
Saltar al contenido

Ariapsa - Diseño & Soporte Web

CSS y JS: Botón de WhatsApp personalizado para Woocommerce (sección productos)

A

¿Es posible añadir un botón de WhatsApp personalizado en productos de Woocommerce sin usar plugins?

Diseño de sitios y páginas web

Desde landing page hasta tiendas online, incluye dominio y hosting

Ver planes y precios

¿Necesitas marketing digital para tu negocio?

Planes desde posicionamiento SEO, redes sociales, Google y ChatGPT ADS.

Ver planes

Dossier de ventas

Convertimos tu presentación PPT en una herramienta de prospección optimizada para móviles.

Cotizar ahora

Claro, si es posible insertar un botón para whatsapp en nuestros productos de woocommerce con un mensaje personalizado, lo que necesitamos es el plugin CODE SNIPPETS que puedes encontrarlo en el repositorio de WordPress, debe instalarse y añadir los siguientes códigos en CSS (es posible personalizar colores) y JS  en este ultimo es necesario personalizar numero de teléfono, mensaje de botón y mensaje previo de WhatsApp.

 

Código CSS personalizado

Código

add_action( 'wp_head', function () { ?>
<style>
.apsa-whatsapp-container {
border: 5px solid #ffffff; /*anchura, estilo y color borde*/
padding: 10px; /*espacio alrededor texto*/
color: #ffffff; /*color texto*/
text-decoration: none; /*decoración texto*/
text-transform: uppercase; /*capitalización texto*/
font-family: 'Helvetica', sans-serif; /*tipografía texto*/
background-color: #8bf678;
border: none;
border-radius: 15px;
box-shadow: 0 10px #6abba2;
}
</style>
<?php } );

 

Código JavaScript personalizado

Código

add_action( 'woocommerce_share', 'dcms_question_whatsapp' );
function dcms_question_whatsapp(){
$phone = '52xxxxxxxxxx';
$message = 'Hola, más información del producto: '.get_the_title().' ';
$text = 'Enviar mensaje por Whatsapp';
$ico = '<img src="'.get_stylesheet_directory_uri().'/img/WA.png" width=30 height=30 />';
$url = 'https://api.whatsapp.com/send?phone='.$phone.'&amp;text='.str_replace(' ', '%20', $message);
$link = '<a class="dc-link" href="'.$url.'" target="_blank">'.$ico. ' <span>'.$text.'</span></a>';
echo '<div class="apsa-whatsapp-container">'. $link. '</div>';
};
remove_action ('woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40);
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_custom_content', 12);
×

Iniciar Sesión

[custom_login_form]
[custom_registration_form]