{"id":25007,"date":"2018-02-28T00:00:00","date_gmt":"2018-02-27T18:30:00","guid":{"rendered":"https:\/\/git-staging.wpastra.com\/?post_type=docs&p=25007"},"modified":"2023-12-18T18:21:34","modified_gmt":"2023-12-18T12:51:34","slug":"shop-woocommerce","status":"publish","type":"docs","link":"https:\/\/git-staging.wpastra.com\/es\/docs\/shop-woocommerce\/","title":{"rendered":"\u00bfC\u00f3mo dise\u00f1ar una p\u00e1gina de cat\u00e1logo de productos o una p\u00e1gina de tienda utilizando el m\u00f3dulo WooCommerce en Astra?"},"content":{"rendered":"

Puede dar estilo a la p\u00e1gina de la tienda donde aparecen todos sus productos. Puede ser la p\u00e1gina principal de la tienda o la p\u00e1gina de archivo de productos.<\/p>\n\n\n\n

Pasos r\u00e1pidos sobre c\u00f3mo dar estilo a la p\u00e1gina de la tienda WooCommerce usando el m\u00f3dulo WooCommerce<\/strong>
Paso 1:<\/strong>\u00a0Aseg\u00farese de que dispone del\u00a0Complemento Astra Pro<\/strong>\u00a0y\u00a0WooCommerce<\/strong>\u00a0plugin instalado y activado.\u00a0\u00bfC\u00f3mo instalar el complemento Astra Pro?<\/a>
Segundo paso:<\/strong>\u00a0Active el m\u00f3dulo WooCommerce desde los M\u00f3dulos Astra Pro en la secci\u00f3n\u00a0Astra > Bienvenido<\/em>
Paso 3:<\/strong>\u00a0Visita el personalizador [\u00a0Apariencia > Personalizar > WooCommerce<\/em>\u00a0] para editar la configuraci\u00f3n del m\u00f3dulo <\/p>\n\n\n\n

Encontrar\u00e1 los ajustes en Apariencia > Personalizar > WooCommerce > Cat\u00e1logo de Productos<\/strong><\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Elija el dise\u00f1o de la tienda<\/h3>\n\n\n\n

Dentro de las opciones de personalizaci\u00f3n de su sitio web, puede ver tres dise\u00f1os distintos de tarjeta de tienda. Cada uno de estos dise\u00f1os ofrece caracter\u00edsticas \u00fanicas y mejoras visuales para mejorar la apariencia y funcionalidad de la p\u00e1gina de la tienda de su sitio web. Veamos cada dise\u00f1o en detalle:<\/p>\n\n\n\n

Dise\u00f1o 1:\u00a0<\/strong>Es el dise\u00f1o cl\u00e1sico y est\u00e1ndar con el que ya est\u00e1 familiarizado. Muestra el nombre del producto, las categor\u00edas, el precio y las valoraciones justo debajo de la imagen del producto.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Dise\u00f1o 2:\u00a0<\/strong>Se trata de una versi\u00f3n modificada del dise\u00f1o cl\u00e1sico en la que ver\u00e1 el bot\u00f3n \"A\u00f1adir a la cesta\" al pasar el rat\u00f3n por encima de la imagen del producto.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Dise\u00f1o 3:\u00a0<\/strong>Ofrece una vista en paralelo de la imagen y los detalles del producto, lo que proporciona una presentaci\u00f3n m\u00e1s espaciosa de sus productos.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Columnas de la tienda<\/h3>\n\n\n\n

Puede elegir el n\u00famero de columnas que se mostrar\u00e1n para sus productos en la p\u00e1gina de la tienda, en la vista de cuadr\u00edcula y en la vista de lista.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Usted tiene el control para elegir el n\u00famero de columnas en sus dispositivos responsivos:<\/p>\n\n\n\n

Productos por p\u00e1gina<\/h3>\n\n\n\n

Al igual que las entradas del Blog en la p\u00e1gina de archivo, usted tiene el control para decidir el n\u00famero de productos en la p\u00e1gina principal de la tienda.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Paginaci\u00f3n de la tienda<\/h3>\n\n\n\n

N\u00famero<\/h4>\n\n\n\n

La opci\u00f3n de n\u00famero restringe el n\u00famero de productos en una p\u00e1gina individual. El resto de productos no mostrados se dividen en m\u00e1s p\u00e1ginas<\/p>\n\n\n\n

Comprar estilo de paginaci\u00f3n<\/h4>\n\n\n\n

Puede cambiar este estilo a C\u00edrculo o Cuadrado<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Desplazamiento infinito<\/h4>\n\n\n\n

Esta opci\u00f3n de la p\u00e1gina de productos representa la visualizaci\u00f3n ilimitada de productos. La p\u00e1gina se ampl\u00eda tanto como sigas a\u00f1adiendo los productos en la p\u00e1gina de archivo de productos con un desplazamiento infinito.<\/p>\n\n\n\n

Evento para activar la carga infinita<\/h4>\n\n\n\n

Despl\u00e1cese por<\/h5>\n\n\n\n

Te mantiene desplaz\u00e1ndote por la p\u00e1gina.<\/p>\n\n\n\n

Haga clic en<\/h5>\n\n\n\n

El Desplazamiento puede alargar la p\u00e1gina y el espectador puede perder inter\u00e9s despu\u00e9s de desplazarse a cierto nivel. Para evitarlo elija una opci\u00f3n de Clic donde aparezca el bot\u00f3n Cargar m\u00e1s.<\/p>\n\n\n\n

Este bot\u00f3n aparece despu\u00e9s de que un cierto n\u00famero de productos se muestran en filas. Puede cambiar el texto del bot\u00f3n seg\u00fan sus necesidades.<\/p>\n\n\n\n

M\u00e1s documentos - <\/strong><\/p>\n\n\n\n