Como aparece en Fatstacks

Cómo personalizar la página del producto WooCommerce sin código

Publicada el Categorizada como Ecommerce Stores, Website Design

Hay tantas formas de editar la página del producto WooCommerce desde la plantilla de página predeterminada de WooCommerce; elegir la forma correcta de personalizar las páginas del producto WooCommerce puede ser complicado.

Así que hoy voy a cubrir cómo editar la página del producto WooCommerce usando Page Builders como Divi o Elementor, editores avanzados como el editor Gutenberg en las páginas del producto y editar plantillas de archivo de página del producto.

En este artículo, le proporcionaré sus opciones cuando se trata de editar páginas de productos de WooCommerce sin la necesidad de conocer NINGUNA forma de código: ¡sin PHP, sin CSS, sin HTML!

Cómo cambiar el diseño de la página del producto WooCommerce

Edición de la página del producto con Gutenberg Editor en WooCommerce

Cuando se trata de personalizar la página del producto WooCommerce con el Editor de Gutenberg no es tan "sencillo" como debería ser (y probablemente será mucho más fácil en el futuro).

Esto se debe a que, de forma predeterminada, Gutenberg no está habilitado para las páginas de productos en WooCommerce.

Entonces, la sugerencia de muchos es "insertar un fragmento de código" que habilita el Editor Gutenberg en las páginas de productos de WooCommerce.

Esta es una sugerencia "OK", pero ODIAMOS la edición de código con pasión. ¡No se acerque a los archivos de plantilla o css de la página del producto WooCommerce! REALMENTE no nos gusta, y es una pendiente resbaladiza cuando comienzas a agregar pedazos aquí y allá que causan todo tipo de caos cuando gestionar conflictos y actualizaciones en los sitios de WooCommerce.

ADEMÁS, si hace esto, todavía significa que no tiene control sobre el contenedor de página COMPLETA. En cambio, está limitado al contenedor de página proporcionado por la plantilla de página subyacente.

Con WooCommerce Storefront Theme, esto significa que la barra lateral es visible en la página del producto (que en nuestra opinión es la peor parte del Storefront Theme, potencialmente un movimiento intencionado de WooCommerce para intentar que compre su "Paquete de extensiones de escaparate" que le permite el nivel de control sobre el tema de Storefront que REALMENTE se necesita).

¡Pero hay una respuesta que va más allá del mercado de extensiones de WooCommerce cuando se trata de usar Gutenberg para páginas de productos en WooCommerce!

Edición de la página del producto con WooBuilder (Editor Gutenberg)

WooBuilder de PootlePress supera este déficit no solo para el tema Storefront sino para cualquier tema que esté utilizando para su tienda WooCommerce.

Esto significa que si tiene un tema sensato que le permite deshabilitar la barra lateral en las páginas de productos en WooCommerce como estándar (¡a diferencia del tema Storefront!), Puede usar WooBuilder para diseñar toda la página de su producto usando Gutenberg Blocks y cualquier bloque adicional que su tercero complementos o el complemento WooCommerce Blocks se han agregado a sus opciones de bloques de Gutenberg.

Echa un vistazo a WooBuilder de PootlePress aquí.

Nos gusta.

Es un poco caro.

Pero por la funcionalidad adicional, vale la pena en muchos casos.

¿El Editor de Gutenberg para páginas de productos se integrará en WooCommerce en el futuro?

También es muy probable que Automático (los chicos detrás WooCommerce y WordPress) traerá el editor de Gutenberg a WooCommerce

¿Nos hace querer usar el tema de escaparate gratuito de WooCommerce en combinación con el editor de Gutenberg para páginas de productos?

Realmente no nos está vendiendo la idea, especialmente cuando usamos el mejor tema para las tiendas WooCommerce, que es Divi by Elegant Themes….

Personalización de las páginas de productos de WooCommerce con Divi Builder

Con un constructor de páginas integrado que se puede utilizar en TODOS Tipos de publicaciones de WordPress, incluidas las páginas de productos de WooCommerce con plantillas de página personalizables integradas en el creador de páginas. No se requieren conocimientos de código y puede tener una apariencia, sensación y funcionamiento extremadamente personalizados Tienda WooCommerce.

Para comprobar Divi - haga clic aquí

 

Ejemplos de diseño de páginas de productos Divi

Es sorprendente lo que puede hacer con un creador de páginas flexible para crear un diseño de página de producto de alta conversión que impulse el aumento de los carritos y las ventas. lista de diseños de páginas de productos WooCommerce personalizados usando Divi Builder para inspirar el diseño de su próxima página de producto.

Plantilla de página de producto de WooCommerce

Las páginas de productos de codificación personalizada no son para todos. Creamos plantillas de páginas de productos utilizando Divi y, ocasionalmente, utilizando código personalizado. A continuación, se muestra un ejemplo de una plantilla personalizada con algunas personalizaciones básicas que marcan una GRAN diferencia en la conversión, la velocidad y la visualización en dispositivos móviles.

El espacio reducido en la parte superior de la página asegura que el botón "Agregar al carrito" esté visible en la parte superior del pliegue en la mayoría de las pantallas de escritorio, además de que mantiene el botón Agregar al carrito dentro de un ÚNICO desplazamiento en el móvil.

El aumento en el tamaño de las estrellas de calificaciones / reseñas es mucho más impactante que el enfoque típico de "tímido y retraído" que adoptan la mayoría de los temas.

La lista con viñetas de los 3 principales puntos de venta que tienen viñetas de estilo de íconos fuertes y prominentes llama la atención sobre estos puntos y lleva al espectador directamente al llamado a la acción Agregar al carrito.

El espacio en blanco debajo del botón Agregar al carrito tiene un propósito: aquí es donde se puede introducir una ventana emergente o una imagen de oferta personalizada para paquetes de venta cruzada y venta adicional sin destruir por completo la estructura de la página en computadoras de escritorio y dispositivos móviles.

Habiendo eliminado el diseño con pestañas, un diseño de 2 columnas permite a los lectores ver "nuestra descripción" y "reseñas de clientes" simultáneamente en el escritorio. Mientras tanto, en dispositivos móviles, los usuarios que continúan desplazándose más allá de la descripción llegan a las reseñas EN LUGAR de tener que hacer clic en las pestañas.

Es un flujo mucho más natural para las ventas y la conversión sin la necesidad de que el cliente seleccione activamente leer cierta información o reseñas sobre el producto (por supuesto, aún pueden hacer clic en el enlace "1 reseña" debajo de las estrellas en la parte superior de la página y ser llevado directamente a las reseñas de los clientes.

¿Está intentando realizar un cambio específico en la página del producto WooCommerce?

Si no ha consultado nuestros otros artículos sobre cómo mejorar la página del producto WooCommerce, es posible que tengamos EXACTAMENTE lo que está buscando.

Quizás estás intentando ...

Deshabilite y elimine productos relacionados en la página del producto

Ocultar las migas de pan en la página de producto predeterminada de WooCommerce

Ocultar la etiqueta de categoría o SKU en la plantilla de la página del producto

Elimine la pestaña de información adicional de la página del producto en WooCommerce

Y tenemos un montón de otras guías sobre cómo editar todos los aspectos de Personalización de WooCommerce (sin código) echa un vistazo a nuestro Guías de personalización de WooCommerce aquí

Otros artículos útiles de Future State Media

Temas y complementos de la página del producto Woo

Uso de Gutenberg en las páginas de productos de WooCommerce

Ejemplos de páginas de productos Woo usando Divi Builder y Divi Theme

Deshabilitar productos relacionados en las páginas de productos de WooCommerce

Usted buscó:

Tema principal: editar la página del producto woocommerce

woocommerce cambiar el diseño de la página del producto

página de producto de edición de woocommerce

página del producto elementor

plantilla de página de producto de woocommerce

editar página de producto woocommerce

editar la página del producto woocommerce

página de producto elementor woocommerce

diseño de página de woocommerce

Tema principal: personalizar la página del producto de woocommerce

personalizar la página del producto woocommerce

editar la página del producto woocommerce

página de producto de woocommerce

cómo personalizar la página del producto woocommerce

plantilla de página de productos de woocommerce

página de producto personalizado de woocommerce

página de producto único de woocommerce

woocommerce personalizar la página del producto

diseño de página de producto woocommerce

cómo editar la página del producto woocommerce

diseño de productos woocommerce

personalizar la página del producto woocommerce

página personalizada de productos woocommerce

producto único de woocommerce

cómo editar la página del producto woocommerce

personalización de la página del producto woocommerce

diseño de página de producto woocommerce

página de producto personalizada woocommerce

estilo página de producto de woocommerce

cómo crear una página de producto única personalizada en woocommerce

cambiar el diseño de la página del producto woocommerce

eliminar la barra lateral de la página del producto woocommerce

personalizador de página de producto único de woocommerce

ganchos de página de un solo producto de woocommerce

woocommerce organizar la página del producto

página del producto css de woocommerce

woocommerce cambia el diseño de la página de un solo producto

página de producto de ancho completo de woocommerce

cambiar la página del producto woocommerce

barra lateral página del producto woocommerce

plantilla de página de detalles de productos de woocommerce

página de producto woocommerce

woocommerce muestra atributos en la página del producto

página de producto único personalizado de woocommerce

personalizar la página de un solo producto woocommerce

fondo de la página del producto woocommerce

personalizar la página de un solo producto de woocommerce

plantilla de página de producto woocommerce

página de producto de diseño de woocommerce

editar la página de un solo producto de woocommerce

woocommerce editar diseño de página de producto

tamaño de imagen de la página de un solo producto de woocommerce

personalización de la página del producto woocommerce

página de producto único de ancho completo de woocommerce

página de detalles del producto woocommerce

personalización de plantilla de página de producto de woocommerce

editor de páginas de productos woocommerce

página de plantilla de producto de woocommerce

cambiar el diseño de la página del producto woocommerce

diseño de página de producto personalizado de woocommerce

woocommerce ocultar la barra lateral en la página del producto

Woocommerce muestra ventas cruzadas en la página del producto.

página de producto de reordenar woocommerce

cambiar el diseño de la página del producto woocommerce

crear una página personalizada de productos woocommerce

eliminar el botón paypal de la página del producto woocommerce

posición añadir al carrito página de producto único woocommerce

pestañas de producto único del creador de páginas de woocommerce

cambio de imagen de desplazamiento de página de producto de woocommerce

ajustar el diseño de la página del producto woocommerce

agregar siguiente anterior a la página del producto woocommerce wordpress

reproducir video s3 en la página del producto woocommerce

mostrar una descripción larga en la página del producto woocommerce

wordpress woocommerce agregar pestañas a la página del producto

cómo eliminar en stock de la página del producto woocommerce

woocommerce ocultar la imagen destacada en la página del producto

cómo agregar un banner en la página del producto woocommerce

cómo cambiar la página del producto en woocommerce

botón de agregar woocommerce a la página de un solo producto

código de cambio de página de producto de woocommerce

cómo dar formato a la página del producto en woocommerce

eliminar barras laterales de la página del producto woocommerce

precio de woocommerce tamaño de la página del producto

página de producto de woocommerce de venta de estilo

formato de página de producto de woocommerce

diseño de página del producto wordpress woocommerce

mover la ubicación de las pestañas en la página del producto woocommerce

agregar texto debajo de la variación agregar al carrito en la página del producto woocommerce

cómo eliminar la etiqueta de la página del producto woocommerce

woocommerce agregar barra lateral a la página del producto

Por Ashley Pearce

Soy el fundador de Future State Media, una agencia de SEO "pequeña con un propósito" centrada en los creadores, capacitada para ayudar a los creadores a generar tráfico sistemáticamente, crear audiencias y maximizar su monetización sin dejar de ser fiel a su marca.