WooCommerce shopping cart issue on mobile

ThemePalace: WordPress Themes & Plugins Forums University Hub WooCommerce shopping cart issue on mobile

Post to topic

This topic contains 11 replies, has 2 voices, and was last updated by  wensolutions 2 months, 2 weeks ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #28186

    rainbow_tj007
    Participant

    Please see the image below:
    mobile view issue

    It is not showing the full grid of the shopping card properly.
    I am using University Hub Pro.

    Regards,
    Rainbow_tj007

    #28187

    rainbow_tj007
    Participant

    I tested with some basic free themes. They are all working with no issues.

    #28200

    rainbow_tj007
    Participant

    Shopping Page on mobile looks breaking as well.

    Mobile Shopping Page

    Regards,
    Rainbow_tj007

    • This reply was modified 2 months, 2 weeks ago by  rainbow_tj007.
    #28205

    wensolutions
    Support Team

    Hello @rainbow_tj007,

    Please try adding the Custom CSS below in your Admin Dashboard > Appearance > Customize > Additional CSS to resolve the issues regarding the shop page product listing layout :

    @media only screen and (max-width: 767px) {
    
    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
        width: 100%;
        
    }
    
    }

    Hope this Helps,

    Best Regards !!

    #28289

    rainbow_tj007
    Participant

    Hi Wensolutions,

    The additional css has fixed the shopping page. However, the basket page still remains the same. If you look at the first image I have uploaded, it is not showing the first couple of rows. Can you please have a look as well?

    Many thanks.

    Regards,
    Rainbow_tj007

    #28323

    wensolutions
    Support Team

    Hello @rainbow_tj007,

    Please try adding the following custom CSS for the issue regarding the cut-off of the basket :

    @media (max-width: 768px){
    	.woocommerce table.shop_table_responsive tr td:before, .woocommerce-page table.shop_table_responsive tr td:before {
    	    content: none;
    	}
    	.woocommerce table.cart .product-thumbnail,.woocommerce-page #content table.cart .product-thumbnail, .woocommerce-page table.cart .product-thumbnail,{
    		display: block;
    		text-align: center !important;
    	}
    }

    If this does not resolve your issues please let us know so that we could help you with this further.

    Hope this helps,

    Best Regards !!

    #28330

    rainbow_tj007
    Participant

    Hi Wensolutions,

    This additional css did not fix the cut-off issue.

    Regards,
    Rainbow_tj007

    #28331

    wensolutions
    Support Team

    Hello,

    Please replace the CSS provided in the previous thread with the new one below :

    @media (max-width: 768px){
    
    .woocommerce table.shop_table_responsive tr td:before, .woocommerce-page table.shop_table_responsive tr td:before{
    	    content: none;
    	}
    
    .woocommerce table.cart .product-thumbnail,.woocommerce-page #content table.cart .product-thumbnail, .woocommerce-page table.cart .product-thumbnail{
    		display: block!important;
    		text-align: center !important;
    	}
        
    .woocommerce table.shop_table_responsive tbody tr:first-child td:first-child, .woocommerce-page table.shop_table_responsive tbody tr:first-child td:first-child {
    
    border-top: 1px solid rgba(0,0,0,.1)!important;
    
    }
    
    }

    This should help display the missing table cell for the basket page.

    Hope this Helps,

    Best Regards !!

    #28342

    rainbow_tj007
    Participant

    This works now.

    The image of the product in mobile view of the basket is too small. Not high priority but it will be great if it can be improved.

    Regards,
    Rainbow_tj007

    #28351

    wensolutions
    Support Team

    Hello @rainbow_tj007,

    while we have inspected the website, it seems like you have not used the CSS code in the site currently.

    Please check and verify the code has been properly implemented and working so that we could inspect further to the site and help you with the image size request.

    Best Regards !!

    #28402

    rainbow_tj007
    Participant

    Hi Wensolutions,

    It is totally fine. The website I linked is only for showing the error images not the site itself. The css you provided is all working well on my other websites.

    Thanks for the help.

    Regards,
    Rainbow_tj007

    #28409

    wensolutions
    Support Team

    Hello @rainbow_tj007,

    Glad to know the issue has been resolved for your sites.

    Feel free to post your queries if you have any further issues in the future.

    Have a great weekend ahead !!

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.