Shop page products grid alignment

[skullo27]

This reply has been marked as private.

[David Martin – Support]

Great, please do so now. I’ll be on for a few hours.

Thanks.

[skullo27]

OK try the shop pages now…

[skullo27]

This reply has been marked as private.

[David Martin – Support]

This reply has been marked as private.

[skullo27]

This reply has been marked as private.

[David Martin – Support]

Last request here! – You are using the WooCommerce Advanced Ajax Layered Navigation plugin for this correct? Can you attach the zip file for the plugin?

[skullo27]

Hi David, no I did try that plugin, but I could not get it to work and you could not replicate my issue (page refresh problem if you remember) so I gave up on it and when back to using the Woocommerce Product Filter plugin from Code Canyon https://codecanyon.net/item/woocommerce-product-filter/8514038.

Could it be this that is causing the issue?

thanks.

[David Martin – Support]

Hi,

So what I need is the exact plugin/widget setup that is causing you the issue. I am setting up my dev site to be like your reported shop page with the intention to replicate the bug and fix.

Thanks.

[skullo27]

Hi David, the problem happens even with all plugins disabled… So how can it be the plugins causing the issue?

[David Martin – Support]

So when testing locally, I get this for the last product:

Is this what you also experience?

[skullo27]

Yes that looks similar.

thanks

[David Martin – Support]

Hi,

If you disable your Performance Options first, then open functions.js and locate this:

		fullWidthShop: function() {
			var shopItems = jQuery('.full-width-shop').find('.products'),
				itemWidth = shopItems.find('li.product').first().data('width'),
				shopSidebar = shopItems.find('.sidebar');

			if (shopSidebar.length > 0) {

				// Full Width Shop Sidebar
				SWIFT.woocommerce.fullWidthShopSetSidebarHeight();
				$window.smartresize( function() {
					SWIFT.woocommerce.fullWidthShopSetSidebarHeight();
				});
				
				shopItems.isotope({
					itemSelector: '.product',
					layoutMode: 'masonry',
					masonry: {
						columnWidth: '.'+itemWidth
					},
					isOriginLeft: !isRTL
				});

				SWIFT.woocommerce.animateItems(shopItems);

				shopSidebar.stop().animate({
					'opacity': 1
				}, 500);
				shopItems.isotope( 'stamp', shopSidebar );
				shopItems.isotope( 'layout' );

				setTimeout(function() {
					shopItems.isotope( 'layout' );
				}, 500);

			}

Find this line: layoutMode: 'masonry', and change to layoutMode: 'fitRows',

[skullo27]

Hi David, thanks for this, where do I find the functions.js, is it a theme file? If so is this a bug that will be fixed in a future update?

thanks
Sam

[David Martin – Support]

Hi Sam,

Will need to confirm if this works for you, it’s a theme file, located in atelier/js/functions.js