Cómo crear la lista de vistas de productos de WooCommerce

¿Le gustaría crear una lista de visualización de productos de WooCommerce en su sitio web? Soy muy popular para mostrar más información sobre un producto para sus clientes en la página de la tienda. Por lo tanto, presentaremos un tutorial paso a paso para pasar a una visualización de la lista de productos en este tutorial. Pero antes de pasar por el proceso, veamos qué necesita para crear una visualización de la lista de productos. ¿Por qué crear una vista de lista de productos en WooCommerce? Por defecto, los productos en la página de su tienda se muestran en estilo de cuadrícula. Sí, dependen completamente del tema activo de su sitio web. Pero, en el caso de la mayoría de los temas, se muestran con una representación en la cuadrícula con un producto tras otro como placas.
Pero en una vista de lista, los productos se muestran con muchos más detalles. Cada producto se muestra uno tras otro en una lista vertical con información adicional, como detalles de entrega, descripción del producto y más. Por ejemplo, para comparar la visualización de la cuadrícula y la lista de la tienda en línea Best Buy. La visualización predeterminada de la cuadrícula de los productos en el sitio se representa de la siguiente manera:

Sin embargo, no puede cambiar directamente a la lista del sitio web. Pero si desea ver más productos, los productos se mostrarán en la vista de la lista con lo siguiente:

Podemos ver claramente que en la lista de visualización se muestran más detalles sobre el producto que en la visualización de la cuadrícula. Los clientes pueden ver fácilmente los detalles de entrega, el modelo de producto y los números de SKU, pueden comparar las opciones y la lista de deseos, etc. en la vista de la lista. Mientras que en la visualización de la cuadrícula, esta información no se puede agregar, porque harán que el sitio web parezca lleno. De hecho, si ejecuta una tienda en línea con productos mayoristas, catálogos de productos o un sistema de pedidos de restaurantes, la lista es más conveniente para sus clientes. Todos los detalles necesarios se pueden proporcionar a sus clientes en una sola página. Por lo tanto, no tendrán que hacer clic en las páginas individuales de los productos para ver la información adicional. ¿Cómo es una vista de la lista de productos de WooCommerce? La forma más fácil de crear una visualización de productos de WooCommerce es el uso de un complemento. Los complementos de WordPress ayudan a su sitio a mejorar su funcionalidad y flexibilidad. Del mismo modo, también se pueden usar para ver los productos desde una lista. Aunque hay muchos complementos que le permiten crear una lista de productos visual
La visualización/lista para WooCommerce es uno de los mejores complementos gratuitos para crear una vista de lista de productos. Es muy simple de usar y agrega solo un interruptor para activar la lista o la vista de la cuadrícula en la página de su tienda WooCommerce.

El complemento también le ofrece varias opciones para personalizar el estilo de la lista y los productos de la cuadrícula. Le brinda opciones avanzadas para cambiar el interruptor/lista de la cuadrícula para incluso cambiar su posición. Del mismo modo, los productos en la página también se pueden modificar a medida que le gusta con este complemento. CARACTERÍSTICAS DE CLAVE: Botón de transmisión y cuadrícula
Personalización avanzada para el botón Switch
Opciones producidas en la página
Código corta amigable
Compatibilidad con los principales complementos de WooCommerce
Precio: Visualización de la red/lista para WooCommerce es un complemento gratuito. Está disponible en el almacén oficial de complementos de WordPress.
Tabla con productos de WooCommerce
La tabla de productos de WooCommerce es un complemento premium que puede ayudarlo a crear una visualización de la lista de productos. Inicialmente, es uno de los complementos de WooCommerce para crear una tabla en su sitio web. Pero se puede cambiar fácilmente para mostrar sus productos en una vista de lista de tabla. El complemento es muy fácil de configurar y permite a los usuarios pedir más productos simultáneamente. También ofrece una opción de búsqueda y clasificación construida para la visualización de listas. Esta puede ser una característica muy conveniente para sus usuarios, ya que pueden encontrar fácilmente los productos deseados.
Características clave:

Opción para ver la lista de productos para productos
Búsqueda instantánea de productos y opciones de clasificación
Pedido rápido de una página
Easy -para usar la interfaz
Botones rápidos “Agregar a la canasta”.
Precio: la tabla de productos de WooCommerce es un complemento premium que comienza en $ 499 por año. Incluye 20 licencias del sitio con una garantía de reembolso de dinero de 30 días y asistencia prioritaria. Ahora que miramos algunos complementos, veamos cómo usarlos. Pero antes de comenzar, asegúrese de haber configurado WooCommerce correctamente, sin perder ningún paso, y utilizando uno de los temas compatibles con WooCommerce. Cortar la lista de productos de WooCommerce utilizando un complemento para crear la lista de productos de WooCommerce, usaremos visualización de Grid/List Visualización para WooCommerce en esta demostración. Es gratuito, muy fácil de usar y una solución simple para crear una lista de la lista de productos. Pero para comenzar a usar cualquier complemento, primero debe instalarlo y activarlo. 1. Instale y active el complemento para instalar el complemento, vaya a los complementos> Agregar nuevo desde el tablero de WordPress. Luego busque las palabras clave para el complemento y haga clic en Instalar ahora después de encontrarlo.
La instalación se completará después de un tiempo. Finalmente, active el complemento después de que esté instalado.
Si desea usar un complemento premium, deberá cargarlo e instalarlo manualmente. Eche un vistazo a nuestra guía detallada para instalar manualmente un complemento de WordPress para obtener más información. 2. Configure la configuración del complemento Una vez que active el complemento, puede configurar su configuración para crear una lista de vista de producto WooCommerce. Abra BeroCout> Ver cuadrícula/lista desde WordPress Dashboard. Podrá ver todas las opciones de personalización para la lista de productos aquí.
Las tres personalizaciones principales incluyen los botones, la cantidad de productos y CSS personalizados. 2.1. El botón de complemento de opciones le brinda muchas personalizaciones para sus botones para cambiar la cuadrícula o ver la lista de productos. Las opciones generales incluyen estilos predeterminados de pantalla buttop y móvil en su sitio web. También puede agregar un estilo de botón fijo para una página. Del mismo modo, también puede ajustar las posiciones de los botones que se mostrarán en su izquierda, derecha, menú o página o incluso en el menú. Junto con estas opciones, también puede editar el ancho móvil máximo, la clase personalizada y los rellenos para el botón. Además, hay varios preajuste y estilos disponibles con el complemento. Puede seleccionar un botón actual y editarlo más con opciones preestablecidas detalladas. Además, puede cambiar los estilos de los botones con el ancho, la altura, el tamaño del texto, la altura de la línea y muchos más.
Además, también puede personalizar el botón normal, el mouse sobre el botón y los estilos de los botones seleccionados. Cada uno incluye ajustes para el color de fondo, el ancho y el color del borde y las opciones de sombra.

Haga todos los cambios necesarios que necesita y haga clic en Guardar cambios. 2.2. Las opciones de conteo de productos también pueden ajustar las opciones de conteo de productos utilizando el complemento de vista Grid/lista al crear una vista de lista de productos. En primer lugar, puede activar o deshabilitar el uso de la cantidad de productos. Si lo activa, puede continuar agregando entradas para productos en la página, el valor del número de productos y el valor del divisor. La posición de la cantidad de productos también se puede establecer aquí, junto con sus propias opciones de botones y dónde mostrarlos. 2.3. CSS/JavaScript también personalizado, el complemento le permite agregar CSS o JavaScript cuando crea su lista de productos de WooCommerce. Hay cuadros de script designados para agregar CSS y JavaScript personalizado. JavaScript se puede agregar en diferentes circunstancias, como antes o después de la lista o el conjunto de estilos de cuadrícula, cookies, botones de cuadrícula/lista seleccionados, etc. También puede deshabilitar los archivos increíbles de Font Font desde aquí o seleccionar una versión Font Awesome.
Después de haber agregado el CSS o JavaScript requerido, no olvide guardar los cambios. Una vez que obtenga una vista previa de la página de la tienda, podrá ver el cambio para cambiar entre la vista de la cuadrícula y la lista. El número de productos se muestra aquí y la descripción del producto también se incluye con los productos. Y como se muestra en la demostración a continuación, puede pasar a visualizar la lista de productos haciendo clic en el botón Vista de lista.

Sus clientes incluso pueden volver a la vista de la red si es necesario. Pueden hacer clic en el botón Vista de la cuadrícula. ¡Esto es! Esta es la forma en que puede crear una lista de vista de producto WooCommerce y puede permitir a los clientes cambiar entre visualización de cuadrícula y lista. Bonificación: habilitar el modo de catálogo en WoCommerce. Ya he presentado una de las formas más simples de crear una lista de productos de WooCommerce. Son muy útiles para presentar sus productos en un sitio web de catálogo. Sin embargo, para ayudarlo a activar el modo de catálogo en WoCommerce, también le daremos una guía simple como bonificación. Para hacer esto, deberá agregar algunos fragmentos de COD al archivo Functions.php en su sitio, que es uno de los archivos básicos de su base, así que cree un tema secundario para los próximos pasos y haga una copia de seguridad de su sitio para que sus cambios se guarden cuando actualiza el tema de WordPress. Si necesita ayuda, también puede usar uno de los complementos de tema infantil para WordPress para crear un tema infantil. Después de activar el tema del niño, vaya al Editor de archivos de Aspecto> Tema y abra el archivo Functions.php.


Los archivos con el tema dependen del tema activo de su sitio. Utilicé el tema Div, por lo que su editor puede verse un poco diferente. Primero, debe eliminar el botón de adición en el carrito y luego ocultar los precios del producto. Por lo tanto, debe agregar los siguientes fragmentos de código al editor. 1. Elimine el botón Agregar en el carrito Puede usar el siguiente script para ocultar el botón Agregar en el carrito para la página de la tienda y la página del producto. Así que pegue a las funciones del archivo.php de su tema de remove_action (‘wooCommerce_after_shop_loop_item’, ‘wooCommerce_template_loop_add_to_cart’); remove_action (‘wooCommerce_single_product_ummary’, ‘wooCommer_); Esta característica eliminará la página Agregar en el carrito tanto para el WooCommerce como para la página de la tienda. Si desea que no se compren los productos, puede agregar el siguiente fragmento de código. add_filter (‘wooCommerce_is_purchasable’, ‘__return_false’); También reemplazará el botón Agregar en el carrito con un botón “Leer más”.

2. Ocultar los precios del producto Puede ocultar los precios de los productos de diferentes maneras en WoCommerce. Se pueden mantener ocultos para todos los usuarios o para todos, excepto para el administrador. Si desea ocultar los precios de los productos para todos los usuarios, use el siguiente script: add_filter (‘wooCommerce_get_price_html’, ‘quadlayers_remove_price’);

Quadlayers_remove_price function ($ precio) {

devolver;

} Como alternativa, si desea ocultar los precios para todos, excepto el administrador, use el siguiente fragmento: add_filter (‘wooCommerce_get_price_html’, ‘quadlayers_remove_); quadlayers_remove_price ($ $ precio) {

If (is_admin ()) devuelve $ precio;

devolver;
}

Además, si es necesario, puede ocultar los productos solo en la página de la tienda.Todo lo que tiene que hacer es pegar el siguiente fragmento de código a las funciones.php add_filter (‘wooCommerce_after_shop_loop_item_itle’, ‘remove_wooCommerce_loop_price’, 2);
Remove_wooCommerce_loop_price () Función {
if (! is_shop ()) return;// Ocultar precios solo en la página de la tienda
Remove_action (‘wooCommerce_after_shop_loop_item_itle’, ‘wooCommerce_template_loop_price’, 10);
} ¡Buen trabajo! Ahora puede crear una lista de vista de producto WooCommerce y puede activar correctamente el modo de catálogo en su sitio web. Si desea métodos alternativos para mostrar el modo de catálogo, tenemos una guía detallada para activar el modo de catálogo en WoCommerce. Del mismo modo, si necesita más información para eliminar el botón de adición en el carrito o para ocultar los precios en WoCommerce, también los cubrimos. Conclusión Esperamos que ahora pueda crear una lista de productos de WooCommerce para su tienda en línea. Puede usar fácilmente un complemento dedicado para permitir a los clientes pasar a una lista de productos. Los complementos incluso les permiten volver a la visualización de la cuadrícula, si es necesario, junto con muchas otras opciones de personalización. También le ofrecí algunos pasos básicos para personalizar la página de la tienda, activar el modo de catálogo en su sitio, donde también puede mostrar la lista de productos. Si desea realizar cambios en múltiples páginas de WooCommerce, también puede personalizar la página del carrito de compras, la página de categoría o incluso la página de pago del complemento, como el administrador de checkout de WooCommerce. Entonces, ¿puede agregar una vista de lista de vista en su tienda en línea sin ningún problema? ¿Has probado alguna vez? Por favor, háganos saber en los comentarios. Mientras tanto, aquí hay más de nuestros artículos que pueden interesarle: cómo personalizar la galería de productos de WooCommerce
Cambiar el mensaje No hay producto en el carrito
Cómo agregar la imagen del producto al pago de WooCommerce