Displaying WooCommerce Buy Buttons In Location Lists

The Premier add-on, available exclusively to Premier Subscription members,   allows the Store Locator Plus locations to be associated with WooCommerce products.    You can find details on how to associate the products with the locations in our Associating WooCommerce Products With Locations article.    This article explains how to display products along with a “buy now” link in your Store Locator Plus location results.

Requirements

You will need the following products installed and active on your WordPress site:

Displaying Buy Buttons In Locations

As long as you have WooCommerce installed and activated and the products SKUs you have associated with your locations, Store Locator Plus will automatically output a Buy Now button that is preceded by the product title and pricing any time you use the special [slp_location woo_buy_links] shortcode in your Results Layout or Info Bubble Layout in Store Locator Plus.

The Experience add-on pack provides a setting on the admin interface of WordPress where you can edit the Results Layout and place the WooCommerce product buy buttons anywhere you would like in the results listing.

If a location has multiple products associated with it, the products are listed on-after-another in the area where you put the [slp_location woo_buy_links] shortcode.

The following is a simplified output for the location details that includes the buy button links.

Buy Button Pricing

The pricing for the products will be based on the pricing data provided in the woo_products field for the location.   If only a SKU is present the default pricing for the product will be used.   If a per-location price has been provided for a SKU then the per-location price will override the default price when the item is added to the cart.   See the Associating WooCommerce Products With Locations article for more details.

Styling The Results

In addition to being able to to add your own DOM elements with custom class names and IDs, the Premier add-on also uses a rudimentary span-in-dive layout for the WooCommerce product information.

The default layout is a div of class woo_buy_block followed by three independent spans of class “woo_product_title” , “woo_price”, and “woo_buy_link”.    These divs will be stacked on top of each other within the results layout.

You can  use the CSS Editor provided by the Pro Pack , upload your own custom CSS file to your WordPress theme or the Store Locator Plus plugin directory, or use the CSS Editor that is provided by many WordPress Themes to override the general look-and-feel of the WooCommerce product links presentation in the location results.

 

Related

Associating WooCommerce Products With Locations

Associating Store Locator Plus locations with WooCommerce products is a new feature provided by the Premier plugin for Store Locator Plus.    The Premier plugin is an add-on that is available exclusively to Premier Subscription holders.

In order to activate the WooCommerce product mapping features of the Premier add-on, you will need to WooCommerce installed and activated on your site.    When WooCommerce is installed the WooCommerce modules are automatically activated within the Premier add-on.  You should activate WooCommerce before importing locations with WooCommerce product relations.

Getting Started With Buy Here For WooCommerce

Buy Here For WooCommerce 520x520

Buy Here For WooCommerce is a free WordPress plugin that allows you to associate Store Locator Plus locations with WooCommerce products.   When customers search for physical locations they will see a list of products offered at that location.

This document describes the initial installation and setup for Buy Here For WooCommerce.

Install The Required Plugins

Login to your WordPress site and go to the Plugins / Add New screen.

Search for “Store Locator Plus” from the WordPress Plugin Directory.   Install and activate that plugin.

Search for “WooCommerce” from the WordPress Plugin Directory.   Install and activate that plugin.

Search for “Buy Here For WooCommerce” from the WordPress Plugin Directory.   Install and activate that plugin.

Note: Buy Here For WooCommerce requires Store Locator Plus 4.4.18 or higher and WooCommerce 2.4.10 or higher.  If either are not installed or are not activated the Buy Here For WooCommerce plugin will not activate.

Note: While this plugin is being reviewed by the WordPress Plugin team it can be “purchased” at not cost from the Store Locator Plus store.

Add Locations

From your WordPress admin login go to Store Locator Plus, go to the Locations tab and Add Locations.

Add Products

From your WordPress admin login go to WooCommerce  Products and Add Products.

Connect Locations To Products

While adding a new product, click the Locations panel in the Product Data section.

Start typing the name of a location or the postal/zip code.    When you type the 3rd letter a list of Store Locator Plus locations that match your search will appear.  Select a location that you wish to have associated why the product.

Create A Locations Page

Go to Pages and add a new page.     On that page put the [slplus] shortcode.

Open that page to see your location search form, map, and list of locations.

Locations that have product data associated with it will show the product data under the details column on the right side of the location listing.

BHWC Location Search Results
BHWC Location Search Results

Do More

There are a lot of add ons available for WooCommerce and Store Locator Plus to tailor the user experience to meet your needs.  For Store Locator Plus you may want to start with the Experience add on to customize the look-and-feel of the location listing results.

Related