Guía – Mostrar subcategorías en grid (cuadricula) en Prestashop 1.5

En esta guía, vamos a explicar como mostrar el listado de subcategorías en “Grid” (cuadricula) en Prestashop 1.5, bajo la plantilla por defecto.

Cuando vemos normalmente el listado de subcategorías, lo vemos en formato de “lista”.

mostrarsubcategorias
Listado subcategorías en Prestashop 1.5

Pero ¿Y si quisiéramos ver los listados de subcategorías en “Grid”, es decir una subcategoría al lado de otra?

Para conseguir que las subcategorías se muestren una al lado de otra, vamos a seguir los siguientes pasos:

1) Ir al fichero

/themes/default/css/category.css

Buscar lo siguiente:

.inline_list li {
padding: 10px 0;
border-bottom: 1px dotted #ccc;
}

Y lo dejamos así:

.inline_list li {
padding: 10px 0;
border-bottom: 1px dotted #ccc;
float: left;
width:89px;
}

2 ) En el mismo fichero buscamos esto:

.inline_list li .cat_name {
font-weight:bold;
font-size:13px
}

Y lo dejamos así:

.inline_list li .cat_name {
font-weight:bold;
font-size:13px;
clear:both;
display:block;
}

Ahora veremos el listado de subcategorías así:

subcategorias_mostrar
Mostrar subcategorías en grid en Prestashop 1.5

7 comentarios sobre “Guía – Mostrar subcategorías en grid (cuadricula) en Prestashop 1.5”

  1. Cual es el bloque?
    “Bloque de Categorias por Prestashop”?

    No puedo mandarlo a la columna central… solo me muestra el arbol en la columna de la izquierda…

  5. De nuevo, muchas gracias, y como dice el compañero, como en el foro muy activo, me has solucionado el problema de mostrar todas las categorías, que en PS 1.5 no hay manera 😉

  6. Excelente, muy buen tutorial , cuesta mucho encontrar material para en español de prestashop, gracias por el tremendo aporte

  7. Un aporte. Al hacer esto, la barra de comparación queda descolocada mezclándose con el contenido de las subcategorías en el caso en que estas no completen líneas (float:left)

    Para evitar esto:
    Theme>NUESTROTEMA(o default)> global.css

    Buscar lo siguiente:

    .content_sortPagiBar { margin:20px 0}

    Y substituir por lo siguiente (a gusto del consumidor):

    .content_sortPagiBar {
    margin:20px 0;
    float:inherit;
    width:inherit;
    }

    Con esto conseguiréis que la barra de comparación (que además incorpora la paginación) se muestre como es debido debajo del conjunto de las categorías o subcategorías.

    Un saludo.

Los comentarios están cerrados.