New Landing › How can we help? › Themeforest Theme Support › Neighborhood › WooCommerce products display on Mobile

Viewing 15 posts - 1 through 15 (of 39 total)
1 2 3
  • Back to forum
    Posted in: Neighborhood
  • March 11, 2017 at 12:44 am #316917
    kofi
    Member
    Post count: 71

    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’?

    March 13, 2017 at 4:13 pm #317026
    David Martin – Support
    Moderator
    Post count: 20834

    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/

    March 13, 2017 at 4:27 pm #317029
    kofi
    Member
    Post count: 71

    Thanks very much David.

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

    Thank you.
    Kofi

    March 13, 2017 at 4:29 pm #317031
    David Martin – Support
    Moderator
    Post count: 20834

    Glad to help.

    Sure, theme options => custom CSS

    March 13, 2017 at 4:59 pm #317038
    kofi
    Member
    Post count: 71

    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.
    March 13, 2017 at 5:12 pm #317044
    kofi
    Member
    Post count: 71

    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

    March 13, 2017 at 5:13 pm #317045
    David Martin – Support
    Moderator
    Post count: 20834

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

    March 13, 2017 at 5:22 pm #317048
    kofi
    Member
    Post count: 71

    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

    March 13, 2017 at 6:11 pm #317075
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    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

    March 13, 2017 at 6:38 pm #317081
    kofi
    Member
    Post count: 71

    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

    March 13, 2017 at 7:00 pm #317089
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

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

    March 13, 2017 at 7:05 pm #317092
    kofi
    Member
    Post count: 71

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

    March 13, 2017 at 8:02 pm #317115
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

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

    -Rui

    March 14, 2017 at 11:36 am #317152
    kofi
    Member
    Post count: 71

    Thanks Rui. Will I be hearing from Support?

    March 14, 2017 at 12:17 pm #317154
    David Martin – Support
    Moderator
    Post count: 20834

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

    Thanks.

  • Back to forum
    Posted in: Neighborhood
Viewing 15 posts - 1 through 15 (of 39 total)
1 2 3

You must be logged in to reply to this topic.