Fix Empty Cart with WooCommerce Redirect to Checkout Varnish 4

Varnish speeds up tons of WooCommerce shops all over the web with its reverse proxy caching acceleration. Several hosting companies like. WPEngine, Cloudways and Flywheel use Varnish to deliver uber fast page load times for their users. One of the potential pitfalls with Varnish can be making it work with e-commerce shops like WooCommerce or Easy Digital Downloads. Typically this involves shopping carts being empty or checkout not working.

You have probably already set Varnish to pass the WooCommerce cart and checkout pages along with the woocommerce-cookies but the cart is still empty if you have set the product add to button action to redirect to the cart after a successful addition. By looking at varnishlog I discovered the problem was a 302 response which is a temporary redirect, ideally a response of 303 should be used looking at the response codes on Wikipedia, which is a temporary redirect used after POST requests.

Fix Empty Cart with WooCommerce Redirect to Checkout Varnish 4

Under WooCommerce > Settings

Product tab > Display tab

Check if Redirect to the cart page after successful addition is enabled

In your vcl_backend_response section we need to add an exception to not remove cookies for the 302 response status that Varnish gets from the backend (nginx or Apache).

sub vcl_backend_response {
    if (!(bereq.url ~ "wp-(login|admin)|cart|my-account|wc-api|resetpass") &&
        !bereq.http.cookie ~ "wordpress_logged_in|woocommerce_items_in_cart|resetpass" &&
        !beresp.status == 302 ) {
        unset beresp.http.set-cookie;
        set beresp.ttl = 1w;
        set beresp.grace = 1d;
    }
}

Ctrl+X, Y and Enter to Save and Exit.

Test the Varnish syntax is correct

varnishd -C -f /etc/varnish/default.vcl

If you do not get any errors then reload Varnish

sudo service varnish reload

Open Chrome in Incognito mode or a private window in Firefox and test the add to cart to redirect to checkout functionality with WooCommerce.