Cómo agregar código personalizado a WooCommerce

Configurar fragmentos de código y configurar archivos de WooCommerce puede resultar confuso para los usuarios principiantes. Además, cometer errores con estos archivos puede tener resultados terribles e incluso bloquear su sitio. Es por eso que en esta guía, le mostraremos diferentes métodos para agregar código personalizado a WooCommerce .

Anteriormente hemos visto cómo puede personalizar manualmente su tienda. Ya sea su página de la tienda, la página de mi cuenta, la página del carrito o las páginas de productos, puede personalizarlas manualmente agregando un código personalizado. También puede usar código para configurar varios elementos de WooCommerce para personalizar la experiencia de compra y destacarse de sus competidores. Todo esto requiere agregar fragmentos de código a su sitio web.

Antes de ver los diferentes métodos para hacerlo, veamos algunos de los principales beneficios de aprender a agregar código personalizado.

¿Por qué agregar y personalizar código en WooCommerce?

Una de las características clave de WooCommerce es su personalización. Con sus opciones ya diversas y flexibles, así como varios complementos y complementos disponibles, WooCommerce se destaca como una de las plataformas de comercio electrónico más personalizables. Sin embargo, hay varios requisitos que debe seguir para agregar un código personalizado.

Ya sea para cambiar el texto Proceder al pago, eliminar los botones Agregar al carrito o cambiar la apariencia de su sitio, deberá usar funciones personalizadas y usar ganchos de WooCommerce. Los desarrolladores y cualquier persona familiarizada con las habilidades de codificación saben lo importante que es poder agregar fragmentos de la manera correcta. Esto le permite no solo editar su tienda, sino también agregarle funcionalidades. La buena noticia es que la naturaleza de código abierto tanto de WooCommerce como de WordPress hace que sea un proceso mucho más accesible.

WooCommerce respalda completamente a sus usuarios para personalizar su código, aunque este proceso implica editar archivos principales, lo que conlleva algunos riesgos.

Anteriormente hemos visto muchas guías sobre cómo configurar varios elementos y archivos usando fragmentos de código. Esta vez, nos centraremos en la primera parte de ese proceso y veremos diferentes métodos para agregar código personalizado a WooCommerce de la manera correcta .

Cómo agregar código personalizado a WooCommerce

Hay diferentes formas de agregar fragmentos de código a WooCommerce :

1. Con el editor de temas de WordPress incorporado
2. Usar un complemento dedicado
3. Uso de FTP para acceder a archivos de temas
4. Al configurar los archivos de plantilla de WooCommerce
5. Al crear un nuevo complemento personalizado

Echemos un vistazo a cada método paso a paso.

NOTA : Todos estos métodos requieren la edición de archivos principales que implican algunos riesgos. Por eso, antes de comenzar, es una buena idea hacer una copia de seguridad de su sitio.

1) Agregar personalizado usando el editor de WordPress incorporado

El método predeterminado para agregar código personalizado a WooCommerce es usar el editor de temas incorporado. Puede acceder a functions.php y agregarle código PHP directamente. Sin embargo, si hay errores en el código o elimina partes del código, su sitio web puede verse seriamente afectado. Es por eso que recomendamos usar un tema secundario y agregar una capa adicional de seguridad.

Para abrir el archivo functions.php en su Editor de temas, vaya a Apariencia > Editor de temas en su tablero . Luego, haz clic en functions.php en la barra lateral de Archivos de temas hacia la derecha.

Agregar código personalizado al archivo functions.php

Ahora, puede agregar código personalizado a WooCommerce desde el Editor de temas. Para esta demostración, cambiaremos el texto predeterminado "No hay productos en el carrito" por "Su carrito está actualmente vacío, ¡le recomendamos que consulte nuestros productos destacados!":

 remove_action('woocommerce_cart_is_empty', 'wc_empty_cart_message', 10);
add_action('woocommerce_cart_is_empty', 'quadlayers_empty_cart_message', 10);

función quadlayers_empty_cart_message() {
$html = '<div class="col-12 offset-md-1 col-md-10"><p class="carrito-vacío">';
$html .= wp_kses_post( apply_filters( 'wc_empty_cart_message', __( 'Tu carrito está actualmente vacío, te recomendamos revisar nuestros productos destacados!', 'woocommerce' ) ) );
eco $html. '</p></div>';
}

Simplemente pegue este script en su Editor de temas y actualice el archivo para aplicar los cambios.

Echa un vistazo a la parte delantera y deberías ver algo como esto:

Agregar el código es una cosa, pero también es importante comprender cómo funciona el código.

El código anterior agrega un gancho personalizado de WooCommerce que aplica una determinada acción para reemplazar el mensaje de carrito vacío predeterminado con un mensaje personalizado que hemos agregado al código. Para cambiar el texto, simplemente reemplace el mensaje de texto en esta línea:

 $html .= wp_kses_post( apply_filters( 'wc_empty_cart_message', __( 'Tu carrito está actualmente vacío, te recomendamos revisar nuestros productos destacados!', 'woocommerce' ) ) );

Si desea obtener más información sobre cómo personalizar su mensaje " No hay productos en el carrito " y aprovecharlo al máximo, consulte esta guía completa.

Como se mencionó anteriormente, agregar código de esta manera es rápido y fácil, pero implica una buena cantidad de riesgos. Por ejemplo, el uso de un código incorrecto podría dañar o bloquear su sitio web. Además, puede haber problemas de compatibilidad con su código personalizado que pueden afectar algunas funcionalidades, complementos o temas. Además, si agrega su código a function.php del tema principal y luego cambia o actualiza su tema, puede perder el código personalizado que ha agregado.

Es por eso que, si es un principiante, le recomendamos que pruebe el segundo método y use complementos para agregar código personalizado a WooCommerce.

2) Agregar código usando complementos

El uso de un complemento es más fácil para principiantes cuando se trata de agregar fragmentos. Puede controlar fácilmente qué bits de código habilita en su sitio web y cualquier código que agregue se guardará incluso si cambia su tema. Además, puedes activar o desactivar cualquier código en cualquier momento.

Para nuestra demostración, usaremos el complemento Code Snippets. Es uno de los complementos más populares para agregar código personalizado a cualquier sitio.

Primero, instale el complemento abriendo su Panel de administración de WP y vaya a Complementos> Agregar nuevo . Utilice la barra de búsqueda en la parte superior derecha y busque Fragmentos de código . Luego, haga clic en Instalar y finalmente active el complemento.

Después de la activación, está listo para agregar código y personalizar su tienda WooCommerce. Vaya a Fragmentos > Agregar nuevo para agregar código nuevo.

Asigne un nombre a su fragmento de código y agréguelo a la sección Código . Para la demostración, usaremos el siguiente código para ocultar el botón Agregar al carrito.

 remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');

remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30); 

Después de eso, puede decidir si desea ejecutar el código en todo su sitio web o elegir entre ejecutarlo solo en el back-end o en el front-end. Alternativamente, puede ejecutar este código solo una vez.

Del mismo modo, también puede elegir establecer una prioridad para su código y agregar una descripción de fragmento, así como etiquetas.

Una vez que configure todos los detalles, haga clic en Guardar cambios o Guardar cambios y activar para agregar su nuevo código.

Si desea desactivar o activar su código individualmente, vaya a Fragmentos > Todos los fragmentos y puede deshabilitar o habilitar individualmente cualquiera de sus fragmentos.

3) Agregar código personalizado usando un cliente FTP

Si todas estas opciones no están disponibles para usted y necesita agregar un código personalizado a su tienda WooCommerce manualmente, es posible que deba hacerlo mediante un cliente FTP . Existen varias herramientas, pero para este tutorial, usaremos FileZilla.

NOTA : NO recomendamos este método si no está acostumbrado a usar un cliente FTP oa configurar su servidor y sus archivos. Además, esto podría requerir acceso a su cPanel y FTP . Estropear estos archivos puede tener efectos graves en su sitio web, por lo que le recomendamos que siga con los métodos anteriores si desea reducir el riesgo al agregar código personalizado a su sitio.

Primero, abra FileZilla o su cliente FTP preferido y conéctelo a su sitio web. Luego, ubique los archivos de su tema en el directorio de su sitio web. Normalmente se encuentran en el directorio /wp-content/themes de su servidor. Haga clic en la carpeta de su tema actual o el tema secundario que puede estar configurando.

Abra la carpeta de su tema, haga clic con el botón derecho en el archivo functions.php que se encuentra dentro y luego presione Ver/Editar.

Aquí, utilizando el editor de archivos, puede pegar el código al final del archivo y guardarlo. Para esto, usaremos el mismo código que arriba para ocultar el botón Agregar al carrito:

 remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart'); 

remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30); 

Otra alternativa interesante para agregar código es personalizar los archivos de plantilla de WooCommerce.

4) Agregue código personalizando los archivos de plantilla de WooCommerce

Editar plantillas es una de las formas más rápidas de configurar todos los elementos de tu tienda WooCommerce y todas sus páginas. Esto incluye su página de Pago, página de Producto, página de Tienda y muchas otras.

La buena noticia es que puede editar los archivos de plantilla de WooCommerce de forma similar a la anterior utilizando el editor de complementos de WordPress incorporado. Para acceder a él, en su panel de administración, vaya a Complementos > Editor de complementos .

Luego, use el menú desplegable Seleccionar complementos en la parte superior derecha, elija WooCommerce y haga clic en Seleccionar.

Esto actualizará la lista de archivos de complemento a continuación que puede usar para configurar archivos y plantillas de WooCommerce. Para nuestra demostración, editaremos la página de agradecimiento del pago . Entonces, en la lista de archivos de complementos , seleccione Pago > gracias.php .

Luego, desplácese hacia abajo y cambie el texto del Pedido recibido reemplazando el texto en esta línea:

 <p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', esc_html__( 'Gracias. Su pedido ha sido recibido', 'woocommerce' ), nulo ); // phpcs: ignorar WordPress.Security.EscapeOutput.OutputNotEscaped ?></p>

Por ejemplo, para cambiar el mensaje Pedido recibido a algo como “Gracias por comprarnos. En breve recibirás el correo con las instrucciones.”, pega este código:

 <p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', esc_html__( 'Gracias por comprarnos. Pronto recibirá un correo con respecto a las instrucciones..', 'woocommerce' ), null ); // phpcs: ignorar WordPress.Security.EscapeOutput.OutputNotEscaped ?></p> 

Aquí acabamos de actualizar el texto del enlace a algo más adecuado para nuestras necesidades. Una vez que esté satisfecho con los cambios, presione Actualizar archivo .

Si desea obtener más información sobre la configuración de archivos de plantilla, consulte nuestra guía sobre cómo personalizar los archivos de plantilla de WooCommerce.

5) Agregue código creando un nuevo complemento personalizado

Crear un complemento completamente nuevo también es una opción cuando se trata de agregar códigos personalizados a WooCommerce. Esta es una opción de usuario un poco más avanzada y le recomendamos que use este método solo si desea que una función determinada se adjunte a un complemento independiente. De esta manera, siempre puede optar por activar/desactivar el complemento cada vez que se requiera o no una característica determinada, respectivamente.

Además, esta puede ser una gran solución si también tiene que administrar varios sitios. Simplemente puede adjuntar una función a los sitios con el complemento en lugar de agregarles manualmente el código.

Además, el propio WordPress facilita bastante la creación y el uso de nuevos complementos. Todo lo que tiene que hacer es simplemente crear una nueva carpeta de complementos en el directorio de su sitio web y agregar algunos códigos a su archivo PHP. En primer lugar, primero debe conectarse a su sitio web mediante FTP . Usaremos Filezilla para nuestra guía, pero el proceso debería ser similar para cualquier otro cliente FTP.

Sin embargo, antes de comenzar, le recomendamos encarecidamente que haga una copia de seguridad de su sitio web.

Creación de una nueva carpeta de complementos para agregar un código personalizado a WooCommerce

Después de haber conectado su sitio web con el FTP, abra el director de su sitio. Luego, navegue a su carpeta /wp-content/plugins .

Ahora, cree un nuevo directorio en la carpeta de complementos y asígnele el nombre de acuerdo con su código y expándalo. Para nuestra demostración, lo llamaremos Remove-Add-To-Cart .

Luego, haga clic derecho en la carpeta para hacer clic en Crear nuevo archivo . Aquí, debe crear un archivo .php con el mismo nombre que su carpeta. Entonces, llamaremos a nuestro archivo Remove-Add-to-Cart.php.

Una vez que se crea el archivo, continúe y ábralo haciendo clic derecho sobre él y haciendo clic en Ver/Editar .

A continuación, agregaremos algunas líneas de código para agregarle el nombre del complemento, la descripción y el nombre del autor:

 <?php
/**
* Nombre del complemento: Eliminar Agregar al carrito
* Descripción: agregar un complemento para eliminar agregar al carrito
* Autor: Sijal Shrestha
* Versión: 1.0
*/

/* Pon tus fragmentos aquí abajo. */
/* Pon tus fragmentos aquí arriba. */
?> 

Agregar código personalizado al nuevo complemento

Ahora, puede comenzar a agregar su código personalizado al complemento. Debe agregar su código personalizado entre la sección /*Ponga sus fragmentos aquí */. Como recordatorio, estas líneas son simplemente comentarios, por lo que no afectarán su código y puede eliminarlas si lo desea.

 <?php
/**
* Nombre del complemento: Eliminar Agregar al carrito
* Descripción: agregar un complemento para eliminar agregar al carrito
* Autor: Sijal Shrestha
* Versión: 1.0
*/

/* Pon tus fragmentos aquí abajo. */

remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');

remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30);
/* Pon tus fragmentos aquí arriba. */
?> 

A continuación, guarde su archivo y debería ver que el complemento aparece en su Panel de administración de WP en la página Complementos .

Active el complemento y su código personalizado debería funcionar perfectamente. También puede comprimir la carpeta del complemento si lo desea y usarla para instalarla en diferentes sitios web. Simplemente descargue la carpeta desde su cliente FTP y comprima la carpeta.

Luego, puede usar este zip para instalar su complemento en cualquier sitio web. Si necesita más ayuda al respecto, también tenemos un detallado para instalar un complemento de WordPress manualmente.

¿Qué método debe usar para agregar código personalizado?

Hemos visto diferentes métodos, pero ¿cuál es el mejor para agregar fragmentos? Si bien usar un cliente FTP y acceder manualmente a sus archivos puede ser bastante rápido y fácil, puede haber riesgos significativos al agregar códigos personalizados de esta manera. Es por eso que para minimizar los riesgos, recomendamos usar un complemento de código personalizado dedicado, especialmente si no tiene habilidades de codificación avanzadas.

Este método es mucho menos riesgoso y puede tener ventajas adicionales como:

• Ser capaz de realizar un seguimiento de diferentes códigos y habilitarlos/deshabilitarlos cuando lo desee
• Agregar código en conflicto y habilitarlos/deshabilitarlos alternativamente si es necesario
• Comprobación de la compatibilidad con el tema/instalaciones
• Más fácil de depurar y recuperarse de problemas

El uso de un complemento dedicado para agregar código personalizado a WooCommerce le brinda una manera fácil de configurar sus ganchos y minimizar posibles problemas. Sin embargo, si desea asegurarse de que su código recién agregado no cause problemas ni bloquee su sitio web, le recomendamos que eche un vistazo a los siguientes consejos.

Mejores prácticas al agregar código personalizado a WooCommerce

1) Uso de temas secundarios

Usar un tema hijo es una de las primeras cosas que recomendamos si va a agregar un código personalizado a su archivo functions.php . Independientemente del código que edite o agregue, con un tema secundario se asegura de que podrá revertir cualquier cambio en cualquier momento sin modificar los archivos del tema principal.

Además, una cosa importante a considerar con los cambios de código y la modificación de las hojas de estilo es que si tuviera que actualizar su tema de WordPress , podría perder todos los cambios. Esto se debe a que su archivo funcitons.php se sobrescribirá con una actualización de tema y eliminará todo su código personalizado. Esta es la razón por la que agregar código al tema principal no es una práctica recomendada.

Con un tema secundario, te aseguras de no perder tu personalización incluso después de actualizar tu tema principal. Además, si su tema se rompe, siempre puede revertir sus cambios y comenzar de nuevo.

Puede crear un tema secundario mediante programación o usar un complemento dedicado. En esta sección, le mostraremos cómo crear un tema secundario con un complemento, ya que es un proceso más sencillo.

Creando un tema Child usando un plugin

Crear un tema hijo usando un complemento es un proceso sencillo y fácil de usar para principiantes. Hay muchos complementos que puedes usar. Para esta demostración, usaremos Child Theme Wizard .

Primero, abra su Panel de administración de WP y diríjase a Complementos> Agregar nuevo . Luego, use el menú de búsqueda en la parte superior derecha para buscar Child Theme Wizard . Haga clic en Instalar y luego presione Activar una vez que el botón cambie.

Luego puede acceder a las funciones del complemento haciendo clic en Herramientas> Asistente de tema secundario.

Para crear un nuevo tema secundario, use el campo de tema principal para elegir el tema para el que desea crear un tema secundario. Para nuestra demostración, usaremos el tema Storefront .

Luego, agregue detalles como Título, Descripción, URL y más. Una vez que haya terminado, haga clic en Crear tema secundario y debería haber terminado.

Ahora cambie a su tema secundario navegando a Apariencia > Temas en su barra lateral y presionando Activar en su tema secundario recién creado.

¡Eso es! Ahora puede agregar libremente su código personalizado a su archivo function.php bajo el tema secundario recién creado.

2) Uso de complementos de copia de seguridad de WordPress y configuración de copias de seguridad

Una de las cosas más importantes que debe hacer cuando modifica cualquier archivo de WordPress/WooCommerce o cambia cualquiera de los archivos en su instalación es configurar copias de seguridad. Si bien WooCommerce es bastante flexible, el código incompatible o que funciona mal puede crear problemas graves.

En algunos casos, puede fallar o incluso romper su sitio web y causar tiempo de inactividad para su negocio de WooCommerce. Es por eso que le recomendamos encarecidamente que cree copias de seguridad periódicas. Entonces, antes de agregar cualquier código personalizado a su sitio, recuerde crear una copia de seguridad a la que pueda volver en caso de que algo salga mal.

Para obtener más información al respecto, consulte nuestra guía dedicada sobre cómo crear copias de seguridad en WordPress.

3) Aprender cómo funciona el código y cómo se usan los ganchos y funciones de WooCommerce

La mayor parte del código personalizado para WooComerce utiliza ganchos para realizar ciertas acciones o cambiar ciertos elementos. Por eso es una gran idea aprender cómo funcionan estos filtros y cómo se aplican a su sitio web antes de su código personalizado. Esto no solo evita que use un código incompleto o que no funcione correctamente, sino que también garantiza que pueda personalizarlo para que funcione mejor para sus necesidades.

Por ejemplo, echemos un vistazo a este fragmento que deshabilita la compra si no ha iniciado sesión:

 add_action('woocommerce_before_single_product', 'quadlayers_add_message');
add_filter('woocommerce_is_purchasable', 'quadlayers_block_admin_purchase');
función quadlayers_block_admin_purchase($bloque) {
if ( is_user_logged_in() ):return true;
más: devuelve falso;
terminara si;
}

función quadlayers_add_message( ){
if ( !is_user_logged_in() ):echo '<H2>INICIA SESIÓN PARA COMPRAR ESTE PRODUCTO</h2>';
terminara si;
}

Así es como funcionan los ganchos de WooCommerce aquí:

• El gancho de acción se usa para imprimir un mensaje usando la función QuadLayers_add_message mientras que el gancho de filtro usa la función quadlayers_block_admin_purchase para deshabilitar el botón Agregar al carrito
• Se utiliza una instrucción IF en ambas funciones para comprobar si el usuario ha iniciado sesión o no.
• El gancho woocommerce_is_purchasable se aplica si la declaración IF condicional devuelve verdadero
• También hemos aplicado CSS adicional para cambiar el estilo del texto del mensaje y para agregar colores personalizados.

Avancemos y añadamos esto al archivo function.php de nuestro tema hijo:

Esto nos da este resultado en la parte delantera:

Si desea aprender cómo funciona el código personalizado de WooCommerce, consulte nuestra guía sobre cómo usar ganchos de WC.

Conclusión

En resumen, aprender a agregar código personalizado a WooCommerce puede ser una parte clave para personalizar la experiencia de su tienda. Cuantas más cosas personalice, más podrá destacarse de sus competidores. Al agregar fragmentos de código, evita tener que depender tanto de los complementos y tiene más flexibilidad.

En esta guía, hemos visto diferentes métodos para agregar fragmentos de código:

• Usando el editor de temas incorporado para editar el archivo functions.php
• Con un complemento de WordPress dedicado para agregar fragmentos de código personalizados
• Usando FTP para acceder al archivo function.php manualmente
• Usando el editor de complementos para editar manualmente las plantillas de WooCommerce
• Usando FTP para crear un nuevo complemento con el código personalizado.

Todos estos métodos le permiten personalizar y configurar fácilmente su sitio web de WooCommerce. Todos estos métodos requieren un nivel básico de habilidades de codificación, pero usar un complemento es el método más amigable para principiantes. Editar el archivo functions.php desde el editor incorporado es fácil, pero tiene algunos riesgos que debe tener en cuenta. Lo mismo se aplica si desea personalizar directamente los archivos de plantilla de WooCommerce. Finalmente, usar un cliente FTP es un método un poco más avanzado ya que requiere ciertos conocimientos para configurar los archivos del servidor.

¿Ha agregado fragmentos a su tienda WooCommerce? ¿Qué método usaste? ¿Conoces alguna otra forma que debamos agregar? ¡Háganos saber en la sección de comentarios!

Finalmente, si está buscando fragmentos de código adicionales y formas de personalizar su tienda mediante programación, tenemos algo para usted. Si te ha gustado esta guía, consulta estos artículos que te ayudarán a aprovechar al máximo tu tienda WooCommerce:

• Cómo editar la página del producto WooCommerce mediante programación
• Edite la página de mi cuenta de WooCommerce mediante programación
• Cómo editar la página de la tienda de WooCommerce mediante programación