Product Archive Layout column issues

  • Resolved oscash

    (@oscash)


    2 years, 1 month ago

    Updated Elementor + additional related plugins on the staging site and somethings aren’t functioning the same way anymore.

    1) It’s 3 columns on desktop and tablet view, and 2 for mobile. When it collapses to 2 columns, every third row is squished together. Product Archive Layout Widget > Content > Archive Product > Columns is set to 2 for mobile but I am assuming it’s getting overridden by WordPress > Appearance > Customize > Woocommerce > Product Catalogue > Products per row > 3? This was not an issue prior however, so I’m not sure what is causing this. https://imgur.com/a/i71mQfl

    2) On desktop, how can I shrink the width of the three columns? This is the bit of code that worked previously, but it doesn’t hit the target anymore:

    @media (min-width: 1025px) { /*smaller column width*/
.woocommerce ul.products.columns-3 li.product, .woocommerce-page ul.products.columns-3 li.product {
    width: 27%; }

/*space around columns*/
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    margin: 0 3% 6% 3%;
}
}

    Thanks in advance!

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Contributor Tarek Aziz

    (@tarekht)

    Hello @oscash

    Thank you very much for getting in touch with us ??

    We have read your message as well as reviewed the screenshot you shared with us.

    Sorry to hear about the inconvenience you had. It appears that in the most recent version of WooCommerce, they have brought a slight change in the CSS. To put it simply, WooCommerce has nested a few classes with their previous ones.

    But don’t worry; We’ll fix this in the next update of our plugin.

    For now, you can use the following CSS in your theme’s style.css file or in the WordPress customizer.

    @media (max-width: 767px) {
   .woocommerce-page .woolentorducts-columns-mobile-2 ul.products li.product {
	width: calc(50% - 15px) !important;
	margin-right: 15px !important;
	float: left;
   }
}

    Hope this helps ??

    Best of luck,
    Tarek

    Thread Starter oscash

    (@oscash)

    Oh my gosh Tarek! I’m very sorry – I didn’t get a notification saying someone had replied. Thank you so much for your time, it’s greatly appreciated!

    Plugin Contributor Tarek Aziz

    (@tarekht)

    No problem at all @oscash ??

    I am glad that I was able to help you.

    Sincere regards,
    Tarek

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Product Archive Layout column issues’ is closed to new replies.