WooCommerce products display on Mobile

[kofi]

Hi guys,

1. I want the products in the shop to be displayed in a single line on mobile so that the display of the thumbnail will be a bit bigger than it currently is.

Currently i have two products per row so the thumbnails are a bit small. I’d like 1 image per row so products will be in a single line and be visible when scrolled.

2. The sale or out of stock/low on stock information never displays on mobile. How can I fix this?

3. I want to dock the logo section on desktop and mobile so that when you scroll, the logo and the menu icon stays. Plus I want the menu icons to be much bigger than currently is on mobile.

4. Is there a way to rename the shop meta description so it doesn’t default to ‘Products Archive’?

[David Martin – Support]

1)

@media only screen and (max-width: 479px) {
	body .woocommerce-shop-page ul.products li.product, 
	body .product_list_widget > div > ul.products li.product {
	    width: 100%!important;
	}
}

2)

@media only screen and (max-width: 767px) {
	.woocommerce span.onsale, 
	.woocommerce .wc-new-badge, 
	.woocommerce .out-of-stock-badge {
	    display: block;
	}
}

3) That is not currently possible as such.

4) Sure, please read the Yoast instruction: https://kb.yoast.com/kb/how-do-i-change-the-woocommerce-shop-page-title/

[kofi]

Thanks very much David.

Could you please tell me where or which files I paste these codes in on wordpress?

Thank you.
Kofi

[David Martin – Support]

Glad to help.

Sure, theme options => custom CSS

[kofi]

Hi David.

I don’t seem to have the Custom CSS. Would it be becuase I have a Multisite WordPress?

I’ve attached some screenshots. Have I put the code into the right place? I’m currently not seeing any changes on mobile.

Attachments:

You must be logged in to view attached files.

[kofi]

I’ve fixed it now. I put the code outside `/*
Put custome code here
*/
@media only screen and (max-width: 479px) {
body .woocommerce-shop-page ul.products li.product,
body .product_list_widget > div > ul.products li.product {
width: 100%!important;
}
}

@media only screen and (max-width: 767px) {
.woocommerce span.onsale,
.woocommerce .wc-new-badge,
.woocommerce .out-of-stock-badge {
display: block;
}
}`

One last thing. The product image zoom seems to be broken in my latest theme and woocommerce update. If you take this link for example

http://kklabs.co.uk/shop/happy-pandas-square-silk-scarf-pink/

and hover your mouse on the first image, it zooms in and you can move your mouse around to see the other sections of the image, however if you click the next images, they seem to be all broken and the zoom doesn’t work and the image is not displayed properly. how do i fix it? I want the zoom to work by moving the mouse across the image like in the first image.

Thanks

[David Martin – Support]

It’s within the general tab, Theme Options => General Options => Custom CSS

[kofi]

Perfect, Thank you.

Now that I’ve done this,

@media only screen and (max-width: 479px) {
body .woocommerce-shop-page ul.products li.product,
body .product_list_widget > div > ul.products li.product {
width: 100%!important;
}
}

How can i get the text underneath the text to be much bigger and the title and the price to be bold?

Thank you. Please see attached image

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

Try this code below.

.woocommerce ul.products li.product h3, .woocommerce ul.products li.product .price{
   font-weight: bold!important;
}

.woocommerce ul.products li.product a, .woocommerce ul.products li.product a span{
   font-size: 14px!important;
}

Hope it helps.

-Rui

[kofi]

Thank you Rui. Works perfectly!

One last thing. The product image zoom seems to be broken in my latest theme and woocommerce update. If you take this link for example

http://kklabs.co.uk/shop/happy-pandas-square-silk-scarf-pink/

and hover your mouse on the first image, it zooms in and you can move your mouse around to see the other sections of the image, however if you click the next images, they seem to be all broken and the zoom doesn’t work and the image is not displayed properly. how do i fix it? I want the zoom to work by moving the mouse across the image like in the first image.

Thanks

[Rui Guerreiro – SUPPORT]

Just to confirm, do you have the latest theme version?
-Rui

[kofi]

Correct. I updated this weekend after starting this thread. Theme and woocomerce at their latest version.

[Rui Guerreiro – SUPPORT]

Thanks. Will have to forward it to the development team.

-Rui

[kofi]

Thanks Rui. Will I be hearing from Support?

[David Martin – Support]

Please add a WP login for us to take a closer look.

Thanks.