Cómo personalizar las plantillas de WooCommerce mediante programación

Publicado: 2021-05-04

¿Quieres editar plantillas en tu sitio? Esta guía le mostrará cómo personalizar las plantillas de WooCommerce mediante programación, tanto con enlaces como sobrescribiéndolas .

¿Por qué editar plantillas de WooCommerce?

Comprar en línea es más cómodo y rápido que ir a las tiendas físicas, por lo que el comercio electrónico se ha vuelto extremadamente popular en los últimos años. Con tanta competencia, no es suficiente configurar su tienda WooCommerce y poner sus productos en línea. Necesita encontrar maneras de diferenciarse y destacarse entre la multitud .

Una de las mejores formas de hacerlo es personalizando tu tienda. Además de cambiar el encabezado y editar las páginas clave, como el pago o la página de la tienda, también puede personalizar las plantillas que utiliza. No hay muchos sitios que editen sus plantillas, por lo que al hacerlo podrá tener una ventaja sobre sus competidores .

Si tiene habilidades de codificación, probablemente sepa que se recomienda usar un tema secundario al editar su tienda. Del mismo modo, los ganchos incorporados de WordPress y WooCommerce ofrecen muchas posibilidades para editar y agregar nuevas funciones a cualquier sitio web.

Cómo personalizar las plantillas de WooCommerce mediante programación

Hay dos formas principales de personalizar las plantillas de WooCommerce mediante programación:

  1. con ganchos
  2. Sobrescribir las plantillas

Cada uno de estos métodos sirve para diferentes propósitos. Echemos un vistazo más de cerca a sus principales diferencias.

¿Sobrescribir archivos de plantilla o usar ganchos?

Personalizar tu tienda con ganchos es una práctica recomendada. Sin embargo, al personalizar WooCommerce con ganchos, es posible que enfrente problemas de incompatibilidad. Para personalizaciones más complejas, sobrescribir los archivos de plantilla de WooCommerce puede ser una mejor opción.

Es importante tener en cuenta que cuando sobrescribe un archivo de plantilla, los ganchos que funcionan en ese archivo dejarán de funcionar. Cada enlace apunta a un archivo específico, por lo que no podrá usarlos si edita el mismo archivo que activa el enlace.

Por ejemplo, tomemos el archivo single-product.php para ver cómo se crean los ganchos. Además, tenga en cuenta dónde están los ganchos antes y después del bucle.

 if ( ! definido( 'ABSPATH' ) ) {
        Salida; // Salir si se accede directamente
 }
 get_header('tienda'); ?>
 <?php
                /**
                 * gancho woocommerce_before_main_content.
                 *
                 * @hooked woocommerce_output_content_wrapper - 10 (muestra divs de apertura para el contenido)
                 * @hooked woocommerce_breadcrumb - 20
                 */
                do_action('woocommerce_before_main_content');
        ?>
                <?php while ( have_posts() ) : ?>
                        <?php la_publicación(); ?>
                        <?php wc_get_template_part( 'contenido', 'producto único' ); ?>
                <?php mientras tanto; // fin del bucle. ?>
        <?php
                /**
                 * gancho woocommerce_after_main_content.
                 *
                 * @hooked woocommerce_output_content_wrapper_end - 10 (muestra divisiones de cierre para el contenido)
                 */
                do_action('woocommerce_after_main_content');
        ?>
        <?php
                /**
                 * gancho woocommerce_sidebar.
                 *
                 * @hooked woocommerce_get_sidebar - 10
                 */
                hacer_acción('woocommerce_sidebar');
        ?>
 <?php
 get_footer('tienda');

Si echas un vistazo al script, verás cómo creamos los ganchos en do_action('name-of-the-hook'); líneas.

Digamos que tienes el siguiente gancho en el archivo functions.php de tu tema hijo:

 add_action('woocommerce_after_main_content',function(){echo "contenido personalizado después del archivo de plantilla de un solo producto";});

Puede repetir el mismo contenido directamente en el archivo de plantilla de la siguiente manera:

 <?php mientras tanto; // fin del bucle. ?>
        <?php
 echo "contenido personalizado después del archivo de plantilla de un solo producto";
                /**
                 * gancho woocommerce_after_main_content.
 do_action('woocommerce_after_main_content');

Sin embargo, al hacerlo, do_action('woocommerce_after_main_content'); la función se volverá inútil ya que ha agregado su código allí en lugar de tirarlo con el gancho. Por lo tanto, es posible que desee eliminar todos los enlaces innecesarios en el archivo eliminando do_action('name-of-the-hook'); secciones.

Tenga en cuenta que si está utilizando el gancho woocommerce_after_main_content() en otro lugar de su sitio web y elimina el do_action( 'name_of_your_hook' ); en este archivo, el gancho ya no funcionará.

Después de eliminar los ganchos y las etiquetas PHP innecesarias, su archivo debería verse así:

 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');
 get_footer('tienda');
 NOTA : La eliminación de ganchos de esta manera puede afectar el código de terceros, como complementos y temas, causando fallas o rompiendo su sitio web. Se supone que usted sabe lo que está haciendo.
		


 Personalice y sobrescriba los archivos de plantilla de WooCommerce
 Sobrescribir los archivos de plantilla de WooCommerce le brinda mucha flexibilidad para personalizar su tienda. Sin embargo, como se mencionó anteriormente, debe comprender que cuando sobrescribe el contenido de un archivo de plantilla, los ganchos que funcionan en ese archivo dejarán de funcionar. Además, WooCommerce puede cambiar los archivos de plantilla de vez en cuando, por lo que si hay una actualización y cambian los archivos, es posible que el archivo que editas no esté actualizado.
 Aspectos a tener en cuenta al sobrescribir plantillas
 Si está aquí, probablemente tenga algunas habilidades de codificación y sepa cómo usar e instalar un tema secundario. Si ese no es el caso, consulte nuestra guía para crear un tema secundario o use uno de estos complementos.
		


 Sobrescribir plantillas de WooCommerce es similar a sobrescribir el archivo functions.php . La principal diferencia es que editas los archivos de plantilla de WooCommerce en lugar de tus archivos de tema.
 Para hacer eso, debe copiar el archivo de plantilla deseado de la carpeta de plantillas del complemento WooCommerce y pegarlo en su tema secundario en la carpeta WooCommerce. Si sigue la misma estructura de la carpeta de plantillas, nombres de archivo y subcarpetas de WooCommerce; podrá sobrescribir archivos de plantilla, incluso aquellos dentro de subcarpetas.
 Hay muchos archivos de plantilla de WooCommerce y cada uno de ellos es responsable de una sola tarea. puede consultar la lista completa de archivos de plantilla que puede editar, así como los subdirectorios y la estructura de carpetas en este enlace.
		


 Como puede ver, hay algunos archivos en la carpeta raíz de la plantilla, así como varios subdirectorios. Puede personalizar archivos dentro de cualquier subdirectorio de la misma manera que edita archivos principales como archive-product.php , single-product.php o content-single-product.php . Del mismo modo, también puede personalizar archivos en el carrito, Mi cuenta, correos electrónicos o carpetas de pago si sigue los mismos nombres de carpetas y estructura que en su tema secundario.
 Entonces, si desea personalizar algunos de estos archivos, su tema secundario se vería así: Cómo personalizar las plantillas de woocommerce programáticamente
 Dicho esto, echemos un vistazo a algunos ejemplos de cosas que puede hacer para personalizar las plantillas de WooCommerce.
		


 1. Agregue códigos cortos a la plantilla de WooCommerce
 Una alternativa interesante es usar shortcodes en tu código. La mayoría de los códigos cortos existentes deberían funcionar aquí, pero también es común encontrar algunos códigos cortos no compatibles fuera de los códigos oficiales de WooCommerce y WordPress.
 Por ejemplo, la siguiente secuencia de comandos incluirá el panel de control de la cuenta en todas las páginas de un solo producto. Recuerde pegarlo en el archivo single-product.php que ha creado en su tema hijo.
 <?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');
 Y este es el resultado en una página de producto en vivo: 
		


Personalice los archivos de plantilla de woocommerce: agregue códigos cortos a la plantilla wc
 2. Mostrar contenido para los clientes que compraron ese producto antes
 Si tiene clientes que ya le compraron un producto y vuelven a comprar el mismo producto nuevamente, puede proporcionarles un código de descuento como una forma de mejorar su experiencia y hacer que regresen a su tienda una y otra vez.
 La siguiente secuencia de comandos mostrará contenido en la página del producto para los clientes recurrentes que compraron el mismo producto en el pasado. Una vez más, editamos el archivo single-product.php :
 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'); 
Personalice los archivos de plantilla de woocommerce: muestre el contenido para los clientes comprados antes de regresar
 3. Eliminar el botón Agregar al carrito según la cantidad del producto y el precio total del carrito
 Otro ejemplo interesante si desea personalizar sus plantillas de WooCommerce mediante programación es agregar el botón Carrito según la cantidad de artículos que el cliente está comprando, así como el precio total del carrito.
 En este caso, vamos a ingresar al bucle de WooCommerce usando un archivo ubicado dentro de la carpeta del bucle en el directorio de plantillas. Simplemente cree un nuevo archivo add-to-cart.php en una carpeta llamada loop , en la carpeta de woocommerce de su tema secundario, y pegue este script:
 if ( ! definido( 'ABSPATH' ) ) {
 Salida;
 }
 $producto global;
 $cuenta= WC()->carrito->get_cart_contents_count();
 $precio_total= WC()->carrito->get_cart_total();
 preg_match_all('!\d+!', $precio_total, $coincidencias);
 $to_int = intval($coincidencias[0][1]);
 si ($to_int>500){
 echo "Excede la cantidad límite para el carrito total";
 }
 elseif ($ cuenta <10) {
 echo aplicar_filtros(
 'woocommerce_loop_add_to_cart_link', // WPCS: XSS ok.
 carrera de velocidad(
 '<a href="%s" cantidad-datos="%s" clase="%s" %s>%s</a>',
 esc_url( $producto->añadir_al_carrito_url() ),
 esc_attr( isset( $args['cantidad'] ) ? $args['cantidad'] : 1 ),
 esc_attr( isset( $argumentos['clase'] ) ? $argumentos['clase'] : 'botón' ),
 isset( $args['atributos'] ) ? wc_implode_html_attributes( $args['atributos'] ) : '',
 esc_html( $producto->add_to_cart_text() )
 ),$producto,$argumentos);
 }
 demás{
 echo "Límite de cantidad excedido";
 }
 En este caso, estamos agregando una instrucción if() de lógica condicional para verificar si hay más de 10 artículos agregados al carrito y si el precio total del carrito no supera los $ 500.
 Como puede ver, estamos entrando en el alcance de la clase WooCommerce llamando al objeto WooCommerce de esta manera: WC()->cart . De esta manera, puede recuperar información para agregar un botón de carrito a la página de la tienda o no, según sus condicionales.
 Aquí está el resultado al aplicar ambas restricciones condicionales: 
Eliminar el botón Agregar al carrito según la cantidad de productos y el precio total del carrito
 Tenga en cuenta que esto solo funcionará en la página principal de la tienda. Deberá agregar más código si desea hacer lo mismo en otras páginas.
 4. Edite los archivos de plantillas de correo electrónico de WooCommerce
 Las plantillas de correo electrónico ya incluyen enlaces útiles a su sitio web, pero es posible que algunos usuarios no lo sepan. Así que agreguemos un enlace a las plantillas de correo electrónico donde los usuarios pueden iniciar sesión en el sitio web directamente desde el correo electrónico que han recibido.
 Agregaremos el enlace en el encabezado del diseño del correo electrónico, por lo que necesitamos una copia del archivo email-header.php , ubicado en la carpeta de correo electrónico del subdirectorio de plantillas de WooCommerce.
 Cree una nueva carpeta en su tema hijo y pegue allí el archivo con el mismo nombre. Verá los indicadores de inicio <!–header–> y <!–end header–> , y ahí es donde agregará el enlace:
 <!-- Encabezado -->
 <borde de la tabla="0" relleno de celdas="0" espaciado de celdas="0" ancho="100%">
 <tr>
 <td>
 <h1><?php echo $email_encabezado; ?></h1>
 <h3>
 <?php echo '<span class="my-link"><a href="#login-URL">Inicia sesión en tu cuenta</a></span>';?>
 </h3>
 </td>
 </tr>
 </tabla>
 <!-- Encabezado final →
 ¡Eso es! Acaba de editar el archivo de encabezado de la plantilla de correo electrónico de WooCommerce. De la misma manera, puede editar todos los archivos de plantilla de correo electrónico ubicados en este directorio. Para obtener más información sobre cómo probar sus plantillas de correo electrónico, consulte esta guía completa.
 Para obtener una vista previa de las plantillas, le recomendamos que utilice un complemento de vista previa de correo electrónico. Aquí encontrará algunos de los complementos de correo electrónico que puede usar. 
Edición de archivos de plantillas de correo electrónico de WC
 5. Cómo aplicar el estilo CSS a las plantillas de correo electrónico de WooCommerce
 Otra alternativa interesante es personalizar el estilo de tus plantillas de WooCommerce mediante programación. Una vez que edite el marcado HTML, puede agregar algunos estilos CSS a las plantillas de correo electrónico. Teniendo en cuenta que CSS en línea no es una práctica recomendada, necesitaremos usar el archivo email-styles.php . Este es el archivo que maneja el CSS para las plantillas de correo electrónico.
 Para aplicar un código CSS personalizado a los correos electrónicos, copie este archivo de las carpetas del complemento de WooCommerce y péguelo en la carpeta de su tema WooCommerce. Este es un archivo PHP, por lo que podrá usar variables, funciones y crear su propia declaración lógica y aplicarlas a los estilos:
 a {
 color: <?php echo esc_attr( $enlace_color ); ?>;
 peso de fuente: normal;
 decoración de texto: subrayado;
 }
 Y este es el selector de enlace personalizado:
 .mi-enlace > a:nth-child(1){
 color blanco;
 tamaño de fuente: 14px;
 }
 Conclusión
 En resumen, editar archivos de plantilla es una excelente manera de destacarse de sus competidores y brindar a sus clientes una mejor experiencia de compra.
 Hay 2 formas principales de personalizar las plantillas de WooCommerce mediante programación:
  •  con ganchos
  •  Sobrescribir las plantillas
 Hemos comparado ambos métodos y le mostramos varios ejemplos. Puede usar los scripts como base y experimentar para personalizarlos y aplicarlos a su tienda.
 Si tiene algún problema al seguir la guía, infórmenos en los comentarios a continuación y haremos todo lo posible para ayudarlo.