Cómo cambiar la plantilla de la página de la tienda en WordPress
Publicado: 2022-09-27Si desea cambiar el aspecto de la página de su tienda en WordPress, puede hacerlo editando la plantilla de la página de la tienda . La plantilla de la página de la tienda es responsable de mostrar los productos en su página de la tienda. De forma predeterminada, WordPress utiliza la plantilla estándar para la página de la tienda. Sin embargo, puede cambiar la plantilla de la página de la tienda a una personalizada si lo desea. Para editar la plantilla de la página de la tienda, debe acceder al editor de WordPress. Para hacer esto, inicie sesión en su sitio de WordPress y vaya a la sección "Apariencia". Luego, haga clic en el enlace "Editor". En la página del editor, verá una lista de archivos en el lado izquierdo. Busque el archivo "shop.php" y haga clic en él. El archivo shop.php se abrirá en el editor. Ahora puede editar el código para cambiar el aspecto de la página de la tienda. Una vez que haya terminado, haga clic en el botón "Actualizar archivo" para guardar los cambios.
Una página de tienda es un componente de tu tienda WooCommerce que creas con solo hacer clic en un botón una vez que hayas instalado y activado la plataforma. Es donde exhibirá sus productos y es la parte más importante del sitio web de su empresa. Aprenderá a personalizar la página de la tienda de WooCommerce en este tutorial. Cuando instala WooCommerce, crea una página de Tienda para usted. La opción 'Comportamiento de agregar al carrito' se puede encontrar en la esquina superior derecha de la página 'Comprar', justo debajo de la opción 'Comportamiento de agregar al carrito'. Estas imágenes se pueden usar para mostrar varias categorías de contenido relacionado con la tienda. Configura tu página de la tienda rápidamente con el Editor de bloques y WooCommerce.
Puedes cambiar la estructura de tu página de la Tienda usando los Bloques de Gutenberg en el Paso 3. Se puede acceder a la configuración del Bloque haciendo clic en cada Bloque en la sección de la derecha. Puede mostrar su tienda ingresando/comprar después de la URL en el front-end de su sitio web. El paso final es inspeccionar y terminar su proyecto. Ahora es el momento de asegurarse de que la tienda esté configurada y funcionando. Debido a que fue desarrollado por los propios desarrolladores, WooCommerce Storefront es, con mucho, el tema más popular en el mercado actual. Se le dirigirá a la página de la tienda después de este paso, porque la URL asociada con la página de su tienda (por ejemplo, www.wooshop.com/shop) desaparecerá después de este paso, lo que resultará en '.com' o '.in' versión del enlace de su sitio web.
Después de instalar y activar el tema de WooCommerce Storefront, se le pedirá que lo active e instale. Esta extensión, que cuesta $59 y es necesaria para la página de la Tienda perfecta, vale la pena porque sirve como un componente crítico. Un tema secundario es una capa adicional dentro del tema principal que le permite realizar cambios sin tener que empezar de nuevo. Además de las páginas normales de WooCommerce , WooCommerce Storefront ofrece dos nuevos diseños de página: la página de inicio y el ancho completo. Cuando selecciona una página específica como ubicación para la plantilla de 'Página de inicio', se mostrarán los productos más recientes y destacados automáticamente. Puede crear páginas de tiendas y negocios de aspecto profesional por menos de un dólar con WooCommerce y Elementor. En nuestra opinión, debe comprar Elementor Pro si lo está considerando.
Los bloques para una página de Tienda se proporcionan como parte de la versión gratuita, pero no se puede acceder a ellos desde la versión gratuita. Cada sitio con Elementor pro cuesta $49 por año. Control total sobre la combinación de colores, el diseño y el contenido de un sitio web centrado en la conversión en un solo paso. ShopEngine es un generador gratuito de WooCommerce que agrega funciones a su sitio de WooCommerce. Las páginas de WooCommerce, incluida la sección de la tienda, se pueden crear y personalizar con ShopEngine. La herramienta ShopEngine le permite personalizar una página de tienda de WooCommerce de varias maneras.
¿Podemos editar la página de la tienda con Elementor?

Usar Elementor para editar la página de su tienda es una excelente manera de asegurarse de que su página se vea exactamente como usted desea. Puede usar Elementor para cambiar el diseño de su página, agregar o eliminar elementos e incluso cambiar los colores y las fuentes de su página. Editar la página de su tienda con Elementor es una excelente manera de asegurarse de que su página se vea exactamente como usted desea.
La edición de la página de la tienda de WooCommerce con Elementor se describe paso a paso a continuación. Muchos diseñadores de sitios web de WooCommerce todavía tienen dificultades para configurar la página de la tienda. Solo hay unas pocas plantillas de Elementor que deben modificarse, y algunas de ellas deben personalizarse. En otras palabras, no tiene que codificar una sola línea de código. Si está creando un sitio web de comercio electrónico con WooCommerce o Elementor Pro, esta es la forma más sencilla de personalizar la página de su tienda. Muchos usuarios preferirían mostrar categorías de productos o filtros como parte de la barra lateral. Esto solo está disponible para usuarios de Elementor Pro.
Use Elementor para personalizar fácilmente las páginas de productos de Woocommerce
Esta poderosa herramienta se puede usar como un complemento de WordPress o como una extensión para Shopify, que es una plataforma muy utilizada. Si usa cualquiera de estas plataformas, puede editar las páginas de sus productos en minutos, sin tener que aprender a codificar.
Puede comenzar a usar WooCommerce de inmediato usando una de las plantillas prediseñadas para una variedad de temas diferentes. Es sencillo personalizar un diseño una vez que lo tienes en la interfaz de arrastrar y soltar de Elementor.
Personalizar el código de Woocommerce de la página de la tienda

Si desea personalizar la página de la tienda en su sitio de WooCommerce, puede hacerlo editando el código. Para hacer esto, deberá acceder a los archivos de WooCommerce en su servidor y editar el código en el archivo apropiado. Si no se siente cómodo haciendo esto, puede pedirle ayuda a un desarrollador.
Debido a que WooCommerce es un complemento para crear y administrar tiendas en línea, es uno de los más populares. Las funciones de comercio electrónico de la plataforma son amplias y se integra con una variedad de otras plataformas. Un escaparate de WooCommerce bien diseñado actúa como una herramienta de marketing para el cliente al presentar el producto. El diseño de esta página está determinado por el tema elegido y está establecido por ubicaciones extremadamente específicas dentro del código. Una página de tienda de WooCommerce, como una tienda física, debe personalizarse. Un sitio web que sea fácil de usar e interactivo debería simplificar el proceso de compra. El administrador de la página puede agregar información valiosa a la página, como palabras clave, metadescripciones y títulos, para mejorar su clasificación en los motores de búsqueda.
Las tiendas con una marca sólida se representan en el diseño de la página de la tienda . Todos los colores, imágenes, fuentes y otros elementos deben elegirse de acuerdo con el estilo de la tienda. Esto se aplica no solo a los minoristas en línea que crean una tienda WooCommerce, sino también a las empresas físicas que deciden hacerlo. Hay dos formas de lograr esto: manualmente o mediante un creador de páginas. Para que una página de tienda parezca una tienda, los productos deben mostrarse separados de otros productos. Se requerirá código para personalizar aún más el sistema. Como resultado, el objetivo más importante es crear una experiencia de compra fácil de usar.
Coloque el siguiente código en el archivo archive-product.html para mostrarle los productos más populares. Con la ayuda de un Page Builder, una persona con poca experiencia en codificación puede crear un sitio web. Los usuarios pueden editar fácilmente sus páginas de la tienda utilizando un creador de páginas. También hay otras atribuciones disponibles, como el número de columnas y el número de elementos que se muestran en cada columna. Todos los creadores de páginas (Elementor, Divi, Visual Composer, etc.) se pueden usar con este método. Esta es una guía paso a paso para crear una página de tienda WooCommerce de alta calidad . La audiencia, el tipo de producto, la geolocalización, la industria, etc., son consideraciones importantes para cada empresa.

Hay consejos generales que la mayoría de las empresas pueden usar, pero también hay pasos específicos que las empresas deben seguir. Si es necesario cambiar el código, debe implementarse en un entorno de prueba antes de publicarse. Una buena revisión y una retroalimentación positiva son excelentes formas de generar confianza y credibilidad. Los clientes podrán tomar mejores decisiones de compra si leen las reseñas antes de realizar una compra. Se puede agregar una tabla de productos para que sea más fácil para los clientes comprar múltiples productos desde una sola pantalla. La creación de una plataforma de comercio electrónico suele ser una cuestión de interacción simple con una interfaz intuitiva y poca capacitación. WooCommerce es una plataforma robusta, flexible y adaptable que se puede utilizar para crear y administrar tiendas en línea.
Aunque la página de la tienda de WooCommerce es fantástica, es posible que no funcione para todos los negocios o nichos. Si sabe cómo hacer las cosas manualmente, la personalización manual es una buena opción. Con la ayuda de un creador de páginas, puede crear una página de tienda fantástica .
Woocommerce: Cómo anular las páginas de la tienda por producto
La página de la tienda del producto se puede configurar por producto haciendo clic en el icono de WooCommerce en Configuración de WooCommerce > Productos > Páginas de la tienda.
Personalizar Woocommerce Shop Page Divi
La página de la tienda de WooCommerce es la página que muestra todos sus productos. Puede personalizar esta página de varias maneras, incluida la elección de qué productos mostrar y cómo mostrarlos. También puede agregar contenido adicional a esta página, como una descripción de su negocio o productos.
La página de productos de tu tienda muestra los productos que vendes. Hay muchos factores a considerar al optimizar su empresa, y debe hacerlo para su supervivencia o fracaso. La mejor solución sería crear una nueva plantilla de página de producto que sea funcional y atractiva. PHP, HTML y CSS se pueden usar para transformar completamente la página de su producto. Debido a que la versión más reciente de Divi Builder funciona bien con WooCommerce, puede personalizar fácilmente cualquier módulo. Cuando la función de clasificación por estrellas está habilitada, una opción simple es ocultar o mostrar la clasificación por estrellas. Es una buena idea incluir una galería de productos en sus páginas de productos para aumentar las tasas de conversión.
Debido a que WooCommerce tiene un campo de cantidad que le permite agregar un carrito sin tener que crear manualmente un botón, no tiene que agregar manualmente el carrito. Puede dar al usuario la capacidad de seleccionar una cantidad dejando el campo de cantidad como está. En esta demostración, le mostraremos cómo puede cambiar la página del producto y agregarle una fila que contenga enlaces a otros elementos usando Divi. El uso de conmutadores en la página de su producto es una excelente manera de mantener la información actualizada y al mismo tiempo mantenerla limpia. Divi te permite incluir un interruptor en la descripción del producto usando el módulo Toggle. Son fáciles de usar y pueden ayudarlo a aumentar sus ventas. El tema y el complemento deben actualizarse periódicamente para garantizar que tenga acceso a las funciones más recientes de Divi.
Los módulos de Divi Builder le permiten agregar secciones y personalizar cualquiera de sus páginas o publicaciones. Lo único que debe hacer es permitir que el editor visual muestre los elementos deseados. Si está escribiendo una reseña personalizada de su producto, por ejemplo, es posible que desee incluir un botón de carrito.
¿Divi es bueno para Woocommerce?
Los módulos Divi le permiten usarlos en cualquier página o publicación en su sitio web (no solo en las páginas de productos de WooCommerce ). Se puede incluir un botón Agregar al carrito de Woo para un producto específico en su tienda en una página de destino personalizada para el producto, por ejemplo.
Elementor vs. Divi: ¿Cuál es el mejor creador de sitios web?
¿Cuál es mejor, Elementor o Divi?
Elementor y Divi son dos excelentes herramientas para crear sitios web. Elementor, por otro lado, es más fácil de aprender, usar y dominar, y cuesta menos. Divi, por otro lado, tiene una curva de aprendizaje empinada que es más difícil de dominar. Divi para sitios web ilimitados cuesta $ 89 por año (o $ 249 por cuenta de por vida). Al seleccionar un creador de sitios web, asegúrese de que cumpla con sus necesidades específicas.
Complemento de plantilla de página de tienda de Woocommerce
Un complemento de plantilla de página de tienda de WooCommerce es un complemento que le permite cambiar el diseño de su página de tienda. Esto puede ser útil si desea cambiar la forma en que se muestran sus productos o si desea agregar información adicional a la página de su tienda. Hay muchos complementos de plantilla de página de tienda de WooCommerce disponibles, por lo que puede encontrar uno que se adapte a sus necesidades.
Las plantillas de archivo de productos se incluyen como parte de la plantilla de la página de la tienda de Wooocommerce. Los cambios que hice en la plantilla de mi tienda no están visibles en la página de la tienda. En este caso, debe crear un tema secundario y realizar estos cambios en un tema secundario para que su tienda no se vea afectada por los cambios en el tema principal. El código se puede encontrar en la parte superior de WP-content hemes**theme*woocommerce*archive-product.php, que generará el archivo content-shop.html en la carpeta raíz de su tema. Este código usa la etiqueta condicional is_shop porque estaba en la página que intentabas cambiar. Al seguir el código get_header, puede asegurarse de que el encabezado de la página de la tienda permanezca intacto.
Dónde encontrar la plantilla de página de tienda de Woocommerce
Hay algunos lugares en los que puede buscar para encontrar una plantilla de página de tienda de WooCommerce. Una es buscarlo en el sitio web de WooCommerce. Otro lugar para buscar es en el sitio web de WordPress. Por último, también puedes buscarlo en Google.
El diseño de la página de la tienda de WooCommerce se ha quedado corto. Puede crear o personalizar la plantilla. El primer método para crear una plantilla de tienda es usar un complemento como ProductX WooCommerce Blocks. Alternativamente, si tiene habilidades básicas de codificación, puede usarlo para crear una plantilla por su cuenta. Puede escribir su propio código o copiar y pegar los códigos de la plantilla anterior de una sola página en la nueva. El segundo método es usar el complemento ProductX Gutenberg WooCommerce Blocks. Los archivos de productos personalizados, las páginas de la tienda y las páginas de un solo producto se pueden crear con el complemento WooCommerce Builder.
Los bloques se pueden usar para crear una tienda WooCommerce personalizada y son una solución todo en uno. Puede personalizar un bloque haciendo clic en el enlace de configuración después de importarlo. Product Query Builder se puede utilizar para calcular cuántos productos hay disponibles en el mercado y ordenarlos por criterios como los más vistos, los más vendidos, los más valorados, los aleatorios, etc. No necesita escribir códigos mientras utiliza el complemento ProductX. Independientemente de si desea crear plantillas para una página de Tienda o una página de un solo producto, puede hacerlo con facilidad y flexibilidad. Cuando compara el valor promedio del pedido con el gasto promedio en cada compra, obtiene una idea de su valor monetario. Como resultado, todos los propietarios de tiendas en línea se esfuerzan por aumentar la cantidad de clientes.
.php Cómo acceder a las plantillas de Woocommerce
El siguiente código se puede utilizar para acceder a las plantillas una vez que se han descubierto:
La siguiente URL está disponible para su descarga gratuita desde: http://example.com/wp-content/plugins/woocommerce/templates/.
En este ejemplo, se usaría el siguiente código para acceder a la plantilla de archivo del producto: *br. En el sitio web www.example.com/wwe-content/plugins/wwe-commerce/templates/product-archive, hay una página de complementos de WordPress de ejemplo.