Cómo personalizar las páginas de producto de WooCommerce

?Qué es una página de producto de WooCommerce?

Instalación en el sitio web de WordPress Plugin WooCommerceCuando lo hace, crea inmediatamente una página de tienda en la que se pueden listar todos los productos. Si el visitante hace clic en cualquier artículo del catálogo, será conducido a la página del producto correspondiente. El dise?o de esta página dependerá en gran medida del tema, pero contendrá información básica sobre el producto.?

Imagen [1] - Cómo Personalizar las Páginas de Producto de WooCommerce - Photon Flux | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

Para acceder al panel de control de WordPress, vaya a la páginaEn la pesta?a "Productos", localice su producto y seleccione"Editar productos" para a?adir o editar esta información. También puede hacer clic en "A?adir nuevoProductos" para crear nuevos productos.

A?ada primero el título del producto yDescripción del producto. En la parte derecha, puede adjuntar imágenes de los productos.

Imagen [2] - Cómo Personalizar las Páginas de Producto de WooCommerce - Photon Flux | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

Si se desplaza hastaDatos del productoverá que puede crear productos simples, productos agrupados, productos variables oProductos subsidiarios. Aquí también se pueden configurar las opciones de envío, los atributos, los productos vinculados (para la venta cruzada), etc.

Imagen [3] - Cómo Personalizar las Páginas de Producto de WooCommerce - Photon Flux | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

En esta página también es posible seleccionar una categoría para un producto y a?adir etiquetas. Estas funciones facilitan a los clientes la navegación por el catálogo de productos.?

Una vez completada la configuración del producto, haga clic en"Renovación"Botón. A continuación se muestra la página de producto por defecto en el front-end:

Imagen [4] - Cómo Personalizar las Páginas de Producto de WooCommerce - Photon Flux | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

Como puedes ver arriba, esta página de producto de WooCommerce contiene la funcionalidad básica para vender productos online. Es importante tener en cuenta que la plantilla que se ve en el front-end del sitio es la misma para todos los productos.

Tres formas de personalizar las páginas de producto de WooCommerce

Veamos ahora tres formas de personalizar las páginas de producto de WooCommerce.

1. Utilizar el editor del sitio

Lo bueno de WordPress es que sus funciones nativas son perfectas para principiantes. Con la ayuda deEditor del sitioCree hermosas páginas de productos personalizadas en WooCommerce sin tener que saber escribir código.

A través del editor del sitio, puedes personalizar la tienda online mediante bloques.WooCommerceTenga su propio juego de bloquesEsto incluye la posibilidad de mostrar elFiltro, Barra de búsqueda, Más vendidosElementos de etc.

El editor del sitio funciona de la misma manera que eleditor de bloquesMuy similar. Pero este último se utiliza parapágina webresponder cantandoEntradas de blogpero (no)Editor del sitioposibleElementos globales personalizadosPor ejemploEncabezado y pie de páginaresponder cantando Plantillas de página de producto WooCommerce.?

tome nota de: sólo puede utilizarse en temas de bloquesEditor del sitio. Si utiliza el tema Clásico, deberá consultar esta guía para obtener más información sobre el tema.El tercer método.

Además, sólo se puede acceder al contenido de cada página de producto entrando en la sección"Producto".y abrir el proyecto en el editor del backend para modificarlo (como se ha mostrado anteriormente). Lo que queremos hacer es personalizar los componentes y estilos de la página de producto de WooCommerce.

En primer lugar, vaya aAspecto → Editory luego haga clic enplantilla.

Imagen [5] - Cómo Personalizar las Páginas de Producto de WooCommerce - Photon Flux Network | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

Desplácese hastaWooCommercey seleccioneProducto únicoPlantilla.

Imagen [6] - Cómo Personalizar las Páginas de Producto de WooCommerce - Photon Flux Network | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

A continuación, haga clic en el icono del lápiz para abrir la plantilla en el editor.

Imagen [7] - Cómo Personalizar las Páginas de Producto de WooCommerce - Photon Flux Network | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

En primer lugar, puede ver que la plantilla es gris.

Imagen [8] - Cómo Personalizar las Páginas de Producto de WooCommerce - Photon Flux Network | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

Haga clic en el área de plantillas y se le pedirá que convierta la plantilla en un bloque. Haga clic en el botón"Convertir en bloques"para continuar.

Imagen [9] - Cómo Personalizar las Páginas de Producto de WooCommerce - Photon Flux Network | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

Las páginas de productos de WooCommerce ahora se pueden editar usando bloques.

Imagen [10] - Cómo Personalizar las Páginas de Producto de WooCommerce - Photon Flux Network | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

Si no está familiarizado Bloques de WordPresstal vezEditor del sitioHay varias formas útiles de modificar esta página:

Cambiar el dise?o de la página

Para ajustar el dise?o de la página.Haga clic en el bloque más grande y seleccione el bloque padre.

Imagen [11] - Cómo Personalizar las Páginas de Producto de WooCommerce - Photon Flux | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

El menú horizontal debería entonces mostrar flechas para poder mover esa parte de la página a izquierda o derecha.

Imagen [12] - Cómo Personalizar las Páginas de Producto de WooCommerce - Photon Flux | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

También es posible mover bloques o grupos de bloques hacia arriba y hacia abajo.

Imagen [13] - Cómo Personalizar las Páginas de Producto de WooCommerce - Photon Flux | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

Además, para a?adir un bloque, basta con pasar el ratón por encima de la zona en la que desea insertarlo y hacer clic en el botónsigno + (matemáticas).

Imagen [14] - Cómo Personalizar las Páginas de Producto de WooCommerce - Photon Flux Network | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

Si desea modificar el dise?o, es preferible a?adir bloques de columnas o grupos.

También es posible realizar cambios globales en el dise?o de una plantilla seleccionándola y abriendo después los ajustes del bloque.

Imagen [15] - Cómo Personalizar las Páginas de Producto de WooCommerce - Photon Flux | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

existeapertura (jerga ajedrecística)Debajo, puede elegir cambiar la alineación y la posición del dise?o. Incluso es posible convertirlo en "chabacanería. Esto significa que no desaparece cuando el visitante se desplaza por la página.

Si está conforme con los cambios, pulse en la parte superior de la pantallaBotón "Guardar".

Cambiar colores y fuentes

En la página del productoFuentes personalizadasy colores, puede asegurarse de que el dise?o sea coherente con la marca visual.?

Para modificar los colores en el editor del sitio, seleccione el elemento que desea editar y ábralo por la derechaajuste de bloque.

Imagen [16] - Cómo Personalizar las Páginas de Producto de WooCommerce - Photon Flux Network | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

Los elementos que pueden cambiarse dependen del bloque, pero normalmente es posible modificar los colores del texto, el fondo y los enlaces.

Por defecto, es posible elegir entre los colores predeterminados del tema.

Imagen [17] - Cómo Personalizar las Páginas de Producto de WooCommerce - Photon Flux Network | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

Si hace clic en "Sin color seleccionado"de la región obtendrá un selector de color.

Imagen [18] - Cómo Personalizar las Páginas de Producto de WooCommerce - Photon Flux Network | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

Aquí, el color puede seleccionarse arrastrando el ratón. Si se selecciona un color con poco contraste, elEditor del sitio webIncluso habrá pistas.

Imagen [19] - Cómo Personalizar las Páginas de Producto de WooCommerce - Photon Flux Network | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

También pueden introducirse códigos de color HEX, HSL o RGB específicos. Esta es la mejor opción, ya que coincide con el color exacto de la empresa.

existe"Opciones de "Composición tipográficapuede cambiar el tama?o del texto a Peque?o, Mediano, Grande, etc.

Para acceder a más ajustes de fuente, haga clic en "Tipografía".Tres puntos uno al lado del otro.

Imagen [20] - Cómo Personalizar las Páginas de Producto de WooCommerce - Photon Flux | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

Aquí hay muchas opciones. Basta con hacer clic para seleccionarlas y a?adirlas a la carpetatipográficoMenú.

Imagen [21] - Cómo Personalizar las Páginas de Producto de WooCommerce - Photon Flux Network | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

Si no desea estos ajustes, siempre puede anular su selección.

A?adir un nuevo bloque

?Quiere a?adir elementos a sus páginas de productos? El editor del sitio lo hace posible.

Por ejemplo, al realizar una promoción en todo el sitio, puede a?adir un bloque de banner en la parte superior de la plantilla.

Imagen [22] - Cómo Personalizar las Páginas de Producto de WooCommerce - Photon Flux Network | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

O, si se quiere hacerNavegación más fácil para los clientespuede a?adir un bloque de búsqueda a la página.

Imagen [23] - Cómo Personalizar las Páginas de Producto de WooCommerce - Photon Flux Network | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

Crear varios tipos de páginas de productos

Como puedes ver arriba, hay varias formas de personalizar la plantilla de la Página de Producto de WooCommerce en el Editor de Sitios. Los cambios realizados se reflejarán en todas las páginas de producto de WooCommerce.

Al ser de tipo minorista, necesita crear plantillas únicas para tipos de productos o categorías específicas. Ejemplo:

  • Lanzamiento de nuevos productosCrear una página de producto única para un nuevo producto.
  • Promociones navide?as: Crear una página de ventas para una categoría de productos durante la temporada de vacaciones.

Esto garantiza que la página sea más relevante y atractiva.

Para crear varias plantillas con distintos fines, vaya a la secciónApariencia → Editor → Plantillas. A continuación, haga clic en el signo más para a?adir una nueva plantilla y seleccione la opciónElementos individuales: productos.

Imagen [24] - Cómo Personalizar las Páginas de Producto de WooCommerce - Photon Flux Network | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

Esto crea una nueva plantilla de página de producto, pero sólo para un producto. Seleccione el producto deseado en el menú para iniciar el Editor de Sitios.

Imagen [25] - Cómo Personalizar las Páginas de Producto de WooCommerce - Photon Flux Network | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

Por defecto, el sistema solicita un esquema preexistente. La opción preferida debería ser una plantilla de página de producto genérica.

Imagen [26] - Cómo Personalizar las Páginas de Producto de WooCommerce - Photon Flux Network | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

Utilizar patrones preexistentes puede ayudar a acelerar el proceso de dise?o. Sin embargo, este paso puede omitirse si se parte de cero.

Ahora, si vuelves alplantillay vuelva a pulsar el signo más para a?adir una nueva plantilla, verá una selección decategoría (product_cat) delOpciones.

Imagen [27] - Cómo Personalizar las Páginas de Producto de WooCommerce - Photon Flux Network | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

La plantilla se aplicará a una categoría específica, como accesorios, ropa o decoración. 

Sólo tiene que seleccionar su categoría y empezar a crear la plantilla. Pasos con "Artículos individuales: productos"Las opciones son las mismas.

2. Uso de la extensión WooCommerce

Cuando se utiliza el tema en bloque, el editor del sitio puede personalizar las plantillas de página de producto de WooCommerce de diferentes maneras sin tener que tocar una sola línea de código.?

Sin embargo, no permite ampliar la funcionalidad de la página. Afortunadamente, hay muchas extensiones de WooCommerce que pueden ayudar a conseguirlo, incluso a principiantes sin conocimientos técnicos.?

En esta sección, presentaremos algunas herramientas que pueden modificar las páginas de productos utilizando la nueva funcionalidad. Por comodidad, dividimos estas extensiones en tres casos de uso:Crear productos avanzados, optimizar las páginas de productos de WooCommerceresponder cantandoAumentar las ventas.

Creación de productos avanzados

Si una tienda online de WooCommerce ofrece productos personalizados o variantes de productos premium, se necesita una extensión de WooCommerce para facilitar la venta de estos artículos. A continuación, le echamos un vistazo juntos.

Variantes avanzadas de productos

Imagen [28] - Cómo Personalizar las Páginas de Producto de WooCommerce - Photon Flux Network | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

WooCommerce puede crear productos variables por defecto, pero la configuración de estos artículos puede ser un poco limitada.?

Si se ofrece un gran número de productos de diferentes estilos, colores o tama?os, considere la posibilidad de utilizar la funciónVariantes avanzadas de productosExtensión. Esto puede ayudar a mostrar variantes de productos de manera más eficaz para que los clientes puedan entender mejor sus opciones.

Por ejemplo, es posible establecer propiedades globales para crear muestras variantes. Estas muestras pueden mostrar diferentes colores, imágenes, vídeos y texto para crear presentaciones eficaces de los productos.?

Además, la extensión puede personalizar la biblioteca de variantes y crear tablas para mostrar claramente las opciones disponibles.

Dise?ador de productos WooCommerce

Imagen [29] - Cómo Personalizar las Páginas de Producto de WooCommerce - Photon Flux | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

Por ejemplo, para los tipos de productos personalizados, es necesarioDise?ador de productos WooCommerceherramientas como ésta. Esta extensión a?ade a la página "Productos a medida"Botón

Sus clientes podrán a?adir imágenes, clipart, formas y plantillas a sus productos. Incluso podrán a?adirlos a su cesta de la compra directamente desde la página de dise?o. También crea archivos imprimibles, lo que ayuda a facilitar la producción de artículos personalizados.

Productos compuestos

Productos compuestos y complementarios

Productos compuestoses una potente extensión ideal para tiendas online que gestionan pedidos complejos. Ayuda a los clientes a configurar productos que contienen varias piezas, simplificando así el flujo de trabajo y haciéndolo lo más fácil de usar posible.

Lo mejor de Composite Products es que incorpora soporte para paquetes de productos. Esto significa que cuando los clientes creen sus productos exclusivos, podrán elegir entre todos los artículos disponibles en el catálogo.

Fórmula Calculadora de Precios para WooCommerce

Imagen [30] - Cómo Personalizar las Páginas de Producto de WooCommerce - Photon Flux | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

Algunos productos personalizados requieren más recursos, como tela o madera adicionales. Crear páginas de producto para estos productos puede ser logísticamente difícil sin las herramientas adecuadas.

La forma tradicional de vender estos productos es ponerse en contacto con el cliente y hacerle un presupuesto. Pero esto ralentiza considerablemente el proceso de venta. De hecho.Razones principales por las que los compradores abandonan sus carritosUna es que no pueden calcular por adelantado el coste total de un pedido.

Eso esCalculadora de Precio Extendido por Fórmula de WooCommerceDónde resulta útil. Con esta herramienta se pueden a?adir campos con fórmulas y reglas para calcular el precio final de un producto. Esto puede acomodar medidas únicas como longitud, volumen, etc.?

WooCommerce Mayorista

Imagen [31] - Cómo Personalizar las Páginas de Producto de WooCommerce - Photon Flux | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

Vende tus artículos al por mayor si tienes un gran inventario.WooCommerceVenta al por mayorLa extensión proporciona todo lo necesario para empezar.

Se pueden crear y gestionar múltiples roles de usuario mayorista y establecer precios basados en roles. También viene con un constructor de formularios de registro de arrastrar y soltar para que se puedan crear aplicaciones al por mayor.

También existe la opción de ocultar los productos al por mayor y los precios a los clientes habituales. Incluso puede obtener un panel de control para mayoristas que muestra informes sobre ventas, reembolsos, pedidos y mucho más. De esta manera, es posible ver suWooCommerce Negocio MayoristaCómo va.

Optimizar las páginas de productos

Posee las habilidades necesarias para vender el productoFuncionalidad mínimavital. Pero si quiere crearPáginas de productos de alta conversiónque puede a?adir algo de interés.

Estas son algunas extensiones que pueden ayudar a mejorar las páginas de producto de WooCommerce.

Imágenes 360o para WooCommerce

Imagen [32] - Cómo Personalizar las Páginas de Producto de WooCommerce - Photon Flux | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

Cuando los clientes adquieren artículos de gran tama?o, como electrodomésticos o muebles, es posible que deseen desplazarse alpágina de pagoInfórmese previamente sobre el producto con el mayor detalle posible. 

Aunque las especificaciones completas de los productos, las fotos fijas y los vídeos pueden ser de gran ayuda, proporcionar imágenes de 360o puede ayudar a dar vida a los productos.?

Si hay tiempo para conseguir todos los ángulosFotografiar productos.?Imagen 360o para WooCommercepuede ayudar a crear este útil efecto visual. Esta extensión es muy fácil de usar y sensible.?

También incluye controles de navegación y ofrece un modo de pantalla completa para que los clientes puedan hacerse una idea de lo que ofrece.

WooCommerce Pago en una página

Imagen [33] - Cómo Personalizar las Páginas de Producto de WooCommerce - Photon Flux Network | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

Un proceso de compra largo y complicado es la principal razón por la que los clientes abandonan los carritos de la compraUno. Por lo tanto, es posible utilizarWooCommerce One Page Checkout ?Vamos!Simplifique el proceso.

Como su nombre indica, esta extensión crea páginas de productos personalizadas que guían directamente a los compradores a realizar una compra. Pueden a?adir o eliminar artículos de su carrito de la compra y completar el pago sin esperar a que se cargue una nueva página.

Esta herramienta es perfecta para sitios web con pocos productos o páginas de destino específicas relacionadas con campa?as de marketing. 

WooCommerce Tag Manager

Imagen [34] - Cómo Personalizar las Páginas de Producto de WooCommerce - Photon Flux Network | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

bienLas descripciones de productos ayudan a aumentar las ventas. Además.Optimización de motores de búsqueda (SEO) basada en productosEs crucial para cualquier tienda de comercio electrónico. Las descripciones de productos pueden utilizarse como una oportunidad orgánica para integrar palabras clave y mejorar el rendimiento del sitio web en los resultados de búsqueda.

Aumentar las ventas de productos?

Ahora, aquí hay algunas herramientas para ayudar a aumentar las ventas de WooCommerce utilizando métodos de marketing tradicionales y más sutiles.

Flash promocional Pro

Imagen [35] - Cómo Personalizar las Páginas de Producto de WooCommerce - Photon Flux Network | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

Crear una sensación de urgenciaAyuda a aumentar las conversiones. Un método habitual que utilizamos es lanzar una oferta por tiempo limitado.

Venta Flash ProA?ada esta función a las páginas de productos de WooCommerce y proporcione una forma personalizable de destacar estas ventas en su sitio: incluyendo la visualización del precio original frente al precio de venta para hacer que el artículo parezca más atractivo.

Lista de deseos WooCommerce

reducir (una fracción)Compradores en línea para 40%dijeron que los minoristas tendrían una mejor experiencia de usuario si ofrecieran listas de deseos. Dado que el porcentaje es tan alto, todas las tiendas online deberían a?adir esta función a su lista de prioridades.

Listas de deseos de WooCommerceProporcione a los clientes un control total de su privacidad y la posibilidad de crear listas de deseos ilimitadas. No tienen que preocuparse por registrarse en el sitio porque pueden registrarse comoidentidad de invitadoGuarda su lista de deseos.

Recomendación de productos

Imagen [36] - Cómo Personalizar las Páginas de Producto de WooCommerce - Photon Flux Network | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

Si quiere aumentar sus ingresos globales, las estrategias de venta cruzada y de venta ascendente recomendando productos relacionados es una de las formas más eficaces de hacerlo.

hacer uso deRecomendación de productosque pueden ofrecer automáticamente sugerencias inteligentes a los clientes. Por ejemplo, la herramienta puede mostrar productos relacionados de la misma categoría o artículos que suelen comprarse juntos.

Puede generar automáticamente recomendaciones basadas en el historial de navegación reciente del comprador. Los informes útiles también pueden ayudarle a determinar lasEstrategias eficaces de remisión.

Complementos de productos

Imagen [37] - Cómo Personalizar las Páginas de Producto de WooCommerce - Photon Flux Network | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

Los complementos de producto sonAumento de los AOVOtro método inteligente. Es útil para peque?as boutiques o tiendas en línea que pueden ofrecer un alto grado de personalización de los pedidos.

ofertascomplementoLas extensiones pueden ayudar a conseguirlo en unos sencillos pasos. Para integrar estos complementos pueden utilizarse menús desplegables, cuadros de texto, casillas de verificación, imágenes de muestra, etc.?

Al utilizar esta herramienta, los complementos de productos pueden aplicarse globalmente o a productos individuales. Además, la extensión es compatible con otras herramientas populares, como la herramientaSuscripciones WooCommerceresponder cantandoWooCommerce Reservas.

paquete del producto

Imagen [38] - Cómo Personalizar las Páginas de Producto de WooCommerce - Photon Flux Network | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

Siempre que tengas un número reducido de artículos en el catálogo de tu tienda, es posible obtenerlos delOfrezca paquetes de productospara beneficiarse de esta función. Aunque WooCommerce no proporciona esta funcionalidad de forma predeterminada, puede utilizar la funciónPaquetes de productosextensión para conseguirlo.

Esta herramienta puede agrupar productos de WooCommerce simples y variables. Incluso puede recomendar productos opcionales y ofrecer descuentos por volumen. Además, es posible personalizar la apariencia de los paquetes y los productos agrupados.

También cabe destacar que la extensión es compatible tanto con bienes físicos como virtuales. Puede utilizarse paraprograma en línearesponder cantandoSuscripciones y otros productos.

3. Utilización de códigos personalizados

También es posible modificar la página de producto utilizando código personalizado. Si utiliza la funciónTema por defectoNo disponibleEditor del sitioEste método es especialmente útil.?

tome nota de: Modificar directamente los archivos temáticos de un sitio web es un proceso delicado. Sin conocimientos técnicos, puede acabarDa?os en el sitio weby provocar tiempos de inactividad.?

Teniendo esto en cuenta, hay que asegurarse de que antes de proceder a la operaciónHaz una copia de seguridad de tu tienda WooCommerce. Lo mejor es utilizar un sitio de ensayo para experimentar con la configuración personalizada.?

A continuación, una vez que esté listo para que los cambios surtan efecto, puede utilizar la funciónTemas hijo de WordPress. De este modo, los ajustes personalizados no se pierden con las actualizaciones del tema principal.

Ahora, puede utilizar algunos de los siguientes métodos para modificar las páginas de producto de WooCommerce utilizando código personalizado.

Uso de CSS personalizado

Si quieres personalizar el estilo de una página de producto de WooCommerce usando código.CSSEs la mejor opción. Permite modificar colores, fuentes, enlaces y mucho más.?

Hay varias formas de conseguirlo. Veámoslas.

En el editor del sitio

Para a?adir CSS a sus páginas de productos utilizando el editor del sitio, vaya a la secciónApariencia → Editor → Estilos → CSS adicional.

Imagen [39] - Cómo Personalizar las Páginas de Producto de WooCommerce - Photon Flux Network | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

El código puede colocarse en elCSS adicionalCaja.

Por ejemplo, si desea cambiar el color del título de un producto, puede utilizar lo siguienteFragmento de código:

h2.woocommerce-loop-product__title, .woocommerce div.product .product_title {

    color: #ffffff.

    product_title { color: #ffffff; espacio entre letras: 1px;

    margin-bottom: 10px !important;

}

Sólo tienes que sustituir "fffff" por tu código de color favorito.?

Alternativamente, si desea cambiar el tama?o de la fuente, puede utilizar la funciónEste fragmento de código CSS::

.woocommerce div.product .product_title { font-size: 25px; }

Sólo asegúrate de queescriba aHaz tus cambios.

Por supuesto, estos son sólo algunos ejemplos sencillos, pero las oportunidades son infinitas. Si quieres saber más, puedes consultar la páginaDocumentación CSS de WordPress.

En el personalizador

Si su tema no admite la edición completa del sitio, deberá a?adir código CSS al personalizador. Para ello, vaya aApariencia → Personalización → CSS adicional.

Imagen [40] - Cómo Personalizar las Páginas de Producto de WooCommerce - Photon Flux Network | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

CSS tiene la misma funcionalidad aquí que en el editor del sitio.

En su subtemastyle.cssDocumentos

El último lugar donde puede a?adir CSS en WordPress es el tema destyle.cssarchivo. Una vez más, el uso de temas hijo es necesario para garantizar que los cambios no se pierdan en las actualizaciones.

cambiar aApariencia → Editor de archivos de temas.

Imagen [41] - Cómo Personalizar las Páginas de Producto de WooCommerce - Photon Flux | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

Por defecto, debería seleccionar elstyle.csspapeles. Si no es así, basta con hacer clic en la parte derecha de la pantalla en el botónPapel temáticoSólo tienes que seleccionarlo en el menú.

A continuación, se puede a?adir cualquier CSS en la parte inferior del archivo. Cuando haya terminado, sólo tiene que actualizarlo.

Uso de PHP

CSS es genial para cambiar la apariencia de WordPress, pero no a?ade funcionalidad a las páginas de producto de WooCommerce.?

Para realizar esto manualmente con código, es necesario utilizar PHP, que se puede a?adir al tema hijo dearchivo functions.phpo utilice elFragmentos de códigoy otros plug-ins.

Imagen [42] - Cómo Personalizar las Páginas de Producto de WooCommerce - Photon Flux Network | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

Para los usuarios experimentados de WordPress, pruebe algunas de las siguientes opciones:

Ganchos WooCommerce (acciones y filtros)

Para los usuarios que prefieran modificar los elementos de WooCommerce manualmente, pueden utilizar la funciónGanchos WooCommerceEstos fragmentos de código PHP son capaces de ejecutar Estos fragmentos de código PHP son capaces de ejecutar el comando "plataforma"y"(máquina) filtro" para modificar la página de producto de WooCommerce.

He aquí un ejemplo de operación útil:

/**

 * :: Permitir shortcodes en extractos de productos

 */

if (!function_exists('woocommerce_template_single_excerpt')) {

   function woocommerce_template_single_excerpt( $post ) {

      global $post;

       if ($post-&gt;post_excerpt) echo '<div itemprop="description">' . do_shortcode(wpautop(wptexturize($post-&gt;post_excerpt))) . '</div>';

   }

}

Al implementar este gancho, es posible establecer el parámetroCódigos cortos para a?adir a sus extractos de productos.?

Al mismo tiempo, si se quiereMostrar enlace de archivo de atributos de productose puede utilizar el siguiente fragmento de código:

/**

 * :: Mostrar enlaces de archivo de atributos de productos

 */

add_action( 'woocommerce_product_meta_end', 'wc_show_attribute_links' );

// si quieres mostrarlo en la página de archivo, sustituye "woocommerce_product_meta_end" por "woocommerce_shop_loop_item_title".

function wc_show_attribute_links() {

global $post;

$attribute_names = array( '<attribute_name>', '<another_attribute_name>' ); // Añada aquí los nombres de los atributos y recuerde añadir el prefijo pa_ al nombre del atributo

foreach ( $attribute_names as $attribute_name ) {

$taxonomy = get_taxonomy( $attribute_name ); }

¡if ( $taxonomy &amp;&amp; ! is_wp_error( $taxonomy ) ) {

$terms = wp_get_post_terms( $post-&gt;ID, $attribute_name );

$terms_array = array();

        ¡si ( ! empty( $terms ) ) {

        foreach ( $terms as $term ) {

      1TP4Enlace_archivo = get_term_link( $term-&gt;slug, 1TP4Nombre_atributo ) ;

      $full_line = '<a href="/es/' . $archive_link . '/">'. $term-&gt;nombre . '</a>';

      array_push( $terms_array, $full_line );

        }

        echo $taxonomy-&gt;etiquetas-&gt;nombre . ': ' . implode( ', ' . $terms_array ); .

        }

     }

    }

}

Los hooks de WooCommerce también proporcionan una serie de útilesFunción de filtro para editar los datos del producto. Por ejemplo, el siguiente fragmento de código puede utilizarse para reordenar las etiquetas de los productos:

/**

 * :: Reordenar fichas de datos de productos

 */

add_filter( 'woocommerce_product_tabs', 'woo_reorder_tabs', 98 );

function woo_reorder_tabs( $tabs ) {

$tabs['opiniones']['prioridad'] = 5; // Opiniones primero

$tabs['description']['priority'] = 10; // Descripción en segundo lugar

$tabs['additional_information']['priority'] = 15; // Información adicional tercero

return $tabs;

}

También se pueden a?adir pesta?as personalizadas:

/**

 * :: Añadir una ficha de datos de producto personalizada

 */

add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );

function woo_new_product_tab( $tabs ) {

// Añade la nueva pestaña

$tabs['test_tab'] = array(

'title' =&gt; __( 'Nueva pestaña de producto', 'woocommerce' ),

'priority' =&gt; 50,

'callback' =&gt; 'woo_new_product_tab_content'

);

devolver $tabs.

}

function woo_new_product_tab_content() {

// El contenido de la nueva pestaña

echo '<h2>Ficha Nuevo producto</h2>';

echo '<p>Aquí tienes tu nueva ficha de producto.</p>';

}

Plantillas de página globales

Otra opción cuando se utiliza el código PHP de WooCommerce es ?empezar desde cero!Crear plantillas globales de páginas de productos personalizadas.tener en cuentaEste método no se aplica a los temas en bloque.

En primer lugar, el nuevo archivo debe llamarseplantilla-producto-personalizado.phpy escriba un comentario PHP abierto en la parte superior indicando el nombre de la plantilla:

En este caso, puede utilizar "Plantillas globales de páginas de productos personalizadas"tal vezContenido similarSustituir"Ejemplos de plantillas".

Esta plantilla imitará la página de producto por defecto de WooCommerce. Luego se puede modificar según sea necesario utilizando ganchos web.

Aumentar las ventas con páginas de productos personalizadas de WooCommerce

Personalizar las páginas de producto de WooCommerce puede ayudarte a mostrar tus productos de forma eficaz. También tiene la capacidad de proporcionar a los clientes más opciones y crear una experiencia única que atraiga a su público. Como se mencionó anteriormente, hay varias maneras de editar esta página.

Si se dispone de un tema en bloque, la apariencia de la plantilla global puede modificarse utilizando el editor del sitio. Para a?adir más funcionalidad, puede instalar la extensión WooCommerce. Para los usuarios experimentados de WordPress, puede utilizar CSS o PHP, pero tenga cuidado con este proceso.


Contacte con nosotros
?No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de peque?as empresas
Servicio de atención al cliente WeChat
Servicio de atención al cliente WeChat
Tel: 020-2206-9892
QQ咨詢:1025174874
(iii) Correo electrónico: info@361sale.com
Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres
? Declaración de reproducción
Este artículo fue escrito por Harry
EL FIN
Si le gusta, apóyela.
felicitaciones0 compartir (alegrías, beneficios, privilegios, etc.) con los demás
comentarios compra de sofás

Por favor, inicie sesión para enviar un comentario

    Sin comentarios