homefinance blog
Una página de productos bien diseñada es importante para garantizar que los clientes sean una experiencia de compra de fluidos. Ayuda a aumentar las conversiones, reducir las quejas de los clientes e incluso aumentar el valor promedio de pedidos. La página de producto predeterminada en WooCommerce es bastante simple, no hay nada especial que ver. Es por eso que tienes que personalizar la página del producto WooCommerce. Personalizar el producto predeterminado de WooCommerce lo ayudará a crear una experiencia de compra única para sus clientes y lo hará resaltar el resto. Por lo tanto, el rediseño de su página de productos es esencial para que su tienda se esfuerce y sobreviva.
Hoy vamos a demostrar tres formas de rediseñar su página predeterminada de productos de WooCommerce. Lea cada uno cuidadosamente y elija el que mejor le convenga. Cómo personalizar la página del producto de WooCommerce
Personalizar la página del producto es una tarea desalentadora. Puede usar temas de WooCommerce para darle un aspecto diferente. Pero instalar un tema completamente nuevo puede no darle el resultado deseado que está buscando. Por lo tanto, encontramos tres formas diferentes de personalizar la página de productos individuales. Aquí están ellos:
Incluir una pequeña línea de códigos
Use extensiones de WooCommerce y Dokan
Personalice la página del producto Wooocomerce utilizando Elementor Page Builder
1. Incluya una pequeña línea de código si tiene conocimientos básicos sobre CSS, entonces puede personalizar fácilmente el producto WooCommerce agregando algunos códigos CSS.
La parte positiva de la codificación es que no expone su sitio a ningún riesgo de seguridad potencial. También puede hacer pequeños cambios de manera fácil y rápida en lugar de agregar un complemento o extensión. Además, puede agregar estos códigos directamente desde el tablero de WordPress. Puede agregar códigos CSS usando WordPress Temo Customizer. Navegue para buscar> personalización en el tablero de WordPress. Desplácese hacia abajo y haga clic en “CSS adicional” en el menú. Encontrará un campo de texto para agregar sus códigos CSS. Nota: Aplicar las reglas de estilo a “.WooCommerce Div. El producto H2 “cambiará la apariencia de todos los encabezados H2 solo en las páginas de los productos. Es importante que los usuarios observen claramente el título del producto. El título predeterminado del producto WooCommerce no es fácil de observar. Pero con algunas filas de códigos, puede cambiar el título del producto en Bold. .wooCommerce div.product .product_title {color: #f54251; Font-Weight: Bold; }
¡Personalice el botón Agregar en el carrito, sepa que puede girar el botón normal Agregar en el carrito en un botón Agregue en la canasta de estilo Amazon! Sí, si agrega este código al área de texto, puede cambiar el estilo predeterminado del botón.
.wooCommerce div.product .button {box-shadow: 0px 1px 0px #fff6af; Antecedentes: gradiente lineal (hasta la parte inferior, #FIF64 5%, #FFAB23 100%); Color de fondo:#FIF64; Border-radio: 6px; Borde: 1px sólido #ffaa22; Color:#333333; Decoración de texto: ninguna; Shadow de texto: 0px 1px 0px #ffee66; }
Eliminar/Agregar nuevos elementos es fácil de cambiar el aspecto de la página del producto con los códigos CSS. Sin embargo, cuando desea cambiar los elementos de la página del producto, podría ser un poco difícil. Si no tiene conocimiento básico de codificación o desarrollo de WordPress, le sugerimos que use complementos o extensiones para personalizar la página del producto WooCommerce. Pero si está listo para un desafío, puede probar los métodos que estamos a punto de mostrarle. WooCommerce utiliza dos archivos de plantilla para crear páginas de productos:
Producto único.php-it construye la estructura de la plantilla de página.
Contenido-producto-producto -php-it llena la plantilla con el contenido de cada producto.
Por lo tanto, puede usar fácilmente los ganchos de WooCommerce para agregar o eliminar elementos de la página del producto. Debe crear un tema para niños de WordPress y agregar los códigos al archivo Functions.php para realizar cambios. Las funciones para agregar y eliminar elementos en la página del producto son:
Remove_action ()
add_action ()
Puede eliminar estas filas de códigos para eliminar elementos como “título de producto, evaluaciones de productos, metadescritos, descripción del producto, imágenes del producto, pestañas adicionales, etc.”. // eliminar el título del producto remove_action (‘wooCommerce_single_product_summary’, ‘wooCommerce_template_single_itle’, 5); // eliminar estrellas de calificación remove_action (‘wooCommerce_single_product_summary’, ‘wooCommerce_template_single_rating’, 10); // Eliminar el producto meta descripción remove_action (‘wooCommerce_single_product_summary’, ‘wooCommerce_template_single_meta’, 40); // eliminar la descripción del producto remove_action (‘wooCommerce_single_product_summary’, ‘wooCommerce_template_single_excerpt’, 20); // Eliminar imágenes Remove_Action (‘wooCommerce_before_single_product_summary’, ‘wooCommerce_show_product_images’, 20); // Eliminar productos relacionados remove_action (‘wooCommerce_after_single_product_summary’, ‘wooCommerce_output_related_products’, 20); // Eliminar las pestañas de información adicionales remove_action (‘wooCommerce_after_single_product_summary’, ‘wooCommerce_output_product_data_data’, 10); Y para agregar elementos, add_action (‘wooCommerce_before_single_product_summary’, function () {printf (‘
Congotulations, solo agregó un enlace!
‘ );});
Agregar/editar pestañas de productos nuevos Puede usar el gancho de filtro WooCommerce_Product_Tabs para eliminar, agregar, editar o reordinar las hojas en la sección de información adicional. El siguiente script eliminará la pestaña Descripción y su contenido, cambiará el nombre de la pestaña de revisión y cambiará la prioridad de la información adicional en primer lugar. add_filter (‘wooCommerce_product_tabs’, ‘woo_remove_product_tabs’, 98); function woo_remove_product_tabs ($ tabs) {unset ($ tabs [‘descripción’]); // Eliminar la pestaña Descripción $ pestañas [‘revisiones’] [‘title’] = __ (‘tarifas’); // Cambiar el nombre de la pestaña de revisiones $ Tabs [‘adicional_información’] [‘prioridad’] = 5; // Información adicional en la primera devolución $ pestañas; } Reordinar los elementos que puede colocar la descripción del producto bajo el título. Puedes usar este código,
// Mueve la descripción del producto a continuación Título remove_action (‘wooCommerce_single_product_summary’, ‘wooCommerce_template_single_excerpt’, 20); add_action (‘wooCommerce_single_product_summary’, ‘wooCommerce_template_single_excerpt’, 6); Al principio, eliminé la descripción de la prioridad (20) y agregué la descripción nuevamente (5). Esto se debe a que el elemento del título tiene un valor de prioridad de 5. Entonces, si ponemos la descripción en la prioridad 6, se mostrará justo bajo el título del producto. 2. Use extensiones de WooCommerce y Dokan
WooCommerce tiene sus propias extensiones que lo ayudarán a darle a la página del producto un nuevo aspecto. Sin embargo, si ejecuta un mercado con más proveedores que usan Dokan, tendrá algunos módulos que lo ayudarán a personalizar la página de WooCommerce.
Revisaremos cada uno de ellos y explicaremos cómo puede usar estos módulos y extensiones para rediseñar la página del producto. Suplementos de productos Este es uno de los módulos/extensiones importantes que puede usar para diseñar la página de su producto. Puede agregar más opciones a sus productos en forma de un cuadro de caída, cuadro de selección, cuadro de texto, etc. Por ejemplo, puede proporcionar una garantía para sus productos electrónicos o puede ofrecer diferentes colores para sus camisetas T Dokan también tiene el módulo de complementos del producto. Con este módulo, los proveedores también pueden crear suplementos directamente desde el tablero del proveedor. Este suplemento/extensión es perfecto para productos que tienen extensiones, servicios adicionales (como un boleto de Acción de Gracias escrito a mano), diferentes variaciones en color, tamaños (para ropa) , etc. Muestras de variación Esto agrega variaciones a sus productos, pero la muestra de variaciones de extensión reemplaza el cuadro de caída, los cuadros de texto y muestra variaciones: estilos, tamaños, patrones, colores, etc. – Con una imagen o una muestra de color para dar a los clientes una mejor idea sobre exactamente lo que compra y mejorar el diseño de sus páginas de productos.
Dale a tu página de producto un aspecto pulido y limpio y definitivamente puedes resaltar la competencia. Recomendaciones de productos Esta es una extensión muy útil para personalizar el producto WooCommerce. Si vende zapatos, puede recomendar calcetines o zapatos pulidos. O si vende teléfonos inteligentes, puede recomendar cubiertas, cargadores, etc.
Puede agregar productos recomendados de acuerdo con lo popular, lo nuevo, lo que está en descuento, etc. El video del producto de WooCommerce con un 73% más de visitantes que viendo videos de productos realizarán una compra. Un video de video es una forma fuerte de presentar sus productos. Es fácil explicar todas las características y los usuarios también lo consideran muy convincente. Puede usar esta extensión para agregar un video a la galería de imágenes o puede reemplazar la imagen de la función con un video. Cargue los videos en su biblioteca de WordPress de medios o los incorpore desde servicios de terceros o YouTube. La forma de solicitar el producto Dokan Este módulo Dokan permitirá a los visitantes y clientes comunicarse con los propietarios de las tiendas en la página del producto. Pueden enviar una pregunta detallada por correo electrónico sobre el producto o servicios a los vendedores y responder esas preguntas y por correo electrónico.
El visitante verá una pestaña en la sección de información adicional y puede escribir sus preguntas allí. Este módulo agregará un tamaño adicional a la página del producto. La asistencia para la tienda Dokan Store es una parte importante de cualquier tienda electrónica de comercio. Si el soporte es estúpido, definitivamente afectará la imagen de su tienda en línea. El módulo de asistencia de Dokan Store puede ayudarlo a reducir esta brecha. Puede agregar un botón de soporte a la página del producto, que ayudará a los usuarios a contactarlo desde cualquier lugar. Dará una sensación de credibilidad de que siempre está disponible para ellos en cualquier lugar.
Estas son las extensiones y módulos disponibles que puede usar para darle a su página de productos de WooCommerce. También hay extensiones y módulos disponibles, pero estas son las extensiones que sentí que puede agregar sin evitar demasiado el diseño. 3. Personalice la página del producto Wooocomerce con el creador de páginas Elementor no menos importante, puede cambiar el diseño del producto WooCommerce utilizando un generador de páginas como Elementor. Elementor se ha convertido en uno de los complementos principales para crear páginas de WordPress. Ya tiene más de 5 millones de usuarios en todo el mundo. Y tiene una increíble colección de widgets especialmente construidos para personalizaciones de WooCommerce. CA, widget por título de producto
Widget woo pan rallado
Widget con imagen del producto
Widget de evaluación de productos
Breve descripción widget
Widget por precio del producto
Relacionado con el producto
Agregar al carrito de widgets
Meta de widgets
Archivo con datos de productos
Widget de sobretensión.
Usando estos widgets, puede cambiar completamente la dinámica de la página de su producto. Para crear un nuevo producto para WooCommerce, explore las plantillas -> Agregar nueva página de destino. Ahora seleccione la opción de página de producto única y cree una nueva plantilla. Encontrará un conjunto de plantillas hechas para la página del producto WoCommerce. Seleccione uno y use los widgets en la lista para crear la página de su producto.
Y si desea agregar algunas funcionalidades para continuar, puede agregar suplementos de terceros, como complementos felices. Estas son las tres formas en que puede aprender a personalizar la página del producto WooCommerce. Sin embargo, no exagere cuando rediseñe la página de producto única. Debe mantener el diseño limitado y considerar algunas cosas. Consejos para optimizar la página del producto para aumentar la tasa de conversión sin importar qué tan bien venda su marca o gasto por la marca o cuánto tráfico obtenga, no es posible no obtener ventas para la página de productos mal optimizada. Por lo tanto, cuando rediseñe su página de producto, debe considerar cosas como, agregar imágenes de los productos de State -Le -Art si las imágenes de su producto no reflejan lo que representa el producto, entonces es probable que sus ventas disminuyan. Para aumentar las ventas, debe tener imágenes claras de productos. Puede contratar a un fotógrafo profesional para fotografiar sus productos o puede usar un dispositivo de alta calidad para tomar fotos. Cuanto más cliente pueda ver el producto en esas imágenes, más segura se sentirá. También debe asegurarse de que sean fotos de alta resolución. Incluya información relevante, evite lo que no sea necesario, no escriba nada que no coincida con sus productos o su tienda en línea. En la página de un producto, hay diferentes tipos de información. Pero debe tener cuidado con lo que ven sus usuarios. Además, organice su información en consecuencia para que sus clientes.
Para poder comprender más sobre sus productos. Mantenga la página de producto limpia, le sugerimos que renuncie a su página predeterminada de productos Wooommerce. Pero asegúrese de no exagerar. Agregue solo los elementos necesarios y agregará valor a la página de su producto. Mejore la descripción de su producto La página de su producto debe tener descripciones largas y cortas. La breve descripción dará a los clientes un resumen, mientras que la larga descripción discutirá hechos y estadísticas. También puede extender la breve descripción y contar una historia atractiva sobre su producto, que excede las características básicas. Esto puede ayudar a los clientes a estar más cómodos al hacer una compra. Muestre el precio correcto en el lugar correcto Coloque el precio en el lugar correcto al personalizar la página del producto WooCommerce. Si desea que sus clientes comprendan y vea el precio rápidamente, muestre el precio con una fuente alta. El precio debe ser uno de los artículos más grandes en la página del producto. Debe establecer el contraste de color para que salga el precio. Resalte cualquier código de descuento o cupón, cerca del precio. Venga su propio mercado con Dokan
Si sigue estos consejos, entonces puede crear una página de producto WooCommerce optimizada. Con frecuencia volver a volver a las preguntas de personalización de la página del producto WoCommerce
¿Cómo agrego preguntas frecuentes a la página de mi producto? Puede usar el complemento con frecuencia preguntas para agregar preguntas frecuentes en la página del producto. Vaya a complementos -> Agregar nuevo. Ingrese preguntas frecuentes y verá que aparecerán muchos complementos. Encuentre el que trabaja para usted y agrega el complemento al tablero de WordPress. ¿Cómo optimizo mi producto WooCommerce? Puede seguir estos consejos para optimizar la página de su producto de WooCommerce, 1. Use el estado -de las imágenes de las artes 2. Haga claramente la descripción de su producto 3. No escriba nada inútil 4. Mantenga la página del producto 5. Use la ubicación correcta de precio
¿Cómo personalizo un código de WooCommerce? Puede seguir estos pasos para editar el código WooCommerce, 1. Inicie sesión en los archivos de su sitio de WordPress. 2. Acceso /WP-Content /, entonces /Plugins /. 3. Abra la carpeta /woCommerce /luego abra /plantillas /y finalmente /carto /. 4. Seleccione el archivo llamado CART.PHP y ábralo en su editor de texto.
Cree una página de producto perfecta para su tienda WooCommerce Al crear una tienda electrónica de Wooocomerce, puede personalizar fácilmente su tienda de la manera que desee. Porque WooCommerce tiene que ver con la flexibilidad y la personalización. La personalización de la tienda es la clave para destacarse en comparación con el resto de la competencia. Hemos mostrado tres formas diferentes en que puede personalizar la página del producto WooCommerce. Elija uno y comience a personalizar sus páginas únicas del producto. Espero que esta guía haya sido útil para revelar las formas de personalizar las páginas predeterminadas.
Suscríbete a nuestro boletín
