Gallery Captions for WooCommerce

Gallery Captions for WooCommerce is a WooCommerce Extension that adds captions to the product images on WooCommerce’s Single-Product page. It is my first commercial WooCommerce extension, and I’m happy to say it’s available for purchase on WooCommerce.com.

Why Captions?

On the surface this seems like a question with an obvious answer: To tell potential customers what they’re seeing in an image.

But when researching I found even more compelling reasons: Captions may be the most-read text on a page, (even more than the page title!). If a caption isn’t the most-read text it’s still very well-read, and the combination of an image and caption can help customers understand what they’re looking at and make a well-informed buying decision.

Super Simple

Gallery Captions is super simple to use. There is documentation, (of course), but it’s barely needed. There are no settings, just install & activate the plugin and it will pull the information set as the Title and Caption in your Media Library. I may add options in the future to choose to show the title, caption, or description, but for now it’s super-simple.

Add Captions to Your Store

If you want to add captions to your WooCommerce product galleries, (and you should want to), then go ahead and use Gallery Captions for WooCommerce.

Bug Bounties in a Small Company

The E-mail arrived quietly in our support mailbox. Pretty good English, but clearly not the writer’s first language, and :

BUG : Password Reset Link Not Expire After Mail Change.

Hey!
I found a token miss configuration flaw in…

Ok. Not the biggest deal of all time, but something that should be fixed. The submitter provided really great instructions on how to reproduce the bug and why we should care. I replied thanking the submitter and got this back:

Hi There
Is there any way to give me a bounty ?

Thanks

Baboom. This sounds like the exact situation that Justin Jackson & Jon Buda asked about on this episode of Build your SaaS. We’re a small company. We don’t have a formal bug bounty or vulnerability disclosure program, but I find security fascinating, (at least from the outside), and know bug bounties are a thing. It would be nice to pay a bounty, but how much? What happens next? What if we refuse?

This is what we did, and how it played out.

It’s our first time

My business partner had seen the initial E-mail in the support system so he knew something was up. After a quick discussion about how bug bounties work and asking if he ok with paying something we made the decision to pay small bounties in the neighbourhood of $20 – $50 US per bug, depending on severity, available funds, and how many more reports came in.

I went back to the submitter and said that we could pay but as a very small company with an extremely limited budget he should not expect Apple-style bounties. They were happy with that arrangement, so I fixed the bug.

Then they submitted another but and I fixed that. And another. In all this person submitted 5 “bugs” of varying severity. Some we could barely class as problems but we looked at them all and patched any that needed patching. Some others made us re-think some of the user interface, especially around changing contact or login information, and make plans to change it later.

The reports were both submitted and fixed close together so we lumped everything into one payment. We paid about $100 US for the lot. The submitter asked for payment to go to a random PayPal address that was nothing like the name of the person we were dealing with, then send a screenshot of the completed payment. Pretty sketchy, but they were satisfied.

Writing a Disclosure Policy

I have looked at the bug bounty programs on HackerOne and Bugcrowd, and decided to make a page to point people to when they ask about bug bounties, and to lay down some ground rules, (like don’t DDoS us!). We used Mozilla’s Bug Bounty program and some others from respected companies as inspiration. We included a requirement for detailed reproduction steps, why the bug is actually a problem. This makes it relatively easy to triage any reports we get.

Good thing we wrote a disclosure policy, because as we were finishing up with the researcher another E-mailed us with some bugs, and asking if we have a bug bounty program, and we were was able to respond with a link to the new disclosure page.

Bounty Hunter #2

On Build your SaaS Jon asked if you paid, would you end up on a list of companies that pay, then be flooded with submissions. The answer seems to be at least sort of yes. As we were finishing up with the first submitter another showed up. Submitter #2 had better English than Submitter #1, and was much more thorough. I suspect these two were somehow connected, whether they both post to the same forum or both work for the same person I don’t know, but it felt like we went from a Level 1 pen-tester to Level 2. Submitter #2’s bugs were more creative and more serious than Submitter #1’s. Since #2 showed up just as we were finishing with #1 we were short on cash for bounties, but were honest about it and paid what we could. This seemed well received. I believe we paid about $200 US to Submitter #2.

After once we were mostly wrapped up with Submitter #2 things were quiet for a while, then he submitted one more issue about a week later which we fixed, and since we hadn’t sent the payment yet added to the payment for all of his bugs. Payment was the same sketchy unrelated PayPal + screenshot of the payment method.

Was it worth it?

Short term answer: Yes. At least one of the bugs that Submitter #2 found was serious enough that it warranted immediate attention, so on that level it was worth having someone report it instead of exploit it.

Overall answer: Still yes. For the cost of about $300 US and about a week of my mornings we got outside feedback that made us reconsider some UI decisions from a security standpoint and learned about Content Security Policies and other security headers. Also, the submitted bugs and our knowledge of our systems led us to other related bugs that we fixed as well, so it was a bit like a 2-for-one sale on bug-fixes. And now we have tests written that should prevent these bugs from re-appearing.

Of course I would prefer that we found problems internally before they were deployed, and problems would be discovered at convenient times, but that’s not the real world and I’m happy the problems were found and fixed, and we improved our systems and knowledge as a result.

This all happened back in February and March, and we haven’t had any reports since.

Further Steps

I hear there’s an ISO standard for security disclosure best practices, (apparently ISO 29147 and ISO 30111). I plan on looking them up and do what we can to follow them while balancing that with continuing to improve our product. With a small team it’s always a question of balance, so we’ll keep doing our best!

Has this happened to you?

If I had to bet, I would bet that a lot of small businesses are approached by security researchers this way, but none of us have dealt with them before, we don’t know what to do, and are worried it will be a scam or that we’ll end up on a list and end up spending all our time dealing with bug reports. This feels like something we should talk about.

Local Commerce

Justin Jackson lays out the case for turning all of our favourite local stores into a viable Amazon competitor in his post Fight Amazon. It got me thinking about the problems I’ve had trying to buy things from local stores over the past year, and maybe some solutions.

Justin musing about how local stores can compete with Amazon.

Local Commerce Problems

I try to support local stores when I can. I don’t usually buy clothes, (somehow I’m still clothed), so I can’t speak knowledgeably about clothing shopping, but there have been some instances over the past year when I’ve been incredibly frustrated with local shopping.

It’s the bike shoes that the bike shop had to order twice and took a month to get, late in the season, or the bike brake levers that the bike shop ordered the model for the wrong kind of brake, or the indoor soccer shoes that, even after checking the Sport Chek website were not in stock, or when our portable washing machine broke down an there was no way to buy one locally without actually visiting or calling all the appliance stores to check their stock. Don’t even get me started on trying to buy several yards of cloth when someone in the family is making costumes for a dance recital.

In all of these cases a service that could tell me where products are in stock locally would have solved my problem. Actual purchasing and delivery would make things even better for some products.

The Inventory Problem

Where do I go to buy this?

For stores that already have E-Commerce systems in place it’s probably not too hard to answer this question. The problem is making sure that the E-Commerce systems exist, and have accurate inventory numbers. I haven’t worked in retail for a long time, and when I did we weren’t using anything computerized to record inventory. These days I think some, (but not all!), stores to have computerized inventory but making the systems used in stores talk to E-Commerce systems may be difficult.

For stores that already have reliable stock levels in their E-Commerce systems it should be relatively simple to know their inventory numbers using something like a Google Product Feed. That could be used either by other local stores who are willing to refer customers to competitors with products in stock, or by an aggregator that provides a local shopping experience.

Shipping

I should also mention shipping: It’s expensive, and it’ll be tough to compete against Amazon, but there’s probably a way to make it happen, and it’s not my area of expertise so I don’t know if any of my ideas are realistic.

The Business Problem

If the technical side works, and we have a bunch of local stores that can take orders online, ship easily and inexpensively, and find alternative sources for items they don’t have, and we have an aggregator where people can go to shop instead of Amazon, we still have a business problem, or two:

  1. Why would a store recommend that a customer go buy from their competitor now instead of trying to take the order themselves and order in the product?
    • Justin mentions commissions in his video. Why would a store pay a commission to its competitor instead of trying to get the sale itself some other way?
  2. How does the aggregator make money without becoming a pay-to-play advertising service?
    • Maybe commissions here too, but is it possible to get enough store owners on board with paying the commission instead of taking their chances with Adwords?

Next?

I doubt that I’ll be the person to try to solve these problems, but someone should.

To get to the level of a real, local-everywhere Amazon alternative let’s start with some technical questions.

Technical Questions:

  • Do stores even use computers to track stock?
    • Does that change if they sell online?
  • How hard is it to make in-store stock-tracking software talk to E-Commerce software?
    • What is even being used to track stock in stores?
    • Does it have APIs? Can it send notifications to other systems when stock levels change, or receive notifications to change its internal level when an E-Commerce order is received?
    • Do we have a good way of identifying the same product across multiple stores? I know that GTINs exist, but suspect they’re less than perfect.

If you know the answers to these, or have more questions, post in the comments like it’s 2005, or we can talk about it on Twitter.

Slashlocal: Someone is already trying

A parent I know from my kids school runs Slashlocal, which is trying to solve some of the local problems. I downloaded it today and will see if it helps me solve their problems. I’m worried their pricing model will discourage stores from putting their entire inventory online, but I believe the product is young they’re working hard to help on-board customers at no cost during the current crisis, so maybe changes are coming.

Maybe I’ll build a WooCommerce extension?

If you’re interested in a WooCommerce extension to show other places to buy an item when your store is out of stock or you don’t carry what the customer is looking for let me know. If there’s enough interest I’ll build it.

DeadTrees 1.1: More Cover Sources

An update to DeadTrees, my WordPress plugin for sharing the books I read, is now live in the WordPress Plugin Repository. This update does one major thing: diversifies the sources of cover images.

What happened was Amazon introduced a quota on the API that the original DeadTrees was using to fetch cover art. The API quota is based on how many sales a user has, and I’m famous enough to have many sales, so my API access was eventually cut off. When I started posting my backlog of books I really wanted cover art, so I polished off the (very) dusty code and got to work.

Version 1.1 of DeadTrees maintains support for Amazon cover art and adds support for fetching cover art from OpenLibrary.org and LibraryThing. There’s a setting to try Amazon first or last, and the plugin tries to be smart about when to try OpenLibrary.org or LibraryThing, (it prefers OpenLibrary.org, as they seem to provide larger images, and don’t require an API key).

If you want to see DeadTrees in action take a look at the list of books I have read, which is powered by DeadTrees. For support post in the WordPress.org forum, and for bugs & feature requests post in the same forum or create a Github issue.

Happy Reading!

Adding Google Ads and Microsoft Advertising Conversion Tags to WooCommerce

Adding Google Ads and Microsoft Advertising conversion tracking tags to WooCommerce powered E-commerce shops can seem confusing at first: WooCommerce templates are like a huge Russian nesting doll and it’s unclear where to put the tags. On top of that Google wants their tags as close to the top of the document as possible, but many tutorials suggest using the woocommerce_thankyou hook, which dumps its output right in the middle of the body.

Use Any WordPress Hook

Luckily we can just use WordPress hooks to insert conversion tags where we need them, so long as we make sure we’re on the “Thanks for your order” page, and check that the order is a status that we want to count as a conversion. Here’s how we can do that:

/**
 * This function can be hooked onto any normal WordPress hook. Maybe wp_head,
 * or wp_footer, or even a sidebar if you really want.
 * @return [type] [description]
 */
function jb_do_stuff_on_order_complete_page() {
	// is_order_received_page() is part of WooCommerce
	// if there's a possibility that the page is loaded without WooCommerce
	// you could check to make sure it exists:
	if(!function_exists('is_order_received_page')) return;

	if(is_order_received_page()) {
		global $wp;
		$order = wc_get_order($wp->query_vars['order-received']);
		if($order && !$order->has_status( 'failed' )) {
			// Do what we need here.
		}
	}	
}

Set Up Conversion Tracking

Both Google and Microsoft have two parts to their tracking tag: a global tag that goes on every page of the website, (Microsoft calls this a UET tag, for “Universal Event Tracking“), and a conversion snippet. Both companies ask that that the global tag appears first in the document’s source. For Google this is because the gtag() function used by the conversion snippet is defined by the global tag.

Google Ads

Google really likes their global tag to be as high in the page’s source as possible – right after the opening <head> tag if possible. Because of this I often put the global tag right into header.php. A more portable solution is to use the wp_head hook so we’ll do that here:


function jb_set_up_google_tags() {

	// Start with the global tag.
?>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXX-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'UA-XXXXXXX-1');	// sets up Google Analytics - Google will give you the exact value
  gtag('config', 'AW-XXXXXXX');		// added for the conversion - Google will give you the exact value

  if (window.performance) {
    var timeSincePageLoad = Math.round(performance.now());
    gtag('event', 'timing_complete', {
      'name': 'load',
      'value': timeSincePageLoad,
      'event_category': 'JS Dependencies'
    });
  }
</script>
<?php

	// Add the conversion tag IF this is an Order Complete page.
	if(is_order_received_page()) {
		global $wp;
		$order = wc_get_order($wp->query_vars['order-received']);
		if($order && !$order->has_status( 'failed' )) {
?>		
<!-- Event snippet for Sales conversion page -->
<script>
  gtag('event', 'conversion', {
      'send_to': 'AW-XXXXXXX/XXXXXXXXX__XXXXX',		// Google will provide this value.
      'value': <?php echo $order->get_subtotal(); ?>,
      'currency': 'USD',							// Change you deal with a different currency. Or set it dynamically.
      'transaction_id': '<?php echo $order->get_order_number(); ?>'
  }); 
</script>
<?php
		}
	}
}

// Set priority 1 to appear as soon as possible in the wp_head.
add_action( 'wp_head', 'jb_set_up_google_tags', 1 );

Boom! That’s it for Google.

Microsoft Advertising

Microsoft advertising is very similar, except they seem to suggest that they want the conversion snippet before the closing </body> tag, and don’t seem to mind about the UET tag, so let’s just put them both in the wp_footer:

function jb_add_microsoft_advertising_tags() {

	// Start with the UET tag that goes on every page.
?>
<script>(function(w,d,t,r,u){var f,n,i;w[u]=w[u]||[],f=function(){var o={ti:"XXXXXXX"};o.q=w[u],w[u]=new UET(o),w[u].push("pageLoad")},n=d.createElement(t),n.src=r,n.async=1,n.onload=n.onreadystatechange=function(){var s=this.readyState;s&&s!=="loaded"&&s!=="complete"||(f(),n.onload=n.onreadystatechange=null)},i=d.getElementsByTagName(t)[0],i.parentNode.insertBefore(n,i)})(window,document,"script","//bat.bing.com/bat.js","uetq");</script>
<?php

	// Then add the conversion tag IF this is an Order Complete page.
	if(is_order_received_page()) {
		global $wp;
		$order = wc_get_order($wp->query_vars['order-received']);
		if($order && !$order->has_status( 'failed' )) {

			$order_info = [
				'revenue_value' => $order->get_subtotal(),
				'currency' => 'USD'
			];
?>
<script>
   window.uetq = window.uetq || [];
   window.uetq.push('event', '', <?php echo json_encode($order_info); ?>);  
</script>
<?php
		}
	} // end if this is an order received page.		

}
add_action( 'wp_footer', 'jb_add_microsoft_advertising_tags', 90 ); // Priority 90 to appear near the end.

Microsoft’s documentation on adding the conversion snippet is somewhat confusing. It talks about adding extra Javascript functions to supply the conversion value and doesn’t say what data type the conversion value should be, (let me know if you know). A Javascript function to extract the conversion value from the DOM might be a good idea when there’s no server-side access to the purchase data, but if you’re developing a WooCommerce theme or plugin you have the access you need to just print the conversion value in the tag with PHP, (as we did above).

Conclusion

That’s it. I heard that some people have trouble getting Bing working, (probably because of the extra-confusing directions from Microsoft), and I had trouble finding resources on adding conversion tags to the header for Google Ads. Hopefully this helps people with one, (or both), of the same questions.