Hoy en día, Woocommerce ha conquistado 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 y las páginas de productos no satisfacen las necesidades de todas las empresas. Hay muchas opciones de personalización en WooCommerce.
Para funcionar bien, su tienda debe seguir las mejores prácticas de personalización. Un componente clave de la personalización se encuentra en las páginas y plantillas de productos. 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 las 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 tiene toneladas de opciones de personalización. Puede personalizar cualquier cosa, desde el pago hasta las páginas de la tienda, las páginas de categorías, las páginas de agradecimiento, etc. Esto ayuda a que su tienda se destaque entre la multitud, pero para ser verdaderamente distintiva, personalizar las plantillas de WooCommerce puede ser útil.
Es esencial editar las páginas predeterminadas de su sitio para que tengan una apariencia diferente a la de la competencia. También puedes personalizar las plantillas predeterminadas para darle una ventaja a tu negocio.
Las plantillas que utiliza se pueden personalizar para agregar funcionalidad y detalles a su tienda en línea. Con estas funciones, puede ofrecer a los compradores una mejor experiencia como cliente. Por lo tanto, debes mantener actualizada tu tienda de comercio electrónico profundizando en la edición de plantillas de WooCommerce. Continúe leyendo para explorar formas de editar plantillas de WooCommerce.
Leer : ¿Cómo actualizo mi tarjeta de débito en WooCommerce?
Personalización de plantillas de WooCommerce con PHP
Los complementos y fragmentos de código le permiten editar casi cualquier aspecto de su sitio web. Con WooCommerce, puede editar plantillas mediante programación.
Las siguientes son dos formas de personalizar plantillas mediante programación:
- Plantillas de sobrescritura
- Con ganchos
Ambos métodos funcionarán, así que elija el que le resulte más fácil. Debe comprender las principales diferencias entre estos métodos para determinar cuándo utilizar cada uno.
Ganchos versus plantillas de sobrescritura
Con los ganchos se pueden realizar modificaciones sencillas mediante acciones y filtros . Al sobrescribir archivos de plantilla, puede realizar personalizaciones más complejas.
Además, tenga en cuenta no sobrescribir un archivo de plantilla con un gancho si se utiliza en un archivo de plantilla específico. Sobrescribir la plantilla hará que los enlaces utilizados en ese archivo se reemplacen y dejen de ser efectivos.
Seleccione el método que se adapte a sus necesidades después de determinar sus necesidades.
Explorar : Los mejores complementos de tablas de productos de WooCommerce
Modificar plantillas de WooCommerce sobrescribiéndolas
Al realizar personalizaciones complejas, sobrescribir las plantillas es mejor que utilizar enlaces.
De manera similar, editar funciones.php es muy similar. Se deben editar los archivos de plantilla principales de WooCommerce en lugar de los archivos de 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 necesita editar, a saber, archive-product.php, content-product-cat.php y content-product.php. También es posible editar archivos de plantilla en varios lugares, como el carrito, el pago y el correo electrónico.
Los archivos de plantilla de WooCommerce tienen muchas cosas que puedes cambiar. Esto le permite personalizar tanto los subdirectorios como las carpetas.
El siguiente paso es ver las plantillas personalizadas de WooCommerce.
Agregue códigos cortos a las plantillas de WooCommerce.
Los códigos cortos son una forma común de personalizar el código de WooCommerce. Para editar plantillas, WordPress y WooCommerce le ofrecen un montón de códigos cortos .
A continuación se muestra un script que muestra el panel Mi cuenta de WooCommerce en cada página de producto. Agréguelo al archivo single-product.php y actualícelo.
| if (! definido( 'ABSPATH' ) ) { salir; // Salir si se accede directamente } get_header( 'tienda' ); mientras (have_posts()): the_post(); wc_get_template_part('contenido,' 'producto único'); final mientras; // fin del ciclo. do_action('woocommerce_sidebar'); $t= ' Mi Cuenta';$t.= do_shortcode(“[woocommerce_my_account]”); $t.=””; eco $t; get_footer('tienda'); |
El panel 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 leales. Aquí nuevamente, copie y pegue el código en la página single-product.php.
| get_header('tienda'); mientras (have_posts()): the_post(); wc_get_template_part('contenido', 'producto único'); final mientras; // fin del ciclo. $usuario_actual = wp_get_current_user(); if (wc_customer_bought_product( $current_user->user_email, $current_user->ID, $product->get_id() ) ): echo ' ♥ Hola'. $usuario_actual->primer_nombre . ', has comprado esto antes. Compra de nuevo usando 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 compraron.
Explorar : Magento vs. WooCommerce: ¿Cuál es la mejor opción en 2023?
Editar plantillas de WooCommerce usando ganchos
Los ganchos también son útiles para personalizar las plantillas de WooCommerce si sobrescribir archivos de plantilla no es lo tuyo. Puede agregar enlaces como acciones o filtros a su sitio web para aumentar su funcionalidad rápidamente y realizar cambios simples.
Además, puedes editar las plantillas de tu tienda a través de los ganchos de WooCommerce. Este enfoque sólo se recomienda para personalizaciones simples. Es mejor sobrescribir las plantillas para modificaciones complejas.
Abra su archivo funciones.php en Apariencia > Editor de temas y copie y pegue el fragmento de código con su acción o ganchos de filtro.
A continuación se muestran algunos ejemplos de enlaces 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 funciones.php.
| // Agregar función personalizada function quadlayers_before_single_product() { echo ' ¡Todo tiene un 25% de descuento para esta semana!';} // Agrega la acción add_action( 'woocommerce_before_single_product', 'quadlayers_before_single_product', 11 ); |
En las páginas de un solo producto, aparecerá este mensaje.
Personalización de la plantilla WooCommerce con complementos
¿Tiene problemas con los aspectos de codificación? No es un problema. Aún puedes personalizar las plantillas de WooCommerce con complementos. A medida que la industria crece, aparecen infinitos complementos para personalizar sus plantillas.
Aquí viene el complemento más eficiente: Editar plantillas de WooCommerce . Es un complemento gratuito fácil de usar que te permite personalizar las plantillas de tu tema. Con unos pocos clics, puedes intercambiar plantillas y restaurar los valores predeterminados en cualquier momento.
Estos son algunos de los complementos 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 reservas de WooCommerce?
Personalizar las páginas de productos de WooCommerce: ¿por qué es esencial?
Personalizar las páginas de productos de WooCommerce es fundamental, por lo que no te lo puedes perder. Los beneficios y ventajas de personalizar las páginas de productos de WooCommerce son infinitos. Con esto, es posible eliminar las preocupaciones de los clientes, establecer una presentación distintiva y mejorar la satisfacción del cliente.
A continuación se presentan algunos beneficios cruciales de poner la personalización a trabajar en las páginas de productos:
Páginas optimizadas para conversión
Una página de producto personalizada puede aumentar las tasas de conversión. Se pueden implementar muchas opciones, incluidas opciones de búsqueda y filtrado. Por lo tanto, los clientes encontrarán y comprarán productos más fácilmente y con menos puntos de fricción.
Hazlo más atractivo
El objetivo de la personalización suele ser diseñar y diseñar páginas de productos 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 podría mejorarse
Asegúrese de que sus opciones de diseño sean claras e intuitivas, que las velocidades de carga sean rápidas, que la navegación sea sencilla y que sus clientes tengan una excelente experiencia. Esto aumentará las conversiones y conseguirá que usted repita.
Saber : Los mejores complementos de productos WooCommerce
Formas de personalizar las páginas de productos
Para mantenerse actualizado con el atractivo visual de su tienda, debe personalizar las páginas de sus productos. Aquí le presentamos tres métodos cruciales para personalizar las páginas de productos con éxito:
- Mejore las páginas de productos de WooCommerce con complementos
Con WooCommerce, puedes crear fácilmente una tienda en línea. Hay varios complementos disponibles para mejorar su tienda, incluidos aquellos que personalizan las páginas de productos.
Personalizar las páginas de productos con complementos de WooCommerce es fácil:
Complementos
- Complementos de productos WooCommerce : con este complemento, puede agregar casillas de verificación, menús desplegables y cuadros de texto a las páginas de sus productos.
- Imagen 360º de WooCommerce : con este complemento, puedes rotar imágenes a tu gusto.
- Video de producto para WooCommerce : el complemento permite agregar videos de productos.
- Tabla de tallas para WooCommerce : este complemento facilita la adición de tablas de tallas a sus productos.
- Recomendaciones de productos : este complemento le permite agregar una sección de recomendaciones a la página de su producto.
Relacionado : Más de 40 mejores complementos de WooCommerce [gratis + de pago]
- Personalización de páginas de productos WooCommerce con CSS
El uso de CSS para personalizar los productos WooCommerce puede hacer que su tienda en línea se destaque y brinde a los clientes una experiencia única. Para cambiar las páginas de sus productos, escriba el código CSS.
Cuando haya iniciado sesión, vaya a Apariencia → Personalizar.
Código CSS para CTA negro
Agregar este código a CSS adicional cambiará el color de CTA predeterminado a negro.
| botón.alt, entrada[tipo=”botón”].alt, entrada[tipo=”reset”].alt, entrada[tipo=”enviar”].alt, .button.alt, .widget-area .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=”reset”].alt, entrada[tipo=”enviar”].alt, .button.alt, .widget-area .widget a. botón.alt { color de fondo: #4f5dd5; color del borde: #333333; color: #ffffff; } |
- Agregue código personalizado a las páginas de productos de WooCommerce
Si tiene conocimientos técnicos, puede implementar cómodamente la personalización de la página del producto mediante 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 productos.
Comience con un comentario PHP que indique el nombre de la plantilla en la parte superior.
Cree un archivo template-custom-product.php y colóquelo en el tema activado.
| <?php /*Template Name: Customize Product*/ ?> |
Esta plantilla utiliza la página de producto predeterminada de WooCommerce. Aquí está el código.
| $params = array('posts_per_page' => 5, 'post_type' => 'producto'); $wc_query = nuevo WP_Query($params); ?> have_posts()): ?> have_posts()) : $wc_query->the_post(); ?> |
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 la identificación del producto. the_title(): muestra el nombre del producto. the_post_thumbnail(): muestra la imagen del producto. |
Paso 2: Agregar funcionalidades en el archivofunctions.php del tema activado
Mostrar categorías de productos WooCommerce
Las categorías son donde categorizas tus productos. Active el tema e importe este fragmento al archivo funciones.php para indicar la categoría de un producto.
if (! definido( 'ABSPATH' ) ) { salir; } global $producto; ?> get_sku() || $producto->is_type( 'variable' ) ) ) : ?> get_sku() )? $sku: esc_html__('N/A', 'woocommerce'); ?> get_id(), ', ', ' ' . _n( 'Categoría:', 'Categorías:', recuento ($producto->get_category_ids() ), 'woocommerce' ). '', ' ' ); ?> get_id(), ', ', ' ' . _n( 'Etiqueta:', 'Etiquetas:', recuento ($producto->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 template.php o funciones.php de su tema.
| function cwresponse_get_thumbnail(){ if(is_page(205)){ $args = array( 'tax_query' => array( array( 'taxonomy' => 'product_cat', 'field' => 'slug' ) ) ); $productos_aleatorios = get_posts( $args ); foreach ($productos_aleatorios como $publicación): setup_postdata($publicación); ?> final para cada uno; wp_reset_postdata(); } } add_action('wp_footer', 'cwresponse_get_thumbnail'); |
Deseche el encabezado de descripción.
Cuando utilice Woocommerce, simplemente desmarque el campo de descripción de cada pestaña de producto y edite el archivo funciones.php para incluir el siguiente código.
| add_filter('woocommerce_product_description_heading', '__return_null'); |
Eliminar título del producto
A continuación se explica cómo eliminar el título en las pestañas de productos individuales de WooCommerce: coloque este código en funciones.php.
| remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_title'); |
Paso 3: cambiar las plantillas de WooCommerce
Coloque el código a continuación en el archivo content-single-product.php o en el directorio de producto único en woocommerce/templates. Es mejor que uses funciones.php.
$image_caption = get_post( get_post_thumbnail_id() )->post_excerpt; $image_link = wp_get_attachment_url( get_post_thumbnail_id() ); $image = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ), array( 'title' => get_the_title( get_post_thumbnail_id() ) ) ); $attachment_count = contar( $producto->get_gallery_attachment_ids() ); if ($attachment_count > 0 ) { $galería = '[galería-de-productos]'; } else { $galería = ”; } echo apply_filters( 'woocommerce_single_product_image_html', sprintf( ' } else { echo apply_filters( 'woocommerce_single_product_image_html', sprintf( ' } ?> |
Alternativamente, puedes simplemente escribir código CSS.
.images { float: ¡correcto! importante; }
¡Finalmente! 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 las páginas de sus productos para abordar las expectativas de sus clientes y alinearse con su identidad de marca.
Optimice la capacidad de respuesta móvil de su tienda en línea con WooCommerce y personalícela para mejorar la experiencia general del usuario. Comience a implementar prácticas de personalización y haga que su tienda obtenga el mejor valor.
¿Busca ayuda profesional para personalizar WooCommerce? ¡Contáctenos hoy!
