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

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

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


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


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