Removing Items From Cart on Mobile Devices

  • Resolved jesseslam

    (@jesseslam)


    8 years, 2 months ago

    Hi,

    I have an issue I’ve been trying to fix for hours now. On a mobile device this site https://www.nicholasjohninteriors.co.uk/ has issues with removing items from the cart. We are using WP Super Cache and Cloudflare and have tested it with these disabled but the same issue happens. It works fine on a desktop.

    To re-produce the issue do the following:

    1. On a mobile go to https://www.nicholasjohninteriors.co.uk/ then on the hoe page add any product to the basket.
    2. Click on the basket icon and the product is there in the basket. Remove the product by clicking the X and the product is removed the basket is showing as empty.
    3. Click on any other page of the site and then click on the basket again the previously removed product is back.
    4. if you then refresh the cart page it shows as empty so it’s as if the cart isn’t refreshing to confirm the changes.

    I’ve tried to find some code to force the cart to refresh after a product is removed but the code I found didn’t work.

    This issue still happens when using the Storefront theme so it’s not a theme issue. I’ve disabled all plugins apart from Woocommerce and it still happens so it’s not a plugin issue. I host a number of Woocommerce powered websites on the same server and test these and it doesn’t happen so it’s not a server issue. I am stumped to say the least. If anyone could help or point me in the right direction that would be great?

    Thanks,

    James Isles

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hi James,
    I followed your instructions on an Android/Chrome, and I can’t reproduce the problem. Your site worked just fine. The basket was empty after I removed the item. I also tested one of my own sites that is running Woocommerce on Storefront with WP Super Cache (not Cloudflare), and it also worked.

    Maybe it’s mobile device/browser specific?

    Thread Starter jesseslam

    (@jesseslam)

    Hi,

    Thanks for trying this out at your end. I have only test this on an iPhone and iPad using Safari and Chrome browsers so yes maybe then it is device specific, which is very annoying. I have also discovered the same issue with another site I host https://www.innovations247.co.uk/ which uses a different theme, WP Supercache but not Cloudflare. Does this sites work for you?

    I had the same issue on a desktop and fixed it by telling WP Supercache not to cache the /cart and /checkout pages and this fixed the issue. It seems like it is still caching these pages on mobile devices and ignoring the command not to cache them.

    Thanks,

    James

    The Innovations site works for me on Android/Chrome too.

    If it happens with WP Super Cache and Cloudflare disabled, it must be due to something else. I wonder if it’s not a browser caching issue? Do you leverage browser caching in your .htaccess file, or in the settings for your server? You might try not caching javascript or PHP and see if that makes a difference.

    Thread Starter jesseslam

    (@jesseslam)

    I do have browser caching in the .htaccess files as below could that be causing it?

    # EXPIRES CACHING #
    <IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg “access 1 year”
    ExpiresByType image/jpeg “access 1 year”
    ExpiresByType image/gif “access 1 year”
    ExpiresByType image/png “access 1 year”
    ExpiresByType text/css “access 1 month”
    ExpiresByType application/pdf “access 1 month”
    ExpiresByType text/x-javascript “access 1 month”
    ExpiresByType application/x-shockwave-flash “access 1 month”
    ExpiresByType image/x-icon “access 1 year”
    ExpiresDefault “access 1 week”
    </IfModule>
    # EXPIRES CACHING #

    I’m not sure, but I know I had issues when I was caching PHP and javascript, though mine were during development, and not production. It might explain why your issue is platform/browser-dependent. Your line:

    
ExpiresDefault "access 1 week"

    means that PHP pages will be cached, and you have javascript set for one month. Maybe some platforms/browsers are caching the cart data instead of updating it as it changes? You could try removing the default and not caching javascript. I use Cache-Control instead of mod_expires. Here’s what I have in case you want to give it a shot:

    
<IfModule mod_headers.c>
  # 1 YEAR
  <FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|jpg|jpeg|png|gif|swf)$">
    Header set Cache-Control "max-age=29030400, public"
  </FilesMatch>
</IfModule>
    Thread Starter jesseslam

    (@jesseslam)

    Hi,

    Expires caching in .htaccess was indeed causing the issue using your code fixed it and so did removing the javascript and default caching lines, thanks a lot for pointing me in the right direction been pulling my hair out for ages on this it now works as it should.

    Many thanks,

    James

    That’s great, James! I’m glad you got it working.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Removing Items From Cart on Mobile Devices’ is closed to new replies.