Title: Respuestas de jsinter | WordPress.org España

---

# jsinter

  [  ](https://es.wordpress.org/support/users/jsinter/)

 *   [Perfil](https://es.wordpress.org/support/users/jsinter/)
 *   [Debates iniciados](https://es.wordpress.org/support/users/jsinter/topics/)
 *   [Respuestas creadas](https://es.wordpress.org/support/users/jsinter/replies/)
 *   [Debates respondidos](https://es.wordpress.org/support/users/jsinter/replied-to/)
 *   [Interacciones:](https://es.wordpress.org/support/users/jsinter/engagements/)
 *   [Favoritos](https://es.wordpress.org/support/users/jsinter/favorites/)

 Buscar respuestas:

## Respuestas de foro creadas

Viendo 1 respuesta (de un total de 1)

 *   Foro: [WooCommerce](https://es.wordpress.org/support/forum/plugins-y-hacks/woocommerce/)
   
   En respuesta a: [Añadir Product Add-Ons en Woocommerce](https://es.wordpress.org/support/topic/anadir-product-add-ons-en-woocommerce/)
 *  Iniciador del debate [jsinter](https://es.wordpress.org/support/users/jsinter/)
 * (@jsinter)
 * [hace 5 años, 8 meses](https://es.wordpress.org/support/topic/anadir-product-add-ons-en-woocommerce/#post-12192876)
 * Copio el código, ya que creo que ayudarán a explicar mejor mi cuestión.
 * La parte de formulario en HTML, algo de estilo CSS y previsualización con Javascript
   es la siguiente:
 *     ```
       <html>
   
       <style>
   
       	.ventana{
       	width: 100px;
       	height: 20px;
       	border:2px solid black;
       	text-align: center;}
   
       </style>
   
       <body>
   
       	<h1>Customization</h1><br>
   
       	<form method="post">
   
       		<h2>Insert text <input id="mensaje" onkeyup="imprimir()"></h2><br>
   
       	</form>
   
       	<div class="ventana">
                  	<div class="texto" id="texto"></div>
               </div>
   
       	<script>
   
       		function imprimir() {
       			text = document.getElementById('mensaje').value;			
       			document.getElementById('ventana').innerHTML=' '+text;}
   
       	</script>
   
       </body>
       </html>
       ```
   
 * Este código copiado con el plugin “Code Snippets” en el hook «woocommerce_before_add_to_cart_button»
   funciona correctamente.
 * Por otro lado, para almacenar el texto introducido en el formulario e incluirlo
   en el pedido del producto necesito pasar los valores a PHP, tal como se realiza
   en la siguiente página:
 * [https://www.businessbloomer.com/woocommerce-product-add-ons-without-plugin/](https://www.businessbloomer.com/woocommerce-product-add-ons-without-plugin/)
 * Por tanto, mi consulta es la siguiente: ¿cómo puedo adaptar e introducir el código
   anterior dentro de este otro, propuesto en la web, para mantener la parte de 
   javascript?
 *     ```
       add_action( 'woocommerce_before_add_to_cart_button', 'bbloomer_product_add_on', 9 );
   
       function bbloomer_product_add_on() {
           $value = isset( $_POST['custom_text_add_on'] ) ? sanitize_text_field( $_POST['custom_text_add_on'] ) : '';
           echo '<div><label>Custom Text Add-On <abbr class="required" title="required">*</abbr></label><p><input name="custom_text_add_on" value="' . $value . '"></p></div>';
       }
       ```
   
 * He probado algunas cosas que he consultado en internet pero no me ha funcionado.
 * Gracias por la ayuda!

Viendo 1 respuesta (de un total de 1)