Indigo

Have you ever wanted to show your WooCommerce store visitors different products based on their geolocation? Now you can with the Logic Hop WooCommerce Add-on!

Decrease bounce rates and increase conversions by showing visitors relevant content that entices clicks. And it’s not just geolocation – With Logic Hop you can show products based on:

• Time of day
• Referring site
• Social media posts
• Display & PPC ad variations
• And a whole lot more!

How to Personalize Your WooCommerce Homepage

In this tutorial we’ll show you how to quickly and easily personalize WooCommerce sites using any theme that supports the homepage action – You’ll find this homepage action functionality in the Storefront theme or any Storefront child theme as well as a number of other WooCommerce compatible themes. Don’t worry, if you’re using a different theme you can still personalize your site!

Be sure to follow along in the tutorial video below.

Storefront Widget Magic

The Logic Hop WooCommerce Add-on automatically adds a new Storefront homepage content module called Storefront Homepage Widget Area and it does exactly what the name implies, adds a widget area as a content module on your homepage. Why is this important? Because Logic Hop makes it super easy to personalize your site with Conditional Widgets – Simply select the condition that determines when to display the widget.

What condition is your condition in?

The best way to think about conditions is that they’re like questions, such as Is the visitor in California? or Did the visitor click our Google Ad about cats?

Getting Started

Of course you’ve already installed Logic Hop and our WooCommerce Add-on. Easy peasy.

We’re also going to use two other popular, free plugins, which you may already have installed:

• Homepage Control
  • Let’s you enable, disable and re-order homepage modules
    • Recommended by WooCommerce
• TM WooCommerce Package
  • Provides a WooCommerce products by categorywidget
    • You could also use almost any other WooCommerce widget if you prefer

Conditions? There’s a recipe for that

For this tutorial we’re going to create three conditions:

1. Is the visitor in California
2. Is the visitor in Florida
3. Is the visitor not in California or Florida

You can start to see the logic here, and really this is the perfect way to work through personalization scenarios. Ask the questions to formulate the logic which will display your content.

For our tutorial we want to show California sports team t-shirts to people in California.

Is the visitor in California?

And we want to show Florida sports team t-shirts to people in Florida.

Is the visitor in Florida?

And we want to show our other products to everyone else.

Is the visitor not in California or Florida?

Hint: An even easier way is to ask us – We’re happy to help you work out your personalization needs. We’ll help craft what you need and send you the conditions as an easy-to-add Logic Hop Recipe.

Speaking of recipes… Download the recipe for this tutorial if you want to skip the step-by-step condition creation process. ?

Let’s get this personalization party started!

Step 1

• Navigate to Logic Hop > Conditions in your WordPress Dashboard
• Add a new condition titled Is the visitor in California
• Add the following Condition Statements
  • [ If ] [ Location State/Region Code ] [ Is – Case-Insensitive ] [ ca]
    • In the Value field type: ca

Now let’s add the next condition, which is pretty much identical to the first:

• Add a new condition titled Is the visitor in Florida
• Add the following Condition Statements
  • [ If ] [ Location State/Region Code ] [ Is – Case-Insensitive ] [ fl ]

Simple right? And remember, if you downloaded the recipe for this tutorial, all of these conditions are created automatically.

Now we’ll add the final condition. This is the important one that will display content if the two previous conditions were not met – If the visitor is not in Florida or California.

• Add a new condition titled Is the visitor not in California or Florida
• Add the following Condition Statements
  • [ If ] [ Location State/Region Code ] [ Not In List – Case-Insensitive ] [ ca,fl ]

What’s nice about this is by using a comma-separated list we can combine multiple values into one condition statement. So you’re probably already thinking can I use this to show products based on people in multiple states, and the answer is yes!

Step 2

Now that our conditions are in place, let’s navigate to our WooCommerce Products and create two new product categories – One named California and the other, Florida. Then go ahead and add at least four products to each.

Step 3

With products assigned to our two new categories we can navigate over to Appearance > Widgets.

• Add a TM Products Carousel Widget to the Storefront Homepagewidget area
  • Set the title to What’s up Cali?
  • Under Filter by Category select California
  • Uncheck Description, Tag, Category & arrows
  • Check Pagination
  • Under Display if Logic Hop Condition is select Is the visitor in California
• Add another TM Products Carousel Widget
  • Set the title to What’s up Sunshine State?
  • Under Filter by Category select Florida
  • Uncheck & check the settings as before
  • Set Display if Logic Hop Condition is to Is the visitor in Florida
• Add a final TM Products Carousel Widget
  • Set the title to Featured Products
  • Under Filter by Category select All
  • Uncheck & check the settings as before
  • Set Display if Logic Hop Condition is to Is the visitor not in California or Florida

Step 4

Now that our conditions are in place, our products have been added to the categories and we’ve created our Conditional Widgets we can move on to the final step.

• Navigate to Appearance > Customize
• Click on the Homepage Control option
• Check Storefront Homepage Widget Area to enable it then move it beneath Storefront Homepage Content
• Uncheck the other content areas to hide them
• Click Publish

Finished!

With everything in place now we can see our personalization in action – Just open your homepage in a browser. What do you see? If you’re in Florida or California you’ll see the title and content for that state. If your not in either you’ll see the default products. Ok we’re done!

Wait a minute… What if you want to see the other personalizations? Easy – Just go to California and Florida! Just kidding. ? Now while that may be fun it’s not really practical… Here’s an easy way to preview your site from other locations:

• Visit ShotSherpa.com
• Click Pick Your Own Safari
• Click Clear All then select the following under North America:
  • Los Angeles, United States
  • Manhattan, United States
  • Miami, United States
• Close the customize window
• Enter your URL in and click Adventure Time

There you go! You’ll see screenshots of your website from each location.

But wait, there’s more!

Personalizing your WooCommerce products based on geolocation is just the tip of the iceberg. Let’s say you had a social media post congratulating the New England Patriots. You could certainly target visitors in New England states, but you know some of those people are bound to be Giants and Jets fans. You certainly wouldn’t want to alienate your customers!

Rather than use geolocation you could use a query string variable and add it to the link in your post, such as:

https://your-site.com/?team=patriots

And instead of using our Is in state condition, you’d create a condition like:

• [ If ] [ Query String ] [ team ] [ Is – Case-Insensitive ] [ patriots]
  • In the Variable field type: team
  • In the Value field type: patriots

Every time someone visits your site with that query string in the URL they’ll see your Patriots products. This is perfect for:

• Social media posts
• Display & PPC ad variations
• Facebook retargeting
• Email segmentation

The possibilities for personalization are endless! And you know, sometimes having all those options might seem a little bit daunting… That’s where Logic Hop comes in. We’re happy to help you come up with personalization solutions that work for your content. Just drop us a line or book a time with us and we’ll help work out personalizations for your website!

Tutorial Video

Not Using Homepage Actions?

Homepage Actions can be easily added to any theme. Check out these simple instructions on how enable it for your theme. You can also use the techniques from this tutorial with any widget area on your site.

Looking for other ways to add personalization? Be sure to check out our Logic Blocks which support all of the WooCommerce Shortcodes.