WooCommerce Checkout Sendgrid Issue

We had a WooCommerce Checkout Sendgrid Issue on one of our Trellis servers. Payments did work, but no feedback was sent to client or very late. No confirmation of successful sale was given. This is very inconvenient obviously so we checked out what was the issue and solution. We soon found out WooCommerce and Sendgrid were not plating nice. Here below the whole discovery process.

Upstream Timed Out

The error we had was:

2018/01/25 08:27:10 [error] 16241#16241: *42582 upstream timed out (110: Connection timed out) while reading response header from upstream, client:, server: domain.com, request: "POST /?wc-ajax=checkout HTTP/2.0", upstream: "fastcgi://unix:/var/run/php-fpm-wordpress.sock", host: "domain.com", referrer: "https://domain.com/checkout/"

Port 110 is the post office protocol port and the ip address an address of a Malta Cable company. Not much to go on early other than that there seems to be a time-out issue and that Nginx could perhaps use some more Ks for its buffer.

Nginx Buffering

So we decided to up the Nginx buffer using:

nginx_fastcgi_buffers: 16 16k
 nginx_fastcgi_buffer_size: 32k

inside group/vars/production/main.yml. This I added and re-provisioned our Trellis server.


The other thing we wondered about if Sendgrid was having issues sending out details after a successful Stripe payment had been made. We were after all using it for outgoing emails using:

Documentation: https://roots.io/trellis/docs/mail/
mail_smtp_server: smtp.sendgrid.net:587
mail_admin: admin@publiqly.com
mail_hostname: publiqly.com
mail_user: publiqly
mail_password: "{{ vault_mail_password }}" # Define this variable in group_vars/all/vault.yml

When we checked Sendgrid we hardly saw any traffic. Something to worry about.

WP Mail Logging & sSMTP Logging

So we decided to install WP Mail Logging to facilitate the checking of all outgoing email. We also activated sSMTP mail logging. This you can do by setting


in ssmtp.conf and then check syslog for any errors.

Mail Logs

And then I thought about the standard mail logs. And when I checked at /var/log/mail.err I found:

Jan 25 08:29:28 domain sSMTP[16416]: Cannot open smtp.sendgrid.net:587
Jan 25 08:33:42 domain sSMTP[16424]: Unable to connect to "smtp.sendgrid.net" port 587.
Jan 25 08:33:42 domain sSMTP[16424]: Cannot open smtp.sendgrid.net:587
Jan 25 09:07:42 domain sSMTP[16603]: Unable to connect to "smtp.sendgrid.net" port 587.
Jan 25 09:07:42 domain sSMTP[16603]: Cannot open smtp.sendgrid.net:587

Well there you go. It seems the connection cannot be made properly. I contacted Sendgrid one this.

Port 587

Found out port 587 like most ports aren’t open on Trellis. This by doing a:

# netstat -ntlp | grep LISTEN
tcp        0      0   *              LISTEN      1500/nginx -g daemo
tcp        0      0*              LISTEN      1343/memcached  
tcp        0      0    *              LISTEN      1500/nginx -g daemo
tcp        0      0    *              LISTEN      23307/sshd      
tcp6      0      0 :::443                    :::*                     LISTEN      1500/nginx -g daemo
tcp6      0      0 :::3306                  :::*                     LISTEN      1618/mysqld     
tcp6      0      0 :::80                     :::*                     LISTEN      1500/nginx -g daemo

So based on a Roots forum search I added:

- type: dport_accept
dport: [587]
protocol: tcp
- type: dport_accept
dport: [587]
protocol: udp

to group_vars/all/security.yaml. Then I re-provisioned those playbooks:

ansible-playbook server.yml --tags "ferm,ssmtp, mail" -e env=production

Ports not the Issue

Then based on the Roots Discourse thread I had running I realized we were talking outgoing port. It is not incoming traffic that is the issue. And that the issue was more with Sendgrid or the way Sendgrid dealt with the incoming requests. SSH and https/http ports are listening for incoming requests. I was recommended to do a telnet test do debug and to use Sendgrid api keys to make the connection work better. So I removed the new port rules. Then I implemented the recommendations.

Telnet check

To do a telnet test you have to get a key and convert it to the appropriate version to do a test with it using telnet securely. So I went to Sendgrid, generated an api key with full access minus billing. Then I converted it to base64 with openssl from the command line using:

echo '<<YOUR_API_KEY>>' | openssl base64

I stored the api key and converted key in KeepassX for later use. When I just ran

telnet smtp.sendgrid.net 587

from the Trellis server in question I got:

telnet smtp.sendgrid.net 587
telnet: Unable to connect to remote host: Connection timed out

Well, and that was the error we had in the logs basically.

DO Ipv6 mail issues?

Then I read Digital Ocean’s port setup. So it seemed it was an ipv6 Digital Ocean port issue. So based on this DO question I edited gai.conf:

nano /etc/gai.conf

and made the appropriate lines look like this:

precedence ::ffff:0:0/96 100

where 10 becomes 100 and the whole line is uncommented. This to run via ipv4. Well, it did not help.

Sendgrid API Plugin

So I installed the Sendgrid API plugin. Adding details in Safari got the Sendgrid settings page reloading like crazy . In Chrome things did work fine as well as a test email using the plugins settings page for this.

Final Test with Sendgrid API

So final test that needed to be done was a new (test) purchase and see if Sendgrid was working and no longer blocking the whole checkout process. I did and the payment worked, a on page and by email confirmation were done right away. And that is amazing news. Sendgrid API all the way!

NB Did have one JS error in the console stil:

TypeError: undefined is not an object (evaluating '$(".woocommerce-billing-fields__field-wrapper").position().left')

but that may be caused by other plugins used on the page and did not seem to interfere. So that can be debugged in time.

WooCommerce and Gutenberg – Great stuff ahead!

WooCommerce and Gutenberg.. What will happen when Gutenberg Editor gets introduced to your WooCommerce site in WordPress 5.0? Will it be Armageddon and will all product fields below the description and title field break? Do you need to deactivate Gutenberg just to keep your ecommerce business up and running?

What is Gutenberg?

Gutenberg is the new WordPress Editor. We wrote about it before at the beginning of this year actually. It will allow you to create content for posts, pages and custom post types just like WooCommerce Products using blocks. Here is a screenshot of what you see looking for blocks:

Gutenberg Blocks


And here one with some text added:

Text Block

Think of it as some of the Page Builders out there like Visual Composer, Beaver Builder or Divi. What is more, it will also make these options available in the customizer and perhaps frontend in the future as well.

Custom Fields and Gutenberg

As all is still under development it tends to be foggy sometimes and a lot of developers and end users are freaking out about it as it might break the way meta boxes / custom fields are used now. WooCommerce relies heavily on custom fields to add product data. And these fields may not work properly, or be moved to the new sidebar and so on. When you currently run the Gutenberg plugin to check you see it in action on a product page the WooCommerce custom fields are below it.

WooCommerce Custom Fields

But it is going to be way more integrated. Either they will be show below the block in a different way, go to the sidebar or they are going to come up with another solution.

Product Blocks

I am all for it and the sneak preview WooCommerce has shown looks very promising. And WooCommerce is working on product blocks already in their repo using a separate branch (code to be merged once done).

I installed the product blocks branch on my local WooCommerce Gutenberg Laravel Valet site and I can already see we can add a product block with ease inside a post:

Product Search Inside Woo Block

I just cannot search for my existing dummy products yet.  There seems to be a 404 issue


Here the no products found message:

Product Block Search

So I can’t go and add a product yet, but I can see we are closer than I thought and that is nice to see.

It is work in progress and perhaps my setup needs some REST API changes..? But the WooCommerce REST API is turned on though..

WooCommerce REST API


Well, that is something to try another time. Just like add products in x numbers and columns as Woo demoed. That I seem to not be able to do with this test branch yet.

The Future of WooCommerce with Gutenberg

I must say I am really exciting. I always found most page builder lacking a lot. Especially in the WooCommerce field. I want to be able to change the product page layout around. I want to be able to decide where the

  • product gallery,
  • description
  • cart button,
  • price and
  • other tabs with data


will be added. And I am positive that we will. Do see great options for the category or shop page in progress already. Rows and columns can be decided and hopefully thumbnail sizes in the future too. As for product page changes, well I expect to be able to move the mentioned elements around and WooCommerce did mention these as possibilities as well.

I expect to see way more in the upcoming weeks and months! Can’t say I am too worried. Big changes yes, but changes for the better to keep WordPress ahead of the game and compete with the likes of Shopify and Magento. And for WordPress to show others like Wix, Squarespace, Weebly and so on who’s boss. Exciting times!