Cómo personalizar la plantilla de página de WooCommerce Shop

El diseño predeterminado de la página de la tienda WooCommerce no está en altura. El archivo de archivo predeterminado.php del tema actual de WordPress sigue. Así que está absolutamente bien si no te gusta la plantilla predeterminada. Pero la pregunta es cómo crear o personalizar la plantilla de página de la tienda WooCommerce. Hay dos formas de crear o personalizar la página de la tienda WooCommerce. La primera forma es crear una plantilla de tienda utilizando un complemento como ProductX WooCommerce Blocks. O puede crear una plantilla si tiene conocimiento básico de codificación.
Se esconde el contenido
1 Crear y personalizar la página de la página de la tienda de WooCommerce bebé
1.1 Paso-1. Crear un tema para niños
2 Paso 2. Crear una plantilla de página de WooCommerce Shop
3 Paso 3. Personalizar la plantilla para la página de la tienda de WooCommerce
4 Crear y personalizar el equipo de la página de la tienda de WooCommerce utilizando ProductTX
4.1 Paso-1. Instalar productx
4.2 Paso 2. Habilitar el complemento del constructor
4.3 Paso 3. Cree una nueva plantilla de página de WooCommerce Shop
4.4 Paso 4. Personalizar la plantilla para la página de la tienda de WooCommerce
4.4.1 Importar paquete de arranque
4.4.2 Bloques de importación
4.4.3 Explore el generador de consultas
4.4.4 Agregar filtro de producto
4.4.5 Agregar paginación
4.4.6 Función de retorno de imagen
4.4.7 Lista de funciones de deseos
4.5 Característica de visualización rápida
5 beneficio de productos para crear plantilla de página de WooCommerce Shop
6. Conclusión
Cree y personalice la plantilla de página de la tienda WooCommerce Si tiene conocimiento de la codificación, puede crear fácilmente una plantilla de página de WooCommerce siguiendo los pasos a continuación:
Paso 1. Cree un tema para niños porque jugaremos con el tema actual de nuestro sitio, se recomienda crear un niño y personalizarlo en lugar del tema principal. Porque mientras realizamos cambios, podemos romper la estructura del sitio. Otro problema es que si agregamos códigos personalizados a los archivos de temas, los códigos se eliminarán con una nueva actualización. En primer lugar, debe crear una nueva carpeta de la manera con los archivos del tema (WP-Content/Temas) y darle un nombre. Será el tema de su hijo. Abra la carpeta y cree un archivo de texto e inserte el siguiente código. Nombre del tema: Storefront Child Theme Uri: https: //www.wpxpo.com/ Descript: A Storefront Child Theme Autor: WPXPO Autor: https: //www.wpxpo.com Template: StoreFront Version: 1.0.0 Dominio de texto: StorefrontChild Ahora cree otro archivo de texto y llámelo Functions.php e inserte el código a continuación ./* Enqueue scripts y estilo de ellos */ function storeFront_styles (wp_enqueue_style (‘child-style’, get_stylesheet_uri () ,, Array (‘veintinueve- twenty———- One-style ‘), wp_get_theme ()-& gt; get (‘ versión ‘)); } add_action (‘wp_enqueue_scripts’, ‘storeFront_styles’); Todo esto es ahora cuando accede a la sección de aspecto/temas de su sitio y debe ver las dos versiones de exhibiciones y niños para niños. Paso 2. Cree una plantilla de página de WooCommerce Shop ahora que ha creado el tema infantil, es hora de crear la plantilla para la página de la tienda. Para hacer esto, vaya al cpanel de su sitio y abra el archivo con el tema infantil. Cree un archivo y fíjelo como Archive-Product.php, que será la plantilla de página de la tienda.
Paso 3. Personalice la plantilla para la página de la tienda WooCommerce, la plantilla está vacía, por lo que si navega por la página de la tienda de su sitio, también estará vacía. Puede crear la plantilla escribiendo sus propios códigos o copiando los códigos de plantilla de una página y colocándola en la nueva plantilla para comenzar. Ahora puede obtener una vista previa de la página de la tienda y se dará cuenta de que parece un poco roto. Pero no se preocupe, resolveremos esto con el siguiente código. Para corregir este código correctamente: comience a editar la plantilla (Archive-Produc.php).
Reemplace el código entre y <! – #main → con el código anterior.
Después de reemplazar los códigos, actualice la página de la tienda para verificar cómo se ve. Verá que los productos se muestran de manera organizada de acuerdo con el código. También puede aumentar el número de productos y columnas reemplazando el valor de los límites de productos y columnas. Cree y personalice la plantilla de página de la tienda WooCommerce usando ProductX si no es un desarrollador o simplemente no le gusta escribir código, entonces el segundo método es perfecto para usted. En este método, debe usar el complemento de bloques de WooCommerce de Productx Gutenberg.
Proporciona el complemento exclusivo de WooCommerce Builder para crear páginas de archivo personalizadas, tienda y un producto. Siga los pasos a continuación para comenzar a crear una nueva plantilla de página de WooCommerce Shop. Paso 1. Instale ProductX Si desea utilizar el complemento de WooCommerce Builder, debe instalar el complemento ProductX en su sitio web de WooCommerce. Para esto:
Vaya a la sección del complemento y haga clic en Agregar nuevo.
Haga clic en el botón de instalación.
Después de la instalación, haga clic en el botón de activación.
Instale ProductTX Paso 2. Habilite el complemento del constructor Después de instalar el complemento, debe activar el WooCommerce Builder. Para esto:
Vaya a la sección Todos los Adons.
Comience el suplemento del constructor.

Active el complemento del constructor Después de comenzar, verá la sección del constructor junto con todas las secciones de productos. Paso 3. Cree una nueva plantilla de página de WooCommerce Shop ahora es el momento de crear una nueva plantilla para su página de WooCommerce Store. No se preocupe, no se requieren códigos. Simplemente siga los pasos a continuación:
Ir a la sección del constructor.
Haga clic en el botón Agregar nuevo.

Dar un nombre al constructor.
Seleccione el tipo de constructor como tienda.
Guardar y editar con Star.
Cree una nueva plantilla de página de la tienda WooCommerce Step-4. Personalice la plantilla para la página de la tienda WooCommerce ahora, puede comenzar a personalizar la página de la tienda desde cero. Para esto, puede importar paquetes iniciales para la tienda o agregar bloques de productos.
ProductX ofrece dos tipos de bloques de productos, cuadrículas de productos y diapositivas de productos para presentar los productos de la tienda WooCommerce. Los paquetes de inicio son una combinación de varios bloques de productos. Por lo tanto, puede agregar más bloques para hacer su propia combinación. Importe el paquete de arranque Si desea importar paquetes iniciales, haga clic en la biblioteca de bloques y explore los paquetes iniciales. Decida cuál desea agregar y haga clic en el botón Importar. Después de hacer clic en el botón Importar, el paquete de inicio se agregará a la página de la tienda. Actualice la página y verifique cómo se ve. Inicio de bloques de importación Si no desea utilizar el paquete inicial, también puede importar la cuadrícula del producto y los bloques deslizantes del producto personalizan la página de la tienda de acuerdo con sus necesidades, haga clic en el icono más e importar los bloques deseados.
Importar bloques Después de importar un bloque, puede personalizarlo y usar la sección Configuración. Hay varias opciones de personalización disponibles para cada uno de los bloques. Explore el generador de consultas El generador de consultas se utiliza para elegir la cantidad de productos y clasificar los productos apareciendo en varios criterios, como los más vistos, el más vendido, el más evaluado, al azar, etc. Para ordenar los productos:

Haga clic en Configuración.

Navegue a la configuración de consulta.

Haga clic en la consulta rápida.

Seleccione Criterios de clasificación.
Explore el generador de interrogación Agregue el filtro de filtro de producto La función de filtro de producto A ProductX ofrece un filtro alimentado por AJAX de acuerdo con la categoría y las etiquetas. Para que los visitantes puedan explorar diferentes tipos de productos sin recargar toda la página. Para agregar el filtro de producto: vaya a la configuración general.
Active la opción de filtro.
Explore la opción de filtro.
Elija el tipo de filtro de categoría/etiqueta.

Seleccione categorías/etiquetas específicas o múltiples.
Agregue el filtro de producto, también puede agregar más valores de acción junto con categorías o etiquetas, que incluyen descuento, evaluado, mejor calificado, presentado, nueva llegada, etc.
Opciones de personalización:
Seleccionando la alineación.
Los colores que desea para el texto del filtro.
El radio del borde, el borde y el relleno.

El color del texto de caída.
El color del cursor Dopdown.
Agregar ProductX Paging también proporciona la paginación AJAX para aumentar el número de productos sin recargar toda la página. Para agregar paginación:
Vaya a la configuración general.
Active la opción de paginación.
Elija el tipo de paginación.
Agregar opciones de personalización de paginación:
Color del texto de la paginación.
Color de fondo.
Ajustando el radio del borde, el borde y el revestimiento.
La imagen de la imagen del producto Flipper de imagen del producto lo ayuda a incluir las funciones de retorno de la imagen en las tiendas WooCommerce. Entonces, cuando los visitantes pasan con el mouse en una imagen, la imagen del producto se invertirá en otra imagen. Por defecto, la imagen del producto se invertirá en la primera imagen de las imágenes en la galería del producto. Sin embargo, puede seleccionar la imagen deseada.

Devuelva la imagen para agregar esta función: vaya a todas las secciones de suplementos en ProductTX.
Active la imagen Flip Addon.
Habilite la imagen Flip para los bloques de productos deseados.
Agregue la imagen deseada mientras edita un solo producto.
La función de la lista de deseos de ProductX también ofrece un suplemento a la lista de deseos para agregar dos tipos de características para la lista de deseos a la tienda WooCommerce. Para que los visitantes puedan agregar los productos deseados a una lista y comprarlos más tarde.

Lista de deseos para agregar esta función:
Vaya a la sección Todos los Adons de ProductX.
Active el suplemento para la lista de deseos.
Crear y configurar la página de la lista de deseos.
Active la lista de deseos en la configuración general.
Elija el tipo de sabiduría emergente/redirección a las listas de deseos.

Opciones de personalización:
Elija el color del botón Wishist
Elija el color de fondo para el botón
Función de vista rápida El suplemento de ProductX de vista rápida lo ayuda a incluir la visualización rápida de productos en su tienda WooCommerce. Para que los visitantes puedan ir con el mouse a los detalles básicos de los productos sin salir de las páginas de la tienda/archivo.
Para agregar esta función:
Vaya a la sección Todos los suplementos en ProductTX
Habilitar el programa de complemento de vista rápida
Active la función de vista rápida desde la configuración general
Opciones de personalización:
El color del texto

Color de libración
Color de fondo
Ajuste el relleno
ProductTX Benefit para crear una página de tienda de WooCommerce Store Baby All-in-One: Productx Gutenberg WooCommerce Blocks es una solución todo en uno para crear una tienda de WooCommerce personalizada.Entonces, si lo usa para crear una plantilla de página de la tienda;
También puede beneficiarse de muchas otras maneras. Proporciona todas las características necesarias para una tienda en línea. Por lo tanto, puede eliminar 5-7 complementos esenciales, lo que conduce al ahorro de recursos de alojamiento. Sin conocimiento de la codificación: como mencioné anteriormente, no debe escribir códigos mientras usa el complemento ProductX. No importa, desea crear plantillas para una página de tienda o para páginas de productos únicas, todo es fácil de hacer y personalizable. Tasa de conversación: todas las funciones y suplementos de complementos de productos ProductX están bien diseñados para aumentar la tasa de conversión. Sin embargo, debe usarlos de manera efectiva para garantizar una mejor experiencia del cliente. Gutenberg Ready: El uso del editor Gutenberg crece rápidamente. Este editor de WordPress predeterminado ya está compitiendo con creadores de páginas populares como Elementor, Div, Oxygen, etc. Recientemente, han introducido las capacidades de edición completas del tema de los veintiséis veintiantos. Por lo tanto, estar preparado para Gutenberg es una gran ventaja para los usuarios de productos. Debido a que muchos grandes jugadores de WordPress ya dicen, Gutenberg es el futuro WordPress. El valor de pedido promedio: el valor de pedido promedio se refiere al valor promedio de los gastos para cada compra. Tiene un impacto directo en los ingresos totales de los sitios comerciales electrónicos. Es por eso que todos los propietarios de tiendas en línea siempre intentan cultivarlo. ProductX puede ayudarlo a optimizar su tienda WooCommerce para aumentar su valor de pedido promedio. Actualizaciones regulares: