Storefront number of columns on shop pages

  • Resolved kristinubute

    (@kristinubute)


    6 years, 9 months ago

    HI

    I have disabled my sidebar for entire site as client requires a Catalogue mode only and no sidebar.

    Now I can only see 3 columns across the screen and I need to show 4 or 5 columns of products .

    As default for Storefront seems to be 3, I have tried several bits of coding to make it show 4 or 5 columns or products but no luck .. still showing 3

    I usually use this in functions but not working.

    /*adjustment for 4 shop columns*/
    add_filter( ‘storefront_loop_columns’, function() { return 4; } ); //change shop colunns//

    I have also got this coding in CSS

    .site-main ul.products li.product {
    width: 17% !important;
    float: left;
    margin-right: 5.8823529412%;
    margin-left:0;
    }

    It reduces the columns for the products no issues, but still showing only 3 columns.
    This is frustrating trying to find the correct coding.

    Why does Storefront have default of 3 only ? There would be many other shops who require more than 3 so I would have assumed there were options for this .

    Also under the STorefront/Themes/Appearance/Woocommerce I already have the setting in there for 4 columns also.

    Any help would be appreciated
    Very frustrating !

    Thanks
    Kristin

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter kristinubute

    (@kristinubute)

    Also after removing the sidebar on 15.6″ LCD I can’t see to get the width correct where the products being displayed .. eg on 23″ LCD this coding works fine

    /* Product Category middle section where it displays all Products – have put a dotted border and white background */

    ul.products {
    padding-top: 20px;
    margin-top: 20px;
    padding-left: 25px;
    background: #ffffff;
    width: 1100px;
    border-style: dotted;
    border-width: .02px;
    border-color: #5b585b;
    margin-left: -80px !important;
    }

    BUT on 15″ LCD on laptop obviously the width: 1100px won’t work there.

    What is best coding to use here to help it showing centred across the screen (centred left and right) for these different screens.

    Will I use an @media for this ?

    Please advise what coding to use that would work properly.
    Any advice greatly appreciated.

    Thanks
    Kristin

    Job a11n

    (@jobthomas)

    Automattic Happiness Engineer

    Hi @kristinubute – there’s no need for custom code (and this is also WooCommerce and not Storefront related). You can change the amount of products per row at Customize > WooCommerce > Product Catalog:


    Link to image: https://cld.wthms.co/zI0AsQ

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Storefront number of columns on shop pages’ is closed to new replies.