Category: ecommerce

Categories
ecommerce WooCommerce Wordpress

How to move the Archive Text in Genesis

For a while, I have struggled with how to remove or change location of the Archive Intro Text in a Genesis-based theme. Essentially, the idea is to move the Archive Intro Text towards the bottom of the page mostly for SEO purposes.

When I asked the questions on the StudioPress forums, I did not receive a satisfactory answer. So I did what most coders do: hack it till you discover how to do this way. Worry not, because this is not a hack. It is actually the recommended way to make a change like this.

Here is the code

/* Remove the Archive Headline and Text from the default location */
remove_action( 'genesis_archive_title_descriptions', 'genesis_do_archive_headings_open', 5);
remove_action( 'genesis_archive_title_descriptions', 'genesis_do_archive_headings_close', 15);
remove_action( 'genesis_archive_title_descriptions', 'genesis_do_archive_headings_headline', 10);
remove_action( 'genesis_archive_title_descriptions', 'genesis_do_archive_headings_intro_text', 12);
/* Now, add it back at the bottom */
add_action( 'woocommerce_after_shop_loop', 'ar_add_custom_hook_archive_description', 8);
add_action( 'ar_add_wc_archive_descr_text' , 'ar_do_custom_archive_description_text', 7, 3);
function ar_add_custom_hook_archive_description() {
global $wp_query;
if ( ! is_category() && ! is_tag() && ! is_tax() ) {
return;
}
$term = is_tax() ? get_term_by( 'slug', get_query_var( 'term' ), get_query_var( 'taxonomy' ) ) : $wp_query->get_queried_object();
if ( ! $term ) {
return;
}
$heading = get_term_meta( $term->term_id, 'headline', true );
if ( empty( $heading ) && genesis_a11y( 'headings' ) ) {
$heading = $term->name;
}
$intro_text = get_term_meta( $term->term_id, 'intro_text', true );
$intro_text = apply_filters( 'genesis_term_intro_text_output', $intro_text ? $intro_text : '' );
do_action( 'ar_add_wc_archive_descr_text', $heading, $intro_text, 'taxonomy-archive-description' );
}
function ar_do_custom_archive_description_text( $heading = '', $intro_text = '', $context = '' ) {
if ( $heading || $intro_text ) {
genesis_markup( array(
'open' => '<div %s>',
'context' => $context,
) );
}
if ( $context && $intro_text ) {
echo $intro_text;
}
if ( $heading || $intro_text ) {
genesis_markup( array(
'close' => '</div>',
'context' => $context,
) );
}
}

view raw
functions.php
hosted with ❤ by GitHub

The first 4 lines simply unhook the actions responsible for showing the Archive Intro Text at its default position. This will make sure the Archive Intro Text does not show up in its usual location.

The rest of the code moves the Archive Intro Text down to the bottom of the page, by hooking on to the “woocommerce_after_shop_loop” action. The trick is to get the relevant parameters passed to the function that eventually displays the Archive Intro Text.

This example is limited only to moving the Archive Intro Text. You will have to extend it to display the Archive Headline to the bottom.

Do let me know if you have any questions!

Categories
code ecommerce google analytics WooCommerce

How to Report WooCommerce Checkout Errors as Events in Google Analytics

Google Analytics Logo

For a while now, I have wanted to have visibility into what really happens on the WooCommerce Checkout page. More specifically, the goal is to determine why almost 50% of those visitors leave the site from the Checkout page?

Survey pop-ups could be one way of determining why they are leaving the site. However, personally, I consider those intrusive. Why not have a behind-the-scenes way of reporting the exact error(s) the user might be encountering?

At first, I envisioned that I could insert some JS code (specifically the GA Send Event JS code) within the relevant WooCommerce filter. In this case, it was going to be the “woocommerce_add_error” filter. However, that was not going to work, as I found that out after a bit of experimentation. Somehow, the JS code was being appended to the “checkout.min.js” file instead of being added inline. Later, I discovered that you can not add JS code in Filter Hooks. See this Facebook post in the Advanced WordPress group for that discussion.

The Solution

As I looked for how to solve this issue, another alternative method came to mind. What if I could trigger on the addition of the “<ul class=”woocommerce-error”>….</ul>” element to the DOM?

This way, the solution would be generic and can be extended for other notice types (warning, notice, message etc) as well. It could easily be used outside of the WooCommerce context as well. Ofcourse, you will have to change the correct class/id of the element being targeted.

Code Changes

function load_ga_error_script() {
// Load the JS file (jquery is a dependency)
wp_enqueue_script( 'ga-send-error-event', get_stylesheet_directory_uri() . '/js/ga-send-error-event.js', array('jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'load_ga_error_script' );

view raw
functions.php
hosted with ❤ by GitHub

jQuery(function() {
jQuery('.woocommerce').on('DOMNodeInserted', function(e) {
if (jQuery(e.target).is('.woocommerce-error')) {
// How Many Errors
var error_count = jQuery('.woocommerce-error li').size();
// This extracts the contents of the <li></li> tags, separated by commas
var messages = jQuery(".woocommerce-error li").map(function() { return jQuery(this).text() }).get().join();
// Send the GA Event
// Event Category: WooCommerce Error Event Action: checkout-error-notice Event Label: Actual Error Message shown to user
// Event Value: How many errors were shown to this user
ga("send", "event", "WooCommerce Error","checkout-error-notice", messages, error_count, {"nonInteraction": 1});
}
});
});

view raw
ga-send-error-event.js
hosted with ❤ by GitHub

Explanation:

The code changes are split into 2 parts:

  1. Load the new JS file from within the functions.php of your child theme.
  2. ga-send-error-event.js should be located in the “js” folder of your child theme. If the “js” folder” does not exist, you will have to create it.

Testing

Once you make these changes, you can test it yourself in Google Analytics. But first, you will have to conduct your testing in an Incognito window (Google Chrome).

  1. Visit your Checkout page (preferably in an uncached and incognito browser session)
  2. Open your Developer Toolbar from the Browser (Chrome Dev Tools or FireBug)
  3. Leave all fields empty.
  4. Select a Payment Method and click on Continue
  5. You should see the messages printed above the Checkout Form
  6. Log into your GA interface
  7. Navigate to Real-Time->Events->Events (last 30 minutes)
  8. You should see new events generated under the “WooCommerce Error” category.

See screenshots below

New Category of events called WooCommerce Error
New Category of events called WooCommerce Error

In my case I had left the Billing First Name and Billing Last Name empty. Additionally, I had also left the “Terms & Conditions” checkbox unchecked. The Event Label got truncated, but if you hover over it, the full label is :

“Billing First Name is a required field.,Billing Last Name is a required field.,You must accept our Terms &amp; Conditions.”
Event showing Full error message
Event showing Full error message

So this is how I solved the issue of reporting error messages on WooCommerce checkout page. I am not sure how helpful this will be (I am hoping it will lead to better insight into the actions of the user on the Checkout page). Hopefully, it will reveal weaknesses in the UX.

What do you think? Is this something useful for you? Go ahead and use the code. Let me know if it works well for you. You can also easily extend this code to any part of the site (it does not have to be WooCommerce related).

Categories
ecommerce PPC

AdWords Location Options Target and Exclude

You may have setup several Ad campaigns in Adwords. One of the setup options is related to Location. I did not give this one setting much importance. Instead, I would just enter the Country to target and forget about the rest. My assumption was that since I was “Targeting” visitors from just the one country, my ad would NOT be shown to anyone outside the targeted country.

Adwords Location Options
Ignore this at your peril. To target tightly, click on “People in my targeted location”

For example, I have Ad Campaigns targeting users exclusively in the United States. Or so I thought! My assumption was wrong, but I found out the hard way.

Accidental Discovery via Google Analytics

I was researching my site bounce rate when I stumbled upon the fact that my Adwords Ad was being displayed to users outside my “Target” country. This was totally unexpected because I did not intend to do that. I was trying to reach a specific country, but instead it turned out that users in other countries were being shown my Ad. Because this Ad was not relevant to them, my bounce rate associated with such visits was higher than 70%!

Through my newly learnt skills at segmenting data, I was able to narrow down specifically 3 countries whose visitors were showing an extremely high bounce rate. Note that these 3 countries were NOT my targeted countries.

Once I uncovered these wasted PPC clicks, I was determined to find out why AdWords was showing my ad. My first impulse was “ha, I found a bug in AdWords!”. Ofcourse, on deeper reflection, that was untrue. A bug like that could be of huge proportion and would have been caught much earlier.

Needless to say, I went digging through my Ad Campaign Settings. Specifically, I was seeking the answer within the Location Options settings.

Location Options (advanced) explained:

As it turns out, I had not read the instructions clearly. Part of the reason I overlooked this setting was because of the “recommended” default. The “Recommended” default option allows the ad to be shown to anyone in my targeted location, but also to anyone who “shows interest” in your targeted location. To make this clear, say you are selling “medicinal soap” through your Ads. Your “Target” country is United States. All is good so far, but what happens when a user searches for “medicinal soap in usa”? You guessed it right, the Ad is displayed.

What does this mean for me? In my case, I want a very tight control over what target country my ad is displayed in. Hence the “Recommended” defaults was not apt for my situation. I believe my choice would be “People in my targeted location“.

This setting would make sure that the Ad is never displayed outside of the Targeted country.

Also, keep in mind that the same settings apply for “Excluded” countries as well. The logic is the same, just conversely.

Conclusion

As I stated earlier, I was not looking at AdWords settings initially. My goal was to figure out why the bounce rate was so high for my site. This may be a small factor, but I am excited to see if the bounce rate will be lower, atleast for visits from the Adwords CPC medium.

 

Categories
code ecommerce WooCommerce Wordpress

[WooCommerce] Checkout Progress Bar

WooCommerce Checkout Progress Bar in Action
WooCommerce Checkout Progress Bar in Action

As you read articles/posts on ecommerce optimization, specifically checkout optimization, a popular theme emerges: The Checkout Progress Bar. The idea is to provide your visitors some kind of visual feedback that they are making progress. It tells them how far along they are before the purchase is complete. Conversely, it tells them how much longer before they can own the product/service they are vying for.

With this in mind, I googled for a free plugin that would accomplish just that. My search ended fruitless (almost). I did hit this gem of a plugin called Progress Bar. This is a simple plugin that can be used anywhere on a WordPress site.

Steps

In this article, my aim is to create your own customized checkout progress bar without the use of any paid plugins. You will need

  • Download the Progress Bar plugin from the WordPress plugin repository
  • Make some code changes (PHP and JS included). Download from github.

The code changes are shown below. The first change is in your theme/child theme’s functions.php file. Two things are happening here:

  1. Hooking into the “woocommerce_checkout_before_customer_details” action hook to display the Progress Bar. We use the shortcode for the Progress Bar because it allows to send in parameters for styling and appearance.
  2. Loading the JavaScript file that will manipulate the Progress Bar based on how much of the Checkout Form has been validated.

The second file is the JS script that checks in real-time which mandatory fields have been validated. Then it calculates the progress (in pixels) by simply dividing the “number of fields validated” by the “number of fields that require validation”. It also accounts for the “Shipping Address Same as Billing Address” checkbox.


The end result is you get a progress bar for your WooCommerce Checkout Page.

WooCommerce Checkout Progress Bar in Action
WooCommerce Checkout Progress Bar in Action

Notes on Customization

The CSS for the progress bar can be easily customized. Follow the instructions on this link. Also, note that the plugin has quite a few options that can be used for customizing the look and feel of the Progress Bar.

Categories
ecommerce WooCommerce Wordpress

[SOLVED] How to trigger emails of Failed Orders in WooCommerce

Update on February 3rd, 2016:

As of version 2.5 of WooCommerce, this functionality is now built into the WC Core. This plugin is not needed. See the WC 2.5 Changelog for more details.

 

Following the lead from this blog post by SkyVerge, I set upon to create email notifications when an order fails. Essentially, any time the credit card fails or the order processing is not successful, WooCommerce should notify the store owner that the order has failed.

Currently, WooCommerce is silent about Failed Orders. Note that there is a built in setting in WooCommerce for notifications about Canceled Orders, but not Failed Orders.

My first attempt at trying to modify this plugin by Justin Stern, failed. I tried to adapt the plugin for “Failed” instead of “Cancelled”. However, just replacing the instances of “Canceled” with “Failed” did not accomplish my objective.

After a lot of experimenting, I gave up and sought the help from the WooCommerce community. One of the most helpful WooNinjas, Caleb Burks, lent me a hand for this one. I take no credit for this. All I can say is that guy knows his coding very well.

In the future, I will try to explain the code. For now, here is the link to the completed plugin that sends out emails immediately after an order transitions into Failed status. To test this, simply change the status of an order to “Failed”. Emails should be fired off to the store owner.

Good luck to you. Let me know if it works or if you experience problems. This does work on my setup: WordPress 4.3.1, WooCommerce 2.4.6.