WooCommerce 2.1 Compatibility

[sstokes7]

Hi Ed,

I am having problems with the mobile version of my site. When selecting an option on the item page (such as t shirt size) the alternatives (small, medium etc) do not show. The choose option link does not appear to be working meaning none of my customers can add an item to cart using the mobile version. For your info this was tested on an iPhone using Safari. I have the latest 1.62 version installed with the latest woocommerce update.

Also on the ipad the products are not displaying correctly on the main products page.

Can you fix or advise please?

Cheers,

[Swift Ideas – Ed]

Can you provide a link to your site please @sstokes7 – I’ll check it out for you.

– Ed

[sstokes7]

http://www.reality-dreams.co.uk

[Swift Ideas – Ed]

Hi @sstokes7,

Can you try adding the following custom css, and then checking it?

.modal {
display: none;
}

Hope that helps!

– Ed

[mr_pa]

Hi Ed,

i’m testing the latest theme update (1.62) and i found some woocommerce deprecated functions:

Woocommerce->nonce_field
Woocommerce->attribute_label

they come up in the single page product reviews tab and attributes tab.
Any suggestion in order to fix them?

Tomorrow i’m gonna further for the debugging/testing process and if will find others bugs i will let you know.

Regards.

[mr_pa]

I’ve found right know another deprecated function in “My Account” Page:

Woocommerce->show_messages

[sstokes7]

Hi Ed,

Perfect that has sorted the mobile version of the ‘choose option’ box thank you. But on the iPad the products are still not displaying properly. They appear just left and right leaving a blank gap in the middle. There are usually/should be 4 products on a line. Please see image attached.

Cheers,

[Swift Ideas – Ed]

Seems WooCommerce also added some responsive css in 2.1, which messes with the theme code. This should override it:

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

Add that custom css.

Hope that helps.

– Ed

[Swift Ideas – Ed]

Hi @mr_pa,

Thanks for that, fixed all of those. If you need the next update sooner, drop me an email – http://themeforest.net/user/SwiftIdeas

– Ed

[sstokes7]

Excellent all sorted. Thank you very much for your help Ed.

[Swift Ideas – Ed]

@sstokes7 – the final code for this is:

@media only screen and (min-width: 768px) and (max-width: 959px) {	
	.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
		clear: none!important;
	}
	.woocommerce ul.products li.product.first, .woocommerce-page ul.products li.product.first {
		clear: both!important;
	}
	.woocommerce ul.products li.product:nth-child(2n), .woocommerce-page ul.products li.product:nth-child(2n) {
		float: left!important;
	}
}

Please update the code I sent you 🙂

– Ed

[sstokes7]

Updated. Thank you again 🙂

[mr_pa]

Hi ED,
i sent you a message via the themeforest profile form.
I carry on with the debugging tests.

Thanks.

[mr_pa]

You are right ED there is a brand new file in WC for responsive device layouts.

assets/css/woocommerce-smallscreen.css
only screen and (max-width: 768px)

[mr_pa]

Hi ED,

just FYI the woocommerce guys recommend to update the variable.php file. Some people in fact are referring some issues during the “add to cart” variable products process.