WooCommerce Shop Column Not Working

  • Resolved jdaryl15

    (@jdaryl15)


    3 years, 7 months ago

    Hi,

    I hope someone can help me. The product catalog of my shop is not displaying properly. I already check the settings in the customization > woocomerce > product catalog and the current settings are:
    Shop Columns: 3
    Products Per Page: 9

    There is no problem if I change the number of Products Per Page. The only problems is even I change Shop Columns into any number, the shop will still display all the poducts in 1 row.

    I’m Using Astra Theme – Version 3.6.4
    WooCommerce Version – 5.5.1

    To better understand the issue, heres a video:
    Video Link – OneDrive

    • This topic was modified 3 years, 7 months ago by jdaryl15. Reason: added a video link
    • This topic was modified 3 years, 7 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Everything else WordPress topic

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Stef

    (@serafinnyc)

    The issue appears to be coming from your theme’s main CSS inside Elementor. I’d check there.

    You can see here once I remove the main CSS the page renders properly
    https://www.loom.com/i/806d86d130724f2caacfe638041e1fbe

    Your CSS is minified, but what I can see is when I comment out this

    
.theme-astra .woocommerce ul.products, .woocommerce-page ul.products {
    /* display: -webkit-box; */
    display: -ms-flexbox;
    /* display: flex; */
    /* -webkit-column-gap: 0; */
    -moz-column-gap: 0;
    /* column-gap: 0; */
}

    `
    It renders perfectly. So check your CSS from Elementor.

    Thread Starter jdaryl15

    (@jdaryl15)

    Thanks for the reply @serafinnyc. Bear with me but I don’t know how to exactly do that.

    can you walk me through on where should I paste that code?

    • This reply was modified 3 years, 7 months ago by jdaryl15.
    • This reply was modified 3 years, 7 months ago by jdaryl15.
    Stef

    (@serafinnyc)

    Certainly. So you need to add some css or find where or why your theme is adding that snippet above. Did someone add it, does it come with the theme? Etc.

    If you can’t find it, most likely you could add this snippet to fix it intermittently until you can.

     
 .theme-astra .woocommerce ul.products, .woocommerce-page ul.products {
  display:inline-grid !important; 
    
}

    Take this snippet and go to Customize > Additional CSS and paste it.

    Here’s a video of how to do that.
    https://www.loom.com/share/79022794ffb84230a9112ae1af146b7d

    Thread Starter jdaryl15

    (@jdaryl15)

    Awesome! @serafinnyc. It worked! Thanks man your a life saver!

    Stef

    (@serafinnyc)

    Awesome. Glad I could be of assistance. Try to find the original code and see if you or someone else added it.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘WooCommerce Shop Column Not Working’ is closed to new replies.