Woocommerce shop page grid not working properly

  • HI,

    Can anyone help this is driving me nuts! The shop page on my website, see here- https://latestgadgetreviews.co.uk/lgr-recommendations/ is not aligning properly. I get 2 rows of 4 items and then a row with one item and then another 2 rows with 4 items and then another of 1!

    I am running the latest version of wordpress and the woodstock child theme is active. I have tried adding some custom code to the theme but that appears to to have had any effect.

    Any help would be much appreciated as I have been on this for a week now with no success.

    Martin

Viewing 12 replies - 1 through 12 (of 12 total)

  • Hi there, Try this CSS code –

    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {width: 16%!important;}

    btw you website has couple of errors on JavaScript console, contact with theme author to resolve these issues.

    Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys
util.js:12 Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required
js?sensor=false&ver=1.0:2 Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error_.ab @ js?sensor=false&ver=1.0:2(anonymous function) @ common.js:3(anonymous function) @ common.js:12c @ common.js:3(anonymous function) @ AuthenticationService.Authenticate?1shttp%3A%2F%2Flatestgadgetreviews.co.uk%2Flgr-recommendations%2…:1(anonymous function) @ cloudflare.min.js:4(anonymous function) @ cloudflare.min.js:4(anonymous function) @ rocket.js:4i @ cloudflare.min.js:3i.promiseSend @ cloudflare.min.js:3f.promiseSend.c @ cloudflare.min.js:3i.promiseSend @ cloudflare.min.js:3(anonymous function) @ cloudflare.min.js:3n @ cloudflare.min.js:3
marker.js:7 Uncaught TypeError: Cannot read property 'fromLatLngToPoint' of undefined
    Thread Starter Molesque71

    (@molesque71)

    Hi,

    Thanks for your response. Where should I put this?

    Thanks

    Martin

    Install this plugin – https://www.ads-software.com/plugins/simple-custom-css/ and then put that CSS code on “Custom CSS” field

    Thread Starter Molesque71

    (@molesque71)

    I have a custom code editor in my theme should I try it there first?

    Thread Starter Molesque71

    (@molesque71)

    I have just checked my custom code and I have already put this into it

    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product{
    width: 19.0% !important;
    float: left !important;
    clear: none !important;
    margin: 0 3.8% 2.992em 0 !important;
    }

    .woocommerce ul.products li.product:nth-child(2n), .woocommerce-page ul.products li.product:nth-child(2n){
    float: left !important;
    clear: none !important;
    }

    Change
    width: 19.0% !important;
    to
    width: 16.0% !important;

    Thread Starter Molesque71

    (@molesque71)

    Hi,

    thanks for your help. but now I get a row of 5 then one of 1 repeated. It looks worse!

    Tinker with width: 19.0% !important; your layout will change based on THIS width.

    Thread Starter Molesque71

    (@molesque71)

    But why am I getting 1 product only on some lines? It really is a head scratcher!

    It’s coded that way, Change that width to 10%, 20%, 15% whatever your comfortable with.

    @ashiquzzaman mil millones de gracias me has salvado la vida después de muchos días de ir dando tumbos por la red.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Woocommerce shop page grid not working properly’ is closed to new replies.

Tags