Hoy en día, WooCommerce ha revolucionado la industria del comercio electrónico con su innovadora flexibilidad y opciones de personalización. En el mundo del comercio electrónico, ocupa un lugar destacado. Actualmente, posee el 27 % de la cuota de mercado del comercio electrónico .
Pero las plantillas prediseñadas y las páginas de producto no satisfacen las necesidades de todas las empresas. WooCommerce ofrece muchas opciones de personalización.
Para un buen rendimiento, su tienda debe seguir las mejores prácticas de personalización. Un componente clave de la personalización reside en las páginas de producto y las plantillas. Una estrategia de personalización bien implementada puede reducir los carritos abandonados.
Dado que la mayoría de los clientes visitan su tienda en línea, debe facilitar la navegación y la personalización de productos y plantillas para garantizar el éxito.
Este artículo le muestra cómo personalizar plantillas de WooCommerce, editar plantillas de productos y personalizar páginas de productos.
¿Por qué es importante que los propietarios de tiendas personalicen las plantillas de WooCommerce?
WooCommerce ofrece muchísimas opciones de personalización. Puedes personalizar cualquier cosa, desde la página de pago hasta la de la tienda, páginas de categorías, páginas de agradecimiento, etc. Esto ayuda a que tu tienda destaque entre la multitud, pero para que sea realmente distintiva, personalizar las plantillas de WooCommerce puede ser útil.
Es fundamental editar las páginas predeterminadas de tu sitio web para que tengan una apariencia diferente a la de la competencia. También puedes personalizar las plantillas predeterminadas para que tu negocio destaque.
Las plantillas que uses se pueden personalizar para añadir funcionalidad y detalles a tu tienda online. Con estas funciones, puedes ofrecer a tus compradores una mejor experiencia. Por lo tanto, es fundamental mantener tu tienda online actualizada aprendiendo a editar plantillas de WooCommerce. Sigue leyendo para descubrir cómo editar plantillas de WooCommerce.
Leer : ¿Cómo actualizo mi tarjeta de débito en WooCommerce?
Personalización de plantillas de WooCommerce con PHP
Los plugins y fragmentos de código te permiten editar prácticamente cualquier aspecto de tu sitio web. Con WooCommerce, puedes editar plantillas mediante programación.
Las siguientes son dos formas de personalizar plantillas mediante programación:
- Sobrescritura de plantillas
- Con ganchos
Ambos métodos funcionan, así que elige el que te resulte más fácil. Debes comprender las principales diferencias entre estos métodos para determinar cuándo usar cada uno.
Ganchos vs. sobrescritura de plantillas
Con los ganchos, se pueden realizar modificaciones sencillas mediante acciones y filtros. Al sobrescribir los archivos de plantilla, se pueden realizar personalizaciones más complejas.
Además, tenga en cuenta que no debe sobrescribir un archivo de plantilla con un gancho si se usa en un archivo de plantilla específico. Sobrescribir la plantilla provocará que los ganchos utilizados en ese archivo se reemplacen y dejen de ser efectivos.
Después de determinar sus necesidades, seleccione el método que se adapte a sus necesidades.
Explorar : Los mejores complementos de tablas de productos para WooCommerce
Modificar plantillas de WooCommerce sobrescribiéndolas
Al realizar personalizaciones complejas, sobrescribir las plantillas es mejor que usar ganchos.
De forma similar, editar functions.php es muy similar. Se deben editar los archivos principales de la plantilla de WooCommerce en lugar de los archivos del tema.
Haga clic en Complementos > Editor de complementos, elija WooCommerce en el menú desplegable y elija plantillas para ver los archivos de plantilla.
Esta sección contiene todos los archivos principales que necesitas editar: archive-product.php, content-product-cat.php y content-product.php. También puedes editar archivos de plantilla en varias ubicaciones, como el carrito, el proceso de pago y el correo electrónico.
Los archivos de plantilla de WooCommerce incluyen muchas opciones de modificación. Esto te permite personalizar tanto los subdirectorios como las carpetas.
El siguiente paso es ver plantillas WooCommerce personalizadas.
Agregue códigos cortos a las plantillas de WooCommerce.
Los shortcodes son una forma común de personalizar el código de WooCommerce. Para editar plantillas, WordPress y WooCommerce ofrecen una gran variedad de shortcodes.
A continuación, se muestra un script que muestra el panel de control de Mi cuenta de WooCommerce en cada página de producto. Añádelo al archivo single-product.php y actualízalo.
| if ( !defined( 'ABSPATH' ) ) { exit; // Salir si se accede directamente } get_header( 'tienda' ); while ( have_posts() ): the_post(); wc_get_template_part( 'content,' 'single-product' ); endwhile; // Fin del bucle. do_action( 'woocommerce_sidebar' ); $t= ' Mi cuenta';$t.= do_shortcode(“[woocommerce_my_account]”); $t.=” ”; echo $t; get_footer( 'tienda' ); |
El panel de control aparecerá después de obtener una vista previa de las páginas del producto.
Asegúrese de que el cliente sepa que compró esto antes
Las plantillas de WooCommerce también se pueden modificar para ofrecer descuentos a clientes fieles. Aquí también, copia y pega el código en la página single-product.php.
| get_header( 'tienda' ); while ( have_posts() ): the_post(); wc_get_template_part( 'contenido', 'producto-único' ); endwhile; // fin del bucle. $current_user = wp_get_current_user(); if ( wc_customer_bought_product( $current_user->user_email, $current_user->ID, $product->get_id() ) ): echo ' ♥ Hola ' . $current_user->first_name . ', ya has comprado esto antes. Vuelve a comprar con este cupón: PURCHASE_AGAIN_21 ';endif; get_footer( 'tienda' ); |
Los clientes verán el mensaje de pago después de ver un producto que ya han comprado.
Explorar : Magento vs. WooCommerce: ¿Cuál es la mejor opción en 2023?
Edición de plantillas de WooCommerce mediante ganchos
Los ganchos también son útiles para personalizar las plantillas de WooCommerce si no te gusta sobrescribir archivos de plantilla. Puedes añadir ganchos como acciones o filtros a tu sitio web para aumentar su funcionalidad rápidamente y realizar cambios sencillos.
Además, puedes editar las plantillas de tu tienda mediante los ganchos de WooCommerce. Este método solo se recomienda para personalizaciones sencillas. Es mejor sobrescribir las plantillas para modificaciones complejas.
Abra su archivo functions.php en Apariencia > Editor de temas y copie y pegue el fragmento de código con sus ganchos de acción o filtro.
A continuación se muestran algunos ejemplos de ganchos disponibles para editar plantillas de WooCommerce.
Agregar información a una sola imagen de producto
Si desea mostrar información adicional sobre el producto encima de la imagen, inserte el siguiente código en functions.php.
| // Agregar función personalizada function quadlayers_before_single_product() { echo '¡ Todo tiene un 25% de descuento esta semana!';} // Agregar la acción add_action( 'woocommerce_before_single_product', 'quadlayers_before_single_product', 11 ); |
En las páginas de productos individuales, aparecerá este mensaje.
Personalizar una plantilla de WooCommerce con complementos
¿Tienes problemas con la codificación? No hay problema. Puedes personalizar las plantillas de WooCommerce con plugins. A medida que la industria crece, aparecen innumerables plugins para personalizar tus plantillas.
Aquí tienes el plugin más eficiente: Edit WooCommerce Templates . Es un plugin gratuito y fácil de usar que te permite personalizar las plantillas de tu tema. Con solo unos clics, puedes cambiar las plantillas y restaurar las predeterminadas en cualquier momento.
Estos son algunos de los complementos adicionales de WooCommerce que le permiten personalizar plantillas y mejorar el rendimiento de su tienda.
- Campos personalizados de WooCommerce : con este complemento, los usuarios pueden crear campos únicos dentro de las páginas de productos de WooCommerce, páginas de pago y más.
- Personalizador de WooCommerce : dedicado a las plantillas de WooCommerce, este complemento ofrece una variedad de opciones de personalización adicionales para su tienda.
- Personalizador de página de producto único de WooCommerce : este complemento le permite modificar la apariencia de la página de producto único dentro de WooCommerce.
Saber : ¿Cómo configurar las reservas de WooCommerce?
Personalizar las páginas de productos de WooCommerce: ¿por qué es esencial?
Personalizar las páginas de producto de WooCommerce es crucial, así que no te lo pierdas. Las ventajas de personalizar las páginas de producto de WooCommerce son infinitas. Con esto, puedes eliminar las preocupaciones de los clientes, crear una presentación distintiva y mejorar su satisfacción.
A continuación se presentan algunos beneficios cruciales de implementar la personalización en las páginas de productos:
Páginas optimizadas para la conversión
Una página de producto personalizada puede aumentar las tasas de conversión. Se pueden implementar numerosas opciones, como búsqueda y filtrado. Por lo tanto, los clientes encontrarán y comprarán productos con mayor facilidad y con menos inconvenientes.
Hazlo más atractivo
El objetivo de la personalización suele ser diseñar y maquetar páginas de producto que atraigan y atraigan a los clientes. El interés del cliente puede despertarse mediante imágenes atractivas, descripciones de productos atractivas y elementos estéticamente agradables.
La experiencia de usuario (UX) podría mejorarse
Asegúrate de que tus opciones de diseño sean claras e intuitivas, que la velocidad de carga sea rápida, que la navegación sea sencilla y que tus clientes tengan una excelente experiencia. Esto impulsará las conversiones y te ayudará a conseguir clientes recurrentes.
Conozca los mejores complementos de productos de WooCommerce
Formas de personalizar las páginas de productos
Para mantener el atractivo visual de tu tienda, necesitas personalizar tus páginas de producto. Aquí tienes tres métodos cruciales para personalizarlas correctamente:
- Mejore las páginas de productos de WooCommerce con complementos
Con WooCommerce, puedes crear fácilmente una tienda online. Hay varios plugins disponibles para mejorar tu tienda, incluyendo algunos que personalizan las páginas de producto.
Personalizar páginas de productos con complementos de WooCommerce es fácil:
Complementos
- Complementos de productos de WooCommerce : con este complemento, puede agregar casillas de verificación, menús desplegables y cuadros de texto a las páginas de sus productos.
- WooCommerce 360º Image : con este complemento, puedes rotar imágenes a tu gusto.
- Vídeo de producto para WooCommerce : el complemento permite agregar vídeos de productos.
- Tabla de tallas para WooCommerce : este complemento facilita agregar tablas de tallas a sus productos.
- Recomendaciones de productos : este complemento le permite agregar una sección de recomendaciones a su página de producto.
Relacionado : Más de 40 mejores plugins de WooCommerce [gratis y de pago]
- Personalización de páginas de productos de WooCommerce con CSS
Usar CSS para personalizar los productos de WooCommerce puede hacer que tu tienda online destaque y ofrecer a los clientes una experiencia única. Para cambiar las páginas de producto, escribe el código CSS.
Cuando haya iniciado sesión, vaya a Apariencia → Personalizar.
Código CSS para CTA en negro
Agregar este código a CSS adicional cambiará el color predeterminado del CTA a negro.
| botón.alt, entrada[tipo=”botón”].alt, entrada[tipo=”reiniciar”].alt, entrada[tipo=”enviar”].alt, .botón.alt, .área-de-widgets .widget a.botón.alt { color-de-fondo: #1d1a1a; color-del-borde: #333333; color: #ffffff; } |
Código CSS para CTA azul
Además, para convertir el negro en azul, utilice el siguiente código CSS.
| botón.alt, entrada[tipo=”botón”].alt, entrada[tipo=”reiniciar”].alt, entrada[tipo=”enviar”].alt, .botón.alt, .área-de-widgets .widget a.botón.alt { color-de-fondo: #4f5dd5; color-del-borde: #333333; color: #ffffff; } |
- Agregar código personalizado a las páginas de productos de WooCommerce
Si tiene conocimientos técnicos, puede implementar fácilmente la personalización de la página del producto a través de un código personalizado.
Aprenda : ¿Por qué las preguntas frecuentes son esenciales para su tienda WooCommerce?
Paso 1: Establecer una plantilla global
Para empezar, es necesario establecer una plantilla global que se utilizará para todas las páginas de producto.
Comience con un comentario PHP que indique el nombre de la plantilla en la parte superior.
Crea un archivo template-custom-product.php y colócalo en el tema activado.
| <?php /*Template Name: Customize Product*/ ?> |
Esta plantilla usa la página de producto predeterminada de WooCommerce. Aquí está el código.
| $params = array('publicaciones_por_página' => 5, 'tipo_de_publicación' => 'producto'); $wc_query = new WP_Query($params); ?> tener_publicaciones()) : ?> tener_publicaciones()) : $wc_query->la_publicación(); ?> |
Es una plantilla básica. Aunque funciona, puedes hacer más con WooCommerce.
WooCommerce ofrece varias funciones para personalizar las páginas de visualización de sus productos que incluyen una amplia gama de información:
| the_permalink() – Muestra la URL del producto. the_content() – Muestra la descripción completa del producto. the_excerpt() – Muestra una breve descripción del producto. the_ID() – Muestra el ID del producto. the_title() – Muestra el nombre del producto. the_post_thumbnail() – Muestra la imagen del producto. |
Paso 2: Agregar Funcionalidades en el functions.php del Tema Activado
Mostrar categorías de productos de WooCommerce
Las categorías son donde clasificas tus productos. Activa el tema e importa este fragmento al archivo functions.php para indicar la categoría de un producto.
si ( ! definido( 'ABSPATH' ) ) { salir; } global $producto; ?> obtener_sku() || $producto->es_tipo( 'variable' ) ) ) : ?> obtener_sku() ) ? $sku : esc_html__( 'N/D', 'woocommerce' ); ?> get_id(), ', ', ' ' . _n( 'Categoría:', 'Categorías:', count( $product->get_category_ids() ), 'woocommerce' ) . ' ', ' ' ); ?> get_id(), ', ', ' ' . _n( 'Etiqueta:', 'Etiquetas:', count( $product->get_tag_ids() ), 'woocommerce' ) . ' ', ' ' ); ?> |
Mostrar miniaturas de categorías de productos
Hay una miniatura disponible para cada categoría de producto. Cuando esté listo para configurar la visualización personalizada de su producto, agregue este código al archivo template.php o functions.php de su tema.
| función cwresponse_get_thumbnail(){ if(is_page(205)){ $args = array( 'tax_query' => array( array( 'taxonomy' => 'product_cat', 'field' => 'slug' ) ) ) ; $random_products = get_posts( $args ); foreach ( $random_products como $post ): setup_postdata( $post ); ?> fin para cada; wp_reset_postdata(); } } agregar_acción('wp_footer', 'cwresponse_get_thumbnail'); |
Desechar el encabezado de descripción.
Al usar Woocommerce, simplemente desmarque el campo de descripción de cada pestaña de producto y edite el archivo functions.php para incluir el siguiente código.
| add_filter( 'woocommerce_product_description_heading', '__return_null' ); |
Eliminar título del producto
Aquí se explica cómo eliminar el título en las pestañas de un solo producto de WooCommerce: coloque este código en functions.php.
| remove_action( 'resumen_de_producto_único_woocommerce', 'título_único_de_plantilla_woocommerce' ); |
Paso 3: Cambiar las plantillas de WooCommerce
Inserta el código a continuación en el archivo content-single-product.php o en el directorio de productos individuales, en woocommerce/templates. Es mejor usar functions.php.
<div class="images"><?php if ( has_post_thumbnail() ) { $image_caption = get_post( get_post_thumbnail_id() )-> extracto_de_publicación; $enlace_de_imagen = wp_get_attachment_url( obtener_id_de_miniatura_de_publicación() ); $imagen = obtener_la_miniatura_de_publicación( $publicación->ID, aplicar_filtros( 'tamaño_de_miniatura_grande_de_producto_único', 'tienda_única' ), matriz( 'título' => obtener_el_título( obtener_id_de_miniatura_de_publicación() ) ) ); $recuento_de_archivos_adjuntos = contar( $producto->obtener_ids_de_archivos_adjuntos_de_galería() ); si ( $recuento_de_archivos_adjuntos > 0 ) { $galería = '[galería-de-producto]'; } de lo contrario { $galería = ''; } echo aplicar_filtros( 'woocommerce_imagen_de_producto_único_html', sprintf( ' <a href="%s" itemprop="image" class="woocommerce-main-image zoom" title="%s" data-rel="prettyPhoto' . $gallery . '">%s</a> ', $enlace_de_imagen, $título_de_imagen, $imagen ), $publicación->ID ); } else { echo aplicar_filtros( 'woocommerce_imagen_de_producto_único_html', sprintf( '<img src="%s" alt="%s" /> ', wc_placeholder_img_src(), __( 'Marcador de posición', 'woocommerce' ) ), $post->ID ); } ?><?php do_action( 'woocommerce_product_thumbnails' ); ?></div>Alternativamente, puedes simplemente escribir código CSS.
.images { float: ¡correcto! importante; }
¡Por fin! Ya terminaste.
Saber más: ¿Cómo agregar envío a WooCommerce?
Conclusión
La creación de páginas y plantillas de productos WooCommerce únicas y visualmente atractivas mejora la experiencia de compra de los clientes.
El uso de anulaciones, ganchos, filtros y personalización de CSS le permitirá personalizar sus páginas de productos para abordar las expectativas de sus clientes y alinearse con su identidad de marca.
Optimiza la compatibilidad móvil de tu tienda online con WooCommerce y personalízala para mejorar la experiencia del usuario. Empieza a implementar prácticas de personalización y optimiza tu tienda para obtener el máximo valor.
¿Buscas ayuda profesional para personalizar WooCommerce? ¡ Contáctanos hoy mismo!
