Añadir más filas mediante css para mostrar más productos

  • Resuelto mxpr

    (@mxpr)


    hace 4 años, 3 meses

    Mi tema actual es «Lorem Ipsum | Books & Media Store WordPress Theme» y en la pagina de tienda solo muestra 3 filas de productos, el tema me permite crear hasta 6 columnas, pero necesitamos generar mínimo 3 filas extras para mostrar hasta 50 productos por página. Ya instale los plugins «WooCommerce Product Archive Customiser» y «Woocommerce Products Per Page» y no me han funcionado. Creo saber que es porque las sentencias de las filas están configuradas desde css pero no sé que parte es el que debo modificar. Les comparto el código de las listas de productos: 

    /* Shop Listing
----------------------------------------------------------------- */
.woocommerce .mode_buttons, .woocommerce-page .mode_buttons {
	float:left;
	margin:0.35em 0.5em 1em 0;
	display:block;
	font-size:1.125em;
}
.woocommerce .mode_buttons a+a, .woocommerce-page .mode_buttons a+a {
	margin-left: 0.5em;
}
.woocommerce .woocommerce-result-count {
	margin-top:0.35em;
}

.woocommerce ul.products, .woocommerce-page ul.products {
	margin-right:0;
	margin-bottom:0;
    text-align: center;
}

.woocommerce.columns-1 ul.products li.product,
.woocommerce-page.columns-1 ul.products li.product {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
    margin: 0 !important;
    padding: 4px 0 !important;
    position: relative;
	width: 100%;
    display: inline-block;
    vertical-align: top;
    float: none !important;
}
.woocommerce.columns-1 ul.products li.product .post_featured {
    box-shadow: none;
    float: left;
    margin: 2px 0.9375em 0 0;
    display: inline-block;
    width: auto;
}
.woocommerce.columns-1 ul.products li.product .post_featured img,
.woocommerce.columns-1 ul.products li.product .post_featured:hover img{
    border-color: #cccccc;
    border-style: solid;
    border-width: 0.5em 1.25em;
    height: 4.625em;
    width: 3.125em;
    position: static;
    left: auto;
    top: auto;
    -webkit-transform: translateX(0) translateY(0);
       -moz-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
}
.woocommerce.columns-1 ul.products li.product .post_content {
    margin-left: 6.5675em;
}
.woocommerce.columns-1 ul.products li.product .woocommerce_add_to_cart_button_container,
.woocommerce.columns-1 ul.products li.product .onsale,
.woocommerce.columns-1 ul.products li.product .woocommerce_product_author{
    display: none;
}
.woocommerce.columns-1 ul.products li.product h3,
.woocommerce.columns-1 ul.products li.product .price {
    text-align: left;
}
.woocommerce.columns-1 ul.products li.product h3 {
    margin: 0;
    padding: 0;
}
.vc_row .woocommerce.columns-1 ul.products .star-rating {
    margin: 0.7em 0;
}
.vc_row .woocommerce.columns-1 ul.products .price {
    font-family: 'Lato';
    font-weight: 400;
}
.vc_row .woocommerce.columns-1 ul.products .price del {
    font-size: 0.875em;
}

.woocommerce.columns-2 ul.products li.product, .woocommerce-page.columns-2 ul.products li.product,
.woocommerce .related.products ul.products li.product.column-1_2, .woocommerce-page .related.products ul.products li.product.column-1_2,
.woocommerce .upcells.products ul.products li.product.column-1_2, .woocommerce-page .upcells.products ul.products li.product.column-1_2,
.woocommerce ul.products li.product.column-1_2, .woocommerce-page ul.products li.product.column-1_2 {
    width: 50%;
    margin: 0 !important;
}
.woocommerce.columns-3 ul.products li.product, .woocommerce-page.columns-3 ul.products li.product,
.woocommerce .related.products ul.products li.product.column-1_3, .woocommerce-page .related.products ul.products li.product.column-1_3,
.woocommerce .upcells.products ul.products li.product.column-1_3, .woocommerce-page .upcells.products ul.products li.product.column-1_3,
.woocommerce ul.products li.product.column-1_3, .woocommerce-page ul.products li.product.column-1_3 {
    width: 33.3333%;
    margin: 0 !important;
}
.woocommerce.columns-4 ul.products li.product, .woocommerce-page.columns-4 ul.products li.product,
.woocommerce .related.products ul.products li.product.column-1_4, .woocommerce-page .related.products ul.products li.product.column-1_4,
.woocommerce .upcells.products ul.products li.product.column-1_4, .woocommerce-page .upcells.products ul.products li.product.column-1_4,
.woocommerce ul.products li.product.column-1_4, .woocommerce-page ul.products li.product.column-1_4 {
    width: 25%;
    margin: 0 !important;
}
.woocommerce.columns-5 ul.products li.product, .woocommerce-page.columns-5 ul.products li.product,
.woocommerce .related.products ul.products li.product.column-1_5, .woocommerce-page .related.products ul.products li.product.column-1_5,
.woocommerce .upcells.products ul.products li.product.column-1_5, .woocommerce-page .upcells.products ul.products li.product.column-1_5,
.woocommerce ul.products li.product.column-1_5, .woocommerce-page ul.products li.product.column-1_5 {
    width: 20%;
    margin: 1em -2px 0 !important;
}
.woocommerce.columns-6 ul.products li.product, .woocommerce-page.columns-6 ul.products li.product,
.woocommerce .related.products ul.products li.product.column-1_6, .woocommerce-page .related.products ul.products li.product.column-1_6,
.woocommerce .upcells.products ul.products li.product.column-1_6, .woocommerce-page .upcells.products ul.products li.product.column-1_6,
.woocommerce ul.products li.product.column-1_6, .woocommerce-page ul.products li.product.column-1_6 {
    width: 16.6667%;
    margin: 0 !important;
}
.woocommerce ul.products li.product-category mark, .woocommerce-page ul.products li.product-category mark {
	background:none;
}

/* Thumbs mode */
.woocommerce .shop_mode_thumbs ul.products,
.woocommerce-page .shop_mode_thumbs ul.products,
.woocommerce .related.products ul.products,
.woocommerce-page .related.products ul.products{
    margin-right: -1.875em;
}
.woocommerce .shop_mode_thumbs ul.products li.product,
.woocommerce-page .shop_mode_thumbs ul.products li.product,
.woocommerce .related.products ul.products li.product,
.woocommerce-page .related.products ul.products li.product,

.woocommerce .shop_mode_thumbs.list_products ul.products li.product.product-category,
.woocommerce-page .shop_mode_thumbs.list_products ul.products li.product.product-category {
	overflow:hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 4.625em -4px 0 !important;
    padding: 0 1.875em 0 0 !important;
    position: relative;
    display: inline-block;
    vertical-align: top;
    float: none !important;
}
.woocommerce .shop_mode_thumbs ul.products li.product .post_featured,
.woocommerce-page .shop_mode_thumbs ul.products li.product .post_featured,
.woocommerce .related.products ul.products li.product .post_featured,
.woocommerce-page .related.products ul.products li.product .post_featured,

.woocommerce .shop_mode_thumbs.list_products ul.products li.product.product-category .post_featured,
.woocommerce-page .shop_mode_thumbs.list_products ul.products li.product.product-category .post_featured {
	margin:0 auto;
    width: 100%;
}
.woocommerce .shop_mode_thumbs.list_products ul.products li.product.product-category .post_item_wrap,
.woocommerce-page .shop_mode_thumbs.list_products ul.products li.product.product-category .post_item_wrap {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}
.woocommerce .shop_mode_thumbs.list_products ul.products li.product.product-category .post_item_wrap:before,
.woocommerce-page .shop_mode_thumbs.list_products ul.products li.product.product-category .post_item_wrap:before,
.woocommerce .shop_mode_thumbs.list_products ul.products li.product.product-category .post_item_wrap:after,
.woocommerce-page .shop_mode_thumbs.list_products ul.products li.product.product-category .post_item_wrap:after {
    display: none !important;
}
.woocommerce .shop_mode_thumbs ul.products li.product .post_featured,
.woocommerce-page .shop_mode_thumbs ul.products li.product .post_thumb,
.woocommerce .related.products ul.products li.product .post_featured,
.woocommerce-page .related.products ul.products li.product .post_thumb{
    position: relative;
}
.woocommerce-page .shop_mode_thumbs ul.products li.product .post_thumb,
.woocommerce-page .shop_mode_thumbs ul.products li.product .post_thumb,
.woocommerce-page .related.products ul.products li.product .post_thumb,
.woocommerce-page .related.products ul.products li.product .post_thumb,

.woocommerce-page .shop_mode_thumbs.list_products ul.products li.product.product-category .post_thumb,
.woocommerce-page .shop_mode_thumbs.list_products ul.products li.product.product-category .post_thumb {
    padding: 16.7373% !important;
    display: block !important;
}
.woocommerce .shop_mode_thumbs ul.products li.product .post_featured img,
.woocommerce-page .shop_mode_thumbs ul.products li.product .post_featured img,
.woocommerce .shop_mode_thumbs ul.products li.product .post_featured:hover img,
.woocommerce-page .shop_mode_thumbs ul.products li.product .post_featured:hover img,
.woocommerce .related.products ul.products li.product .post_featured img,
.woocommerce-page .related.products ul.products li.product .post_featured img,
.woocommerce .related.products ul.products li.product .post_featured:hover img,
.woocommerce-page .related.products ul.products li.product .post_featured:hover img{
	margin: 0 auto;
	box-shadow:none;
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    position: relative;
}
.woocommerce .related.products ul.products li.product .post_featured img,
.woocommerce-page .related.products ul.products li.product .post_featured img,
.woocommerce .related.products ul.products li.product .post_featured:hover img,
.woocommerce-page .related.products ul.products li.product .post_featured:hover img{
    width: 69.5238%;
}
.shop_mode_thumbs .woocommerce_add_to_cart_button_container,
.related.products .woocommerce_add_to_cart_button_container{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: all 0.4s ease-out;
       -moz-transition: all 0.4s ease-out;
        -ms-transition: all 0.4s ease-out;
         -o-transition: all 0.4s ease-out;
            transition: all 0.4s ease-out;
}
.shop_mode_thumbs .woocommerce_add_to_cart_button_container:hover,
.related.products .woocommerce_add_to_cart_button_container:hover{
    opacity: 1;
    filter: alpha(opacity=100);
}
.shop_mode_thumbs .woocommerce_add_to_cart_button_box,
.related.products .woocommerce_add_to_cart_button_box{
    position: absolute;
    width: 100%;
    text-align: center;
    top: 50%;
    left: 0;
    margin-top: 30%;
    -webkit-transition: all 0.3s ease-out;
       -moz-transition: all 0.3s ease-out;
        -ms-transition: all 0.3s ease-out;
         -o-transition: all 0.3s ease-out;
            transition: all 0.3s ease-out;
    -webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
            transform: translateY(-50%);
}
.shop_mode_thumbs .woocommerce_add_to_cart_button_container:hover .woocommerce_add_to_cart_button_box,
.related.products .woocommerce_add_to_cart_button_container:hover .woocommerce_add_to_cart_button_box{
    margin-top: 0;
}

.article_style_boxed.woocommerce .shop_mode_thumbs ul.products li.product .post_content .star-rating,
.article_style_boxed.woocommerce-page .shop_mode_thumbs ul.products li.product .post_content .star-rating,
.article_style_boxed.woocommerce .related.products ul.products li.product .post_content .star-rating,
.article_style_boxed.woocommerce-page .related.products ul.products li.product .post_content .star-rating{
	margin-left:auto;
	margin-right:auto;
}
.article_style_boxed.woocommerce .upsells  ul.products li.product .post_content,
.article_style_boxed.woocommerce-page .upsells ul.products li.product .post_content,
.article_style_boxed.woocommerce .crosssells  ul.products li.product .post_content,
.article_style_boxed.woocommerce-page .crosssells ul.products li.product .post_content {
	background-color:#f4f7f9;
}
.woocommerce  ul.products li.product h3,
.woocommerce-page ul.products li.product h3 {
	font-size:0.875em;
	font-weight:400;
	line-height: 1.2857em;
    text-transform: none;
	margin-top:1.2143em;
	margin-bottom: 0.5714em;
    text-align: center;
	padding:0 1.4286em;
    font-family: 'Montserrat';
}
.woocommerce_product_author {
    font: 400 0.6875em/1.2727em 'Montserrat';
    text-transform: uppercase;
    text-align: center;
    padding: 0 1.8182em;
    margin-bottom: 0.8182em;
}
.article_style_boxed.woocommerce ul.products li.product h3,
.article_style_boxed.woocommerce-page ul.products li.product h3 {
	margin-top:0;
}
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
    font: 300 1em/1.75em 'Montserrat';
    text-align: center;
    white-space: nowrap;
}
.woocommerce ul.products li.product .price ins {
	text-decoration:none;
	font-weight:inherit;
	font-style:inherit;
}
.woocommerce ul.products li.product .price del {
	display:inline-block;
	margin-right:6px;
}

/* List mode */
.woocommerce .shop_mode_list ul.products li.product, .woocommerce-page .shop_mode_list ul.products li.product {
	overflow:hidden;
	margin:0;
	float:none;
	width:100%;
}
.woocommerce .shop_mode_list ul.products li.product .post_item_wrap, .woocommerce-page .shop_mode_list ul.products li.product .post_item_wrap {
	overflow:hidden;
}
.woocommerce .shop_mode_list ul.products li.product .post_featured, .woocommerce-page .shop_mode_list ul.products li.product .post_featured {
	float: left;
	margin: 0 1.5em 0 0;
	width: 33%;	/*250px;*/
	border-bottom:none;
}
.woocommerce .shop_mode_list ul.products li.product .post_content, .woocommerce-page .shop_mode_list ul.products li.product .post_content {
	overflow:hidden;
}
.article_style_boxed.woocommerce .shop_mode_list ul.products li.product .post_content, .article_style_boxed.woocommerce-page .shop_mode_list ul.products li.product .post_content {
	padding:1.25em 1.875em;
	max-height: 286px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
.woocommerce .shop_mode_list ul.products li.product h3, .woocommerce-page .shop_mode_list ul.products li.product h3 {
	margin-top: 0;
	margin-bottom:0.5em;
	border-bottom:none;
}
.woocommerce .shop_mode_list ul.products li.product .description, .woocommerce-page .shop_mode_list ul.products li.product .description {
	margin-bottom:1.5em;
	line-height:1.3em;
	overflow:hidden;
}
.article_style_boxed.woocommerce .shop_mode_list ul.products li.product .description, .article_style_boxed.woocommerce-page .shop_mode_list ul.products li.product .description {
	max-height:6.6em;
}

.woocommerce .shop_mode_list ul.products li.product-category .description, .woocommerce-page .shop_mode_list ul.products li.product-category .description {
	border-bottom: none;
}
.woocommerce .shop_mode_list ul.products li.product .description p, .woocommerce-page .shop_mode_list ul.products li.product .description p,
.woocommerce .shop_mode_list ul.products li.product .description ul, .woocommerce-page .shop_mode_list ul.products li.product .description ul {
	padding-bottom:0;
	margin-bottom:0;
	line-height:1.3em;
}

.woocommerce .shop_mode_list ul.products li.product .price, .woocommerce-page .shop_mode_list ul.products li.product .price {
	font-size:1.625em;
}

/* Rating stars */
.woocommerce .products .star-rating {
	 margin: 0 auto 0.7em;
}
.woocommerce .product_list_widget .star-rating {
    margin: 0.7em 0;
}
.woocommerce ul.products li.product .star-rating,
.woocommerce ul.product_list_widget .star-rating{
    font-size: 0.625em;
    letter-spacing: 1px;
}
.woocommerce .products .star-rating:before,
.woocommerce .products .star-rating span,
.woocommerce .product_list_widget .star-rating:before,
.woocommerce .product_list_widget .star-rating span{
	 top: 1px;
}
    • Este debate fue modificado hace 4 años, 3 meses por LGrusin.
    • Este debate fue modificado hace 4 años, 3 meses por LGrusin. Razón: Código
    • Este debate fue modificado hace 4 años, 3 meses por LGrusin.

    La página con la que necesito ayuda: [accede para ver el enlace]

Viendo 4 respuestas - de la 1 a la 4 (de un total de 4)
  • Moderador LGrusin

    (@lgrusin)

    hace 4 años, 3 meses

    En el menú Apariencia – Personalizar – WooCommerce – Catálogo de productos, puedes decirle cuántos productos mostrar por fila y cuántas filas mostrar.

    Iniciador del debate mxpr

    (@mxpr)

    hace 4 años, 3 meses

    ¡Sí!, fue la primera acción que realicé, pero no tiene efecto. En esta opción me crea hasta 6 columnas pero en filas le he colocado «5,6,10,15» y al dar «publicar» sigue apareciendo 3 filas solamente (en este momento está configurado a 3 columnas y 10 filas). Por eso me di a la tarea de hacerlo mediante código desde config.php y nada, luego instalar los plugins que menciono arriba y tampoco. Es frustrante 🙁 tendrá solución?

    • Esta respuesta fue modificada hace 4 años, 3 meses por mxpr.
    Moderador LGrusin

    (@lgrusin)

    hace 4 años, 3 meses

    Olvida plugins y olvida códigos. Deja el tema tal como venía, a no ser que el autor te lo indique.

    50 productos se pueden mostrar en 9 filas, 8 de 6 columnas y la última fila queda con dos productos. Si pones 5 columnas dará exacto 10 filas.

    Mira bien en la configuración del tema. Puesto que es comercial es imposible ayudarte porque no tenemos acceso a esos productos. Pregunta al autor la forma de hacerlo.

    • Esta respuesta fue modificada hace 4 años, 3 meses por LGrusin.
    Iniciador del debate mxpr

    (@mxpr)

    hace 4 años, 3 meses

    He añadido las 5 columnas y me ha reducido a 2 filas y la segunda con 4 productos,
    en alguna parte del código esta generado que solo muestre 9 productos… :´(

    Te agradezco mucho el haber dedicado un tiempo para ayudarme, Saludos!

Viendo 4 respuestas - de la 1 a la 4 (de un total de 4)
  • El debate ‘Añadir más filas mediante css para mostrar más productos’ está cerrado a nuevas respuestas.