Problem with your Stripe Webhook

Sometimes you will get an email from Stripe telling you there is a problem with your Stripe Webhook. For some reason it fails. Either the web hook cannot be found somehow or it cannot be loaded properly.

Webhook url

You can find the webhook to be used in your WooCommerce settings > Checkout > Stripe . It should be something like https://domain.com/?wc-api=wc_stripe . Copy it over into your Stripe Dashboard under webhooks should work just fine out of the box. This webhook can be used to:

  • Update a customer’s membership record in your database when a subscription payment succeeds
  • Email a customer when a subscription payment fails
  • Check out the Dashboard if you see that a dispute was filed
  • Make adjustments to an invoice when it’s created (but before it’s been paid)
  • Log an accounting entry when a transfer is paid

So really useful on giving feedback when payments fail. And that we had in our case. Wrote about that Stripe issue here.

Errors 404 – Webhook not found

We had the following error in our logs related to this

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

and in the access log we found

54.187.205.235 - - [25/Jan/2018:06:29:14 +0000] "POST /wp/wp-admin/admin-ajax.php?action=stripe_webhook HTTP/1.1" 400 11 "-" "Stripe/1.0 (+https://stripe.com/docs/webhooks)" "-"

So somehow the webhook was not found and so no 2xx response was given. And as Stripe mentions this is one of the most common mistakes using webhooks. The wrong url is entered.

Issue & Solution

In our case we had entered the wrong webhook url  https://domain.com/wp/wp-admin/admin-ajax.php?action=stripe_webhook. It should have been https://domain.com/?wc-api=wc_stripe  as mentioned earlier. That caused it not to work and Stripe sending us an email with “Problem with your Stripe Webhook” in the title.

Stripe 402 Error – Payment Required

Setting up Stripe for a client on WooCommerce we ran into a Stripe 402 Error. So what does a 402 error mean and how can we solve this issue? Well Let’s get into the finer details shall we.

Stripe Environment

Keys used In our case this happened using a live publishable and private key. So this meant we had to use a real credit card and enter details properly. Sometimes people run test mode and forget to use a dummy credit card for testing or forget to turn on testing. So please do check what mode you are using and use the proper payment details.

Stripe 402 Code

When the payment does fail with a Stripe 402 error it means the payment went wrong.

Stripe 402 Error

I quote Stripe:

Not all errors map cleanly onto HTTP response codes, however. When a request is valid but does not complete successfully (e.g., a card is declined), we return a 402 error code. To understand why a card is declined, refer to the list of codes in the documentation.

So as there are multiple problems that can cause this error you need to find out what the error was you had. And for that you need to get the possible decline code.

Source of the Error

We can see in the page source  what the issue is once the payment is done. To view the source just after a failure use command+alt+i on Chrome on your Mac to open the inspector for this. Sometimes it is just the wrong credit card details entered. Again, check the decline code / message.

Also, when you have error message recording turned on you can check your WooCommerce system logs. These are located at /srv/www/domain.com/shared/uploads/wc-logs  for those using Trellis. For others at wp-content/uploads/wc-logs. In our case we found:

01-24-2018 @ 13:54:48 - ====Start Log====
Error: stdClass Object
(
 [error] => stdClass Object
 (
 [message] => Your card's security code is incorrect.
 [type] => card_error
 [param] => cvc
 [code] => incorrect_cvc
 [charge] => ch_111111111111111111111
 )

)

So the client did not enter the proper security code or cvc. In other cases it could be an incorrect card number or something else related tot the payment.

Solution

Well, as soon as you have the decline code or error found in the source of the page or in your WooCommerce error logs or other payment logs you will be able to add details properly. As stated we had an issue with the cvc code. Once the client entered the proper security code the payment went through.

 

 

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

https://woo-guteberg.dev/index.php?rest_route=/wc/v2/products/?search=v

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!

Boost Sales with Algolia Search

Let’s face it, WordPress built-in search kind of blows. You can improve search and boost sales with Algolia Search. It will upgrade search to site wide search including products and offers suggestions! And it really easy to get going.

Improving WordPress Search

Visitors as we know can be an impatient bunch. So if we allow them to find what they need faster they are more likely to buy. Also, if search provides suggestions on what is available he or she might also go to a product though he was searching for blog content he saw earlier.

Unfortunately WordPress search out of the box sucks. Even a plugin like Better Search does not quite cut it. Sure it searches not just post, but other post types as well such as pages, but still it does not suggest other possible content, nor is it really fast.

Algolia Search to the rescue

Lighting fast search with search suggestions Google style  can now all be done with the power of Algolia Search. Algolia Search is used heavily in the Laravel community and at Laracasts.com and with good reason.

Algolia Search

It is simply an amazing search integration. This is what is has on offer:

  • site-wide search
  • content suggestions while typing
  • suggests other options when the customer misspells something*

*Here example of misspelling where correct search term is suggested:

Misspelling and suggestions

And while you could integrate Google Search this is way prettier as in really integrates well. Just test it on our site. On typing suggestions popup in a dropdown from where a customer can click on a link. Each suggestion is also displayed with a small thumbnail based on the featured image.

Better Conversion and Lower Bounce Rate

All these features will prove that you can boost sales with Algolia Search. It will suggest possible products to buy and it will show these directly while searching. That is pretty amazing isn’t it. Besides a sales boost it is also just a general retention boost. It will lower your bounce rate as visitors will with ease be able to find follow up content, products and services to look at.

Pricing

Let me just quote what they mentioned on the plugin description page here:

Algolia offers its Search as a Service provider on a incremental payment program, including a free Community Plan which includes 10,000 records & 100,000 indexing operations per month.
Beyond that, plans start at $35/month.

So you can stay on the free community plan post registration – needed for key – as long as you do not pass 10,000 records & 10,000 indexing operations per month. Indexing wise you should not have issues with that anytime soon on most sites and neither should you record wise.

We have had 2,452 records and 3,311 indexing operations so far with with 150+ post and close to 30 pages. Also during the trial the sky’s the limit really.

Setup

First of all you need to install their plugin. That is easy as always.

Search by Algolia – Instant & Relevant results

Next you will need to register to get your

  • application id,
  • search-only api key and
  • admin api key

and get your trial up and running. The plugin will guide you with this.

Algolia Settings

Autocomplete

Then you need to choose the content you would like to be part of the searches and allow Algolia to index it under autocomplete and activate this. This will take some time as in will need to index and store it at Algolia for lightning fast future searches and suggestions.

Algolia Auto Complete

Search Page Choice

On Search page you can choose to use WordPress Search Page or the Algolia Search page:

Search Page and Algolia

This really depends on your preference. We are testing with at the moment.

 

Algolia Dashboard

Once you are setup you can keep track of indexing, searches done and much much more in their Dashboard.

Algolia Dashboard

I like the design and UI in general. It is easy to see what is going on. Do think I won’t be needing to check things here that much, but it is nice to have when search starts getting used a lot.

Rolling your Own

If you want to run it all for free and under your control you can clone the repo and roll your own on your own server. Just to to the repository at Github and get your own copy. Then install in on the same web server or a separate on, and integrate it with your site. Doing this all by yourself will require more technical knowhow and more server power of course, but you do keep all the data under your control

WooCommerce Cart in Theme Header

To add the WooCommerce Cart in the Theme Header and make it update based upon cart changes there are basically two steps to take. In this post I will go through them briefly.

FYI

This code is based on Isabel’s code, but slightly adjusted to deal with some WooCommerce changes and added notification:

PHP Notice: WC_Cart::get_cart_url is <strong>deprecated</strong> since version 2.5! Use wc_get_cart_url instead.
as well as some styling tweaks. So for a more detailed post do read her blog post on this. My thanks goes out to her for sharing the code as well as the styling!

Header Cart Loading

To load the WooCommerce Cart in Theme Header use this code below. The html tag you can of course change. I just added it so I could position the cart properly next to the menu in my Ianua theme. This is an updated snippet based of Isabel’s snippet as stated earlier. Only the wc_get_cart_url() has been added instead of the deprecated WC()->cart->get_cart_url().

<div class="woocommerce-cart">
<?php if ( in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) {
$count = WC()->cart->cart_contents_count;
?>
<a class="cart-contents"href="<?php echo wc_get_cart_url(); ?>"title="<?php_e( 'View your shopping cart' ); ?>">
<?php
if ( $count > 0 ) {
?>
<span class="cart-contents-count"><?php echo esc_html( $count ); ?></span>
<?php
}
?></a>
<?php } ?>
</div>

Cart Updates and Styling

The code snippet you need to add to your functions.php to update the cart count is still as is and indicated on her blog post so you can just copy it it off of her post. But here just in case the post is ever taken down:

/**
 * Ensure cart contents update when products are added to the cart via AJAX
 * Created by Isabel https://isabelcastillo.com/woocommerce-cart-icon-count-theme-header
 */
function my_header_add_to_cart_fragment( $fragments ) {
 ob_start();
 $count = WC()->cart->cart_contents_count;
 ?><a class="cart-contents" href="<?php echo WC()->cart->get_cart_url(); ?>" title="<?php _e( 'View your shopping cart' ); ?>"><?php
 if ( $count > 0 ) {
 ?>
 <span class="cart-contents-count"><?php echo esc_html( $count ); ?></span>
 <?php 
 }
 ?></a><?php
 $fragments['a.cart-contents'] = ob_get_clean();
 return $fragments;
}
add_filter( 'woocommerce_add_to_cart_fragments', 'my_header_add_to_cart_fragment' );

The same goes for the styling. Though you may want to style things differently of course. Styling we used in the end was:

#nav-wrap .woocommerce-cart {
    float: right;
    padding: 15px 6px 15px 24px;
}
.cart-contents:before {
font-family:WooCommerce;
content: "\e01d";
color: white;
font-size:16px;
margin-top:10px;
font-style:normal;
font-weight:400;
padding-right:2px;
vertical-align: bottom;
}
.cart-contents:hover {
text-decoration: none;
}
.cart-contents-count {
color: #fff;
// background-color: #2ecc71;
font-weight: bold;
// border-radius: 10px;
padding: 1px3px;
line-height: 1;
font-family: Arial, Helvetica, sans-serif;
vertical-align: top;
}

So minimal changes really. Did not like the background and with a dark theme I needed things to be white for it to show well.

Your theme contains outdated copies of some WooCommerce template files

Often when you upgrade WooCommerce you get the error Your theme contains outdated copies of some WooCommerce template files. Ianua in this case. How to resolve this issue? Well. let’s work things out shall we?

Check System Status Page

The error message Your theme contains outdated copies of some WooCommerce template files will also indicate you should check the system status page where they will show you what pages are outdated. Here the full error message:

Your theme (Ianua) contains outdated copies of some WooCommerce template files. These files may need updating to ensure they are compatible with the current version of WooCommerce. You can see which files are affected from the system status page. If in doubt, check with the author of the theme.

NB They also refer to https://docs.woocommerce.com/document/template-structure/ to learn more about the WooCommerce template structure

Outdated Templates

At the bottom of the system status page they will show you what templates are outdated.

Outdated Templates

If you are the author of the theme it will be up to you to update the files in question. If you bought the theme from another developer you should ask them for an update and then overwrite the theme according to their instructions.

Updating Theme Caveats

Now remember, just because a template got an update it does not mean the theme won’t work anymore. Two, if you would update a theme you bought by yourself you may lose the layout that was set up using it so do this only if you know what you are doing. Better to contact the theme builder before you make any changes yourself!

When to Update

If we check ianua/archive-product.php for example we will see that we added the product archive page as we wanted a specific display:

A custom WP_Query was created to load the products. This so additional html could be added for all the page elements with ease. This page was on the list of pages needing an update according to WooCommerce. It stated

ianua/archive-product.php version - is out of date. The core version is 2.0.0,

This page won’t be updated at this moment though. That is because of the custom code for one. It also is not using any WooCommerce functionality that no longer works. If the latter would have been the case we would have had to update the outdated code.

So only update if the files that need updating do not have any custom code, which will be rare if the file in question is part of the theme. Two, if there is custom, only update the functionality that is outdated or even causing (fatal) errors.

Removing the Warning

If you do want the warning not to be mentioned anymore, add the correct block with the file version number. In this case the block would be:

/**
* The Template for displaying product archives, including the main shop page which is a post type archive
*
* This template can be overridden by copying it to yourtheme/woocommerce/archive-product.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see      https://docs.woocommerce.com/document/template-structure/
* @author      WooThemes
* @package     WooCommerce/Templates
* @version 2.0.0
*/

As you can see the version was 2.0.0 at the time of the writing of this blog post. Of course other files have other version numbers.

WooCommerce Product in a Post

How do you take care of having a WooCommerce Product in a Post? More important, why should you put your product or products in blog posts? In this post I will explain how and why you should do it.

WooCommerce Product in a Post Advantages

If a reader really enjoyed your posts and goes all the way to the bottom of that blog post he is more likely to be interested in a product related to that post. It will be very helpful for him to see what products or services you are offering that are related to the blog post. You hereby basically give useful information for free how to deal with a problem or how to deal with something. And at the same time you offer your help in case the reader cannot work it out or simply does not have the time to do it.

WooCommerce Shortcodes

WooCommerce uses shortcodes. These shortcodes allow you to load WooCommerce functionality in pages or posts. In our case we want to load some basic product details to show our readers we can help them out with related services.You add a WooCommerce shortcode for the product in question using its product id. Here an example:

[ product id="999" ]

NB Spaces added after first and before last bracket to not have the product 999 load here

You will then see something like this:

WooCommerce Product in blog post

Other Options

There are even options to add the full product with all its details or just the product title, price and add to cart button. To load the full product page you do this using the shortcode [ product_page id=”99″ ]. But I think it is better to just add a thumbnail, title and price and option to add the product to the cart. And that is what this shortcode does. As for just showing a cart button with the product title and price you can use [ add_to_cart id=”99″ ]. As I find a thumbnail to go with the product more visually appealing I would stick to the choice suggested.

 

Setting up WooCommerce Subscriptions

Setting up WooCommerce Subscriptions is pretty straightforward. As should be the reasons going for subscriptions. However, you may run into certain issues and documentation on some issues may not be clear enough.

Subscriptions Rock

Subscriptions will mean recurring revenue. It will means that you can sell packages that can be sold time and again. And you will be selling them automatically. We all need repeat business where we can get it and this is the perfect way to arrange repeat business. Also, it is way easier and cheaper to keep a client than acquire one so the more reason to keep the ones you acquired.

Installation

We assume here you can acquire the plugin yourself and activate the plugin from within WordPress or using the WP CLI command line tool. That is not too hard really, even for beginners. So let’s move onto the configuration.

WooCommerce Subscriptions Configuration

Once the plugin is up and running you can go to your WooCommerces settings where you will find a new tab called subscriptions and there you can work on setting up WooCommerce Subscriptions  for real. There may be other issues to deal with like PayPal tweaks as we will discuss later, but let’s start with this overview tab.

WooCommerce Subscriptions Configuration

Subscription Button and Default Roles

You can set the button text and default roles. Button text speaks for itself. Default role you should choose carefully. What do customers become when they are subscribed. Most of the time the default settings are fine. But do make sure they apply to your business setup.

Subscription Renewals

Normally you will do the subscription renewals automatically. That is the joy of using them in the first place. You let customers auto renew their accounts so they can keep on enjoying their package and you can keep on enjoying recurring payments. Sometimes however you would like to accept manual renewals. This way the subscription is put on hold until your customer renews himself.

NB Do realize this setup will only work for new clients post activation

Switching Subscription Package

You can allow the switching of packages. This means you can allow your customers to upgrade or downgrade their subscription with you. You can do this with a variable subscription product which most of you will have  or within a grouped product. You can also choose both.

Subscription Switching

Prorate recurring Payment

When you allow the switching for one of your products you can choose to pay the client the difference between the old setup and cheaper setup. Or if it is more expensive let him pay the difference. If you like you can even allow Prorate recurring payment only for upgrades

You can however also choose to let it be his loss. And that case he will will pay until the end of the period of the subscription package he chose and pay for the new setup at the same time.

If you work with a sign-up fee as well you can choose to run this fee when the client switches package, but you do not need to do this.

Synchonization

You can run all renewals at the same date, the first of the month for example. This can be useful with certain products. As WooCommerce stated:

For example, a store selling a monthly gift box might ship the boxes on the first of each month. If a customer signed up on the 20th of January, by default her first renewal would be on the 20th of February. With renewal synchronization enabled, the customer can sign up on the 20th January and pay nothing to sign up (unless there is a sign up fee) and have the first subscription renewal processed on the 1st of February. The next renewal will then be processed on the 1st of March, then 1st April and so on.

Also here with this setup you can do pro rating for the first payment. This as your customer may only enjoy part of the package that month before the new package is sent out.

PayPal Issues

Once activated you will normally get a warning straight away. This is because most of us will need to enter our PayPal IPN and API credentials under checkout > PayPal. If you never did this before the error:

PayPal is inactive for subscription transactions. Please set up the PayPal IPN and enter your API credentials to enable PayPal for Subscriptions.

will refer you to WooCommerce documentation to get this IPN and API Credentials in order. The link to IPN details goes to the wrong section though and I had to click on PayPal there to get to that same link again properly. There you can read up on both and there you will also find links to PayPal documentation. The WooCommerce section on IPN is actually here. And there they have a nice animated gif showing you how to do it.

PayPal Tweaks

To get the IPN done and API Credentials you need to do some tweaks at PayPal first. Go to your profile > selling tools. Your Profile is found in the top right corner once logged into PayPal:

Your PayPal Profile

After clicking that you can find selling tools as options in the right sidebar:

PayPal Selling Tools

IPN URL

Under selling tools > you will find “Instant payment notifications” (IPN) where you can set up the proper url. In our case it is:

https://wooaid.com/?wc-api=WC_Gateway_Paypal

Do change the url go represent your website of course. Also make sure message delivery is enabled.

NB IPN is not the be best way to run these things and for other sites like Rocket Pure we set up PIT as well.

PayPal API Credentials

The PayPal API Credentials you can find or set up under profile > selling tools > API Credentials. Once you clicked on update here you will get to the location where you either can add or grant API permission or manage API permissions:

PayPal API

When you click on manage you will see the API Access page

PayPal API Access

NB Sometimes you will be required to identify yourself as account owner. Especially when you decided to work from a different location like I as Digital Nomad often do.

These credentials you will need to enter in your WooCommerce environment:

API Credentials

Once that is done the setting upWooCommerce Subscriptions is a fact and you are ready to rock and roll!

WooCommerce Product Order

You need the products in your shop to be displayed in a certain order.  So how do you deal with the WooCommerce Product Order? Where can this be done? It is just one of these things. Once you know where it is it is easy.Well is is a little bit different from ordering posts, but not much.

Advanced Product Data

You need to go to the advanced product settings for your product. So go to the product you would like to move down or up on your shop page. Then under Product data > Advanced you can pick a menu order.

WooCommerce Product Order

The lower the number the earlier it will popup on the list. Don’t forget to hit update!

WooCommerce Coupon Codes – How to set them up

One great way to start selling your products is using WooCommerce Coupon Codes. It is a nice way to entice your customers to buy your product. We all love a discount don’t we? So how do we setup WooCommerce Coupon Codes? Let’s dive in shall we?

Locating WooCommerce’s Coupons

When you go to your WordPress Dashboard and then to WooCommerce you will see the options coupons right away.

Woocommerce Coupons in Menu

Coupons List

Once you click on coupons you will be able to add new coupons or edit existing ones just like you would with posts and pages in WordPress.

WooCommerce Coupons List

Just click on “add coupon” to add a new one.

New Coupon

Once there you can

  • give it a title and description,
  • indicate the duration and
  • the amount of discount as a percentage or amount

Add new coupon

I think a percentage works best so recommend this. Do not forget to make it expire. I would not let it last forever. Discounts last for a certain period. In that period like Christmas time people should get that discount. And once that period it over the coupon should have expired.

Usage Restrictions

As for Usage restrictions, well, there are many options like

  • minimum or maximum amount spent,
  • individual use only,
  • excluding sales items
  • products it will be applied to

Usage Restrictions

I would at least pick the product you apply it to unless you do everything on sale. Besides that it is smart to exclude items that are on sale already.

Usage Limits

As for usage limits do restrict things if your shop is really busy or does get busy here. You can l

  • imit usage per coupon,
  • limit the usage for a certain item if it applies to many products and
  • limit it by user.

Usage Limits

Coupon Code

The coupon code itself is the title you gave it. So “WOO-SETUP-15” for example would be a good one for selling WooCommerce products in our case. Well, it should be pretty clear as the title is called “coupon code”, but we decided it would be good to mention anyways.