Cómo personalizar las plantillas de WooCommerce

¿Está buscando formas de editar sus plantillas? En esta guía, le mostraremos dos métodos diferentes para personalizar las plantillas de WooCommerce para su sitio web con y sin complementos.

WooCommerce es una gran plataforma para crear tiendas de comercio electrónico. Es muy fácil de usar, tiene muchas funciones y tiene muchas opciones de personalización para agregar funcionalidades y cambiar el diseño de su sitio web. Además de cambiar la página de la tienda o la página del producto, también puedes editar las plantillas que WooCommerce incluye por defecto.

¿Por qué personalizar las plantillas de WooCommerce?

WooCommerce tiene muchas características personalizables. Puede personalizar prácticamente cualquier página, desde el pago hasta la página de la tienda, las páginas de categorías, las páginas de agradecimiento y más. Todo eso ayuda a darle a su tienda un estilo único que los clientes reconocerán, pero para destacar entre la multitud, es posible que también deba personalizar sus plantillas de WooCommerce.

Al editar las páginas predeterminadas en su sitio, se asegura de que se vean diferentes a las de su competencia y tengan un estilo que se adapte a la apariencia de su tienda. Pero si desea personalizarlos para obtener una ventaja competitiva significativa , puede ser una buena idea editar también las plantillas predeterminadas.

Al personalizar sus plantillas, puede agregar más detalles y funcionalidades para llevar su tienda en línea al siguiente nivel. Estas funcionalidades pueden ayudarlo a brindar una mejor experiencia al cliente que los compradores apreciarán. Es por eso que debe aprender a editar sus plantillas de WooCommerce y actualizar el juego de su tienda de comercio electrónico.

Cosas a tener en cuenta antes de editar plantillas

Antes de comenzar a personalizar sus plantillas, estas son algunas de las cosas que debe tener en cuenta.

1. Temas de WooCommerce

Cambiarás muchos elementos de tu sitio web relacionados con WooCommerce a través de las plantillas. Asegúrate de que el tema que estás usando sea totalmente compatible con WooCommerce. Si aún no tiene uno o está pensando en cambiarlo, consulte nuestra lista de los mejores temas de WooCommerce.

2. Instala WooCommerce correctamente

Antes de realizar cambios en las plantillas de WooCommerce, debe configurar correctamente WooCommerce en su sitio web. Le recomendamos que no se pierda ni se salte ningún paso durante el proceso de configuración. Si no está seguro de esto, nuestra guía sobre cómo configurar WooCommerce puede ayudarlo a verificar que todo esté correcto.

3. Use un tema secundario y haga una copia de seguridad de su sitio web

Para editar las plantillas de WooCommerce, cambiará los datos confidenciales de sus archivos de plantilla. Esto significa que si comete un error accidentalmente, su sitio web podría enfrentar algunos problemas graves. La buena noticia es que puede evitarlo utilizando un tema secundario y realizando cambios en él en lugar de editar directamente los archivos de su tema principal.

También le recomendamos que haga una copia de seguridad de su sitio web antes de comenzar este proceso. Si necesita ayuda con esto, consulte nuestra guía completa sobre cómo hacer una copia de seguridad de un sitio web de WordPress. Del mismo modo, también puede encontrar más información sobre cómo crear un tema secundario en WordPress y sobre los complementos de temas secundarios.

4. Conocimientos de programación

Para personalizar las plantillas de WooCommerce, usaremos fragmentos de código. Ya sea que lo hagas programáticamente o con un complemento, te recomendamos tener algunos conocimientos básicos de programación. Para algunas personalizaciones, usaremos ganchos. Si no está familiarizado con los ganchos, eche un vistazo a esta guía de ganchos de WooCommerce.

Si no tiene conocimientos de codificación y no se siente cómodo editando archivos principales, le recomendamos que solicite ayuda a un desarrollador.

5. Archivos de temas y plantillas

Los archivos de tema y plantilla varían según el tema que utilice para su tienda WooCommerce. Para esta demostración, usaremos el tema Divi, por lo que algunos de los archivos de plantillas y temas pueden ser diferentes en su sitio si usa otro tema. Sin embargo, debería poder seguir el tutorial sin ningún problema, independientemente del tema que esté utilizando.

Cómo editar plantillas de WooCommerce

Hay 2 formas principales de personalizar las plantillas de WooCommerce:

1. Programáticamente
2. Usando un complemento

En la siguiente sección, veremos cada método para que pueda usar el que le resulte más cómodo.

1. Personalice las plantillas de WooCommerce mediante programación

Incluso si WordPress es fácil de usar sin ningún conocimiento en programación, también es fácil de usar para desarrolladores. De hecho, puede editar prácticamente cualquier cosa en su sitio web tanto con complementos como con fragmentos de código. En esta sección, le mostraremos cómo editar plantillas mediante programación en WooCommerce.

Hay dos enfoques para personalizar plantillas mediante programación:

• Plantillas de sobrescritura
• con ganchos

Ambos enfoques harán el trabajo, así que elija el que sea más conveniente para usted. Echemos un vistazo rápido a las diferencias entre estos dos métodos para que tenga una comprensión básica de lo que hace cada uno y cuándo usarlos.

Ganchos vs plantillas de sobrescritura

Los ganchos se utilizan generalmente para modificaciones simples con acciones y filtros. Por otro lado, puede sobrescribir plantillas para personalizaciones más complejas cambiando los archivos de plantilla reales.

También vale la pena tener en cuenta que si usa un enlace para un archivo de plantilla en particular, no debe sobrescribir el archivo de plantilla. Esto se debe a que cuando sobrescribe la plantilla, los ganchos utilizados en ese archivo se reemplazarán y dejarán de funcionar.

Asegúrese de saber cuáles son sus necesidades antes de continuar y seleccione el método que se adapte a sus necesidades. Si aún no está seguro, le recomendamos que obtenga ayuda de un desarrollador de WordPress.

1.1. Sobrescribir plantillas para editar plantillas de WooCommerce

Debe sobrescribir sus plantillas cuando desee realizar personalizaciones complejas , ya que le brinda más flexibilidad que los ganchos.

El proceso es muy similar al de editar el archivo functions.php . En este caso, editará los archivos de plantilla principales de WooCommerce en lugar de personalizar los archivos de tema.

Para acceder a los archivos de plantilla, en su panel de control, vaya a Complementos > Editor de complementos , seleccione WooCommerce en el menú desplegable y luego navegue hasta los archivos de plantilla en la pestaña de plantillas .

Encontrará todos los archivos principales que desea editar aquí, como archive-product.php , content-product-cat.php , content-product.php , etc. Del mismo modo, también puede editar los archivos de plantilla en el carrito, pago, correo electrónico y muchos más.

Como puede imaginar, hay muchos archivos de plantilla de WooCommerce que puede editar. Puede personalizar los subdirectorios, así como las carpetas de estos archivos. Para obtener más información sobre qué archivos puede personalizar, consulte la lista completa de los archivos de plantilla que puede editar aquí.

Ahora echemos un vistazo a algunos ejemplos de cómo puede personalizar las plantillas de WooCommerce .

1.1.1. Agregue Shortcode a las plantillas de WooCommerce

Una de las prácticas más comunes al personalizar el código en WooCommerce es usar códigos cortos. Hay muchos códigos abreviados oficiales proporcionados por WooCommerce y WordPress que puede usar para editar plantillas.

La siguiente secuencia de comandos mostrará el panel de Mi cuenta de WooCommerce en todas las páginas de productos individuales. Simplemente péguelo en el archivo single-product.php y actualícelo.

 <?php
if ( ! definido( 'ABSPATH' ) ) {
   Salida; // Salir si se accede directamente
}
get_header('tienda');
   mientras ( have_posts() ) : 
   el cargo();
   wc_get_template_part('contenido', 'producto único');
   mientras tanto; // fin del bucle.
hacer_acción('woocommerce_sidebar');
   $t= '<div><h4>Mi Cuenta</h4>';
   $t.= do_shortcode(" [ woocommerce_my_account ] "); $t.="</div>"; eco $t; get_footer('tienda');

Después de eso, obtenga una vista previa de las páginas del producto y podrá ver el panel de control de la cuenta.

Para obtener más información sobre cómo editar las páginas de productos mediante programación, consulte esta guía paso a paso.

1.1.2. Recordar al Cliente que ha Comprado el Producto Antes

También puede personalizar las plantillas de WooCommerce para proporcionar a sus compradores leales un código de descuento si han comprado un producto antes. Una vez más, debe pegar el siguiente código en el archivo single-product.php y actualizarlo.

 get_header('tienda');
   mientras ( have_posts() ) : 
    el cargo(); 
    wc_get_template_part('contenido', 'producto único');
   mientras tanto; // fin del bucle.
$usuario_actual = wp_get_usuario_actual();
if ( wc_cliente_comprado_producto( $usuario_actual->correo_electrónico, $usuario_actual->ID, $producto->get_id() ) ):
echo '<div class="comprado por el usuario">&hearts; Oye ' . $usuario_actual->nombre_de pila. ', has comprado esto antes. Vuelva a comprar con este cupón: <b>PURCHASE_AGAIN_21</b></div>';
terminara si;
get_footer('tienda');

Ahora, tan pronto como sus clientes vean un producto que ya compraron, aparecerá el siguiente mensaje.

Estas son algunas de las formas en que puede editar plantillas de WooCommerce sobrescribiendo las plantillas. Si desea obtener más referencias y ejemplos, consulte nuestra guía detallada sobre cómo personalizar las plantillas de WooCommerce mediante programación.

1.2. Uso de ganchos para editar plantillas de WooCommerce

También puede usar ganchos para personalizar las plantillas de WooCommerce si no se siente completamente cómodo sobrescribiendo los archivos de la plantilla. Los ganchos son funciones que puede agregar como una acción o un filtro y pueden ayudarlo a aumentar rápidamente la funcionalidad de su sitio web y realizar modificaciones simples .

Del mismo modo, también puedes usar los ganchos de WooCommerce para editar las plantillas de tu tienda. Recomendamos este enfoque solo si desea realizar personalizaciones simples. Para modificaciones complejas, sobrescribir plantillas es un método más apropiado.

Para agregar ganchos a su tienda en línea, todo lo que necesita hacer es ir a Apariencia > Editor de temas , abrir el archivo functions.php y agregar fragmentos de código con los ganchos de acción o filtro.

Aquí hay algunos fragmentos de ejemplo que puede usar para editar las plantillas de WooCommerce usando ganchos.

1.2.1. Agregar información arriba de la imagen en un solo producto

Si desea incluir información adicional sobre los productos encima de la imagen del producto, simplemente agregue el siguiente script en el archivo functions.php .

 // Añadir función personalizada
función quadlayers_before_single_product() {
echo '<h2>¡Todo tiene un 25% de descuento esta semana!</h2>';
}

// Agrega la acción
add_action('woocommerce_before_single_product', 'quadlayers_before_single_product', 11);

Esto mostrará el mensaje sobre las imágenes del producto en las páginas de un solo producto.

1.2.2. Agregue la descripción de la tienda debajo del título de la tienda en la página de la tienda

Puede usar el siguiente fragmento de código para mostrar la descripción de la tienda en la página de la tienda. La descripción se mostrará justo debajo del título de la tienda.

 // Añadir función personalizada
función quadlayers_custom_archive_description() {
$new_description = '<p>Esta es nuestra tienda. ¡Disfruta de tus compras!</p>';
devuelve $nueva_descripción;
}

// Agrega la acción
add_action('woocommerce_archive_description', 'quadlayers_custom_archive_description');

Después de guardar los cambios, podrá ver la descripción de la tienda en la página de la tienda de WooCommerce.

Para obtener más información sobre cómo editar las plantillas usando ganchos, consulte nuestro tutorial sobre cómo personalizar las plantillas de WooCommerce mediante programación.

2. Personalice las plantillas de WooCommerce usando un complemento

Si no tiene habilidades de codificación, hay otra solución para usted. Puede editar plantillas de WooCommerce usando complementos.

Hay varios complementos para personalizar sus plantillas. Para este tutorial, usaremos Editar plantillas de WooCommerce . Es un complemento sencillo y gratuito que le permite personalizar las plantillas de su tema. Puede realizar cambios en sus plantillas y también restablecer los valores predeterminados cuando lo desee con unos pocos clics.

A diferencia de los enfoques programáticos, con este complemento, puede seleccionar directamente las plantillas que desea editar en lugar de buscarlas en el tema y los archivos de WooCommerce. Una vez que encuentre la plantilla que desea, todo lo que necesita hacer es agregar los fragmentos de código para sobrescribir la plantilla y guardar los cambios. De esta manera, puede ahorrar mucho tiempo ya que no tendrá que buscar y abrir cada archivo de plantilla que desee editar.

Vamos a explicar mejor esto con algunos ejemplos.

2.1. Instalar y activar el complemento

Para comenzar a usar el complemento, primero debe instalarlo y activarlo. En su panel de WordPress, vaya a Complementos > Agregar nuevo y busque Editar plantillas de WooCommerce . Haga clic en Instalar ahora y luego actívelo.

Alternativamente, puede descargar el complemento e instalarlo manualmente. Si desea obtener más información sobre este proceso, consulte nuestra guía sobre cómo instalar los complementos de WordPress manualmente.

2.2. Edite las plantillas

Una vez que haya activado el complemento, puede comenzar a personalizar las plantillas de WooCommerce. En tu tablero, ve a WooCommerce > Plantillas de temas y podrás ver todas las plantillas que puedes cambiar en tu tema actual. Para cada plantilla, verá el título, la ruta y el estado de si se ha cambiado en el tema actual.

Para editar cualquier archivo de plantilla, todo lo que necesita hacer es presionar Editar en la plantilla que desee. Si no puede ver la plantilla que desea editar, también puede buscarla usando la barra de búsqueda.

Después de eso, será redirigido al editor de plantillas donde deberá agregar sus fragmentos de código. Para esto, puede usar cualquiera de los fragmentos mencionados anteriormente en la sección programática. Por supuesto, también puede tomarlos como base y personalizarlos para crear su propia solución personalizada.

Una vez que agregue el fragmento de código al editor, haga clic en Guardar plantilla en el tema .

Si luego cambia de opinión y desea restablecer cualquier cambio que haya realizado en la plantilla, simplemente haga clic en Restablecer para deshacer los cambios.

Una vez que haya guardado su personalización, los cambios se aplicarán a la plantilla de su tema actual. Para comprobar si los cambios se guardaron correctamente o no, vaya a WooCommerce > Plantillas de temas y el estado en la columna "Cambiado en el tema actual" debería cambiar a Sí .

¡Eso es! De esta manera, puede personalizar cualquier plantilla de WooCommerce y destacarse de sus competidores.

Bonificación: Cómo editar plantillas de correo electrónico de WooCommerce

Ya te hemos mostrado diferentes formas de personalizar las plantillas de WooCommerce. Una de las primeras plantillas que recomendamos cambiar es la plantilla de correo electrónico. Probablemente envíe varios correos electrónicos automáticos a sus clientes con respecto a sus pedidos, por lo que las plantillas de correo electrónico son una buena manera de comenzar.

Como tienda en línea, le gustaría tener la información de contacto correcta de sus compradores . Pero es posible que la plantilla de correo electrónico predeterminada de WooCommerce no ofrezca todo lo que necesita en todos los escenarios.

La buena noticia es que editar las plantillas de correo electrónico de WooCommerce es bastante fácil y puede realizar la mayoría de los cambios desde el panel de control de WordPress sin complementos ni fragmentos de código. Simplemente vaya a WooCommerce> Configuración y abra la pestaña Correos electrónicos . Allí podrá ver todas las opciones personalizables para el remitente del correo electrónico y las plantillas de correo electrónico.

Desde las opciones del remitente de correo electrónico, puede editar el nombre y la dirección "De". Esto cambiará la forma en que se muestran el nombre y la dirección del remitente en los correos electrónicos que envíe a sus clientes.

Del mismo modo, también puede cambiar la imagen del encabezado, el texto del pie de página y el cuerpo, así como el texto y el color de fondo de las plantillas de correo electrónico.

Después de haber realizado todos los cambios que desea, puede obtener una vista previa de la plantilla de correo electrónico haciendo clic en el enlace " Haga clic aquí para obtener una vista previa de su plantilla de correo electrónico ".

Si está satisfecho con la vista previa, simplemente guarde los cambios y listo. Esta es una forma excelente y rápida de personalizar su tienda y causar una buena impresión en sus compradores.

Este es solo un ejemplo, pero hay más formas de cambiar las plantillas de correo electrónico de WooCommerce. Para obtener más información al respecto, consulte nuestra guía sobre cómo editar plantillas de correo electrónico de WooCommerce.

Conclusión

En resumen, editar sus plantillas es una excelente manera de brindar una mejor experiencia a sus clientes y destacarse de sus competidores.

En esta guía, hemos visto dos formas principales de personalizar las plantillas de WooCommerce:

• Programáticamente
• Usando un complemento

Si sabes codificar, el primer método es el indicado para ti. Puede editar plantillas usando ganchos o sobrescribiendo las plantillas. El uso de ganchos es una práctica recomendada cuando desea aplicar cambios pequeños y simples, mientras que si desea una personalización más compleja, deberá sobrescribir las plantillas.

Alternativamente, puede usar un complemento para personalizar sus plantillas para ahorrar tiempo. Con un complemento, no necesitará encontrar archivos de plantilla particulares en su sitio web. Simplemente puede comenzar a personalizar los archivos de plantilla proporcionados por el complemento y editarlos directamente en su sitio web.

Finalmente, también le mostramos cómo editar plantillas de correo electrónico para que pueda impresionar a sus compradores desde el momento en que le compran.

Esperamos que pueda realizar cualquier cambio en las plantillas de WooCommerce sin ningún problema ahora. ¿Qué método has usado? ¡Háganos saber en los comentarios a continuación!

Si esta guía le resultó útil, aquí hay algunos artículos más que podrían interesarle:

• Cómo probar las plantillas de correo electrónico de WooCommerce: ¡3 maneras fáciles!
• Los mejores complementos de WooCommerce para personalizar la página Mi cuenta
• Cómo personalizar el formulario de registro de WooCommerce