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.

<div id="slp_results_[slp_location id]" class="results_entry">

<div class="results_row_left_column"   id="slp_left_cell_[slp_location id]"   >
<span class="location_name">[slp_location name]</span>
<span class="location_distance">[slp_location distance_1] [slp_location distance_unit]</span>
</div>

<div class="results_row_center_column location_secondary" id="slp_center_cell_[slp_location id]" >
<span class="slp_result_address slp_result_citystatezip">[slp_location city_state_zip]</span>
<span class="slp_result_address slp_result_country">[slp_location country]</span>
</div>

<div class="results_row_right_column location_tertiary"  id="slp_right_cell_[slp_location id]"  >
[slp_location woo_buy_links]
</div>

</div>

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.

<div class="woo_buy_block">
<span class="woo_product_title"> . $woo_title                        . </span> .
<span class="woo_price">         . $woo_product->get_price_html()    . </span> .
<span class="woo_buy_link">      . $buy_link                         . </span> .
</div>'

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.

Search Panel Settings

How SLP Search Works

Store Locator Plus searching can operate in radius or discrete search mode.  The default mode is radius based and is the premise behind much of the operational aspects of the Store Locator Plus plugin.  Additional search features and settings can be obtained through the  Experience Add-on or Professional subscription suite and/or  the Premier /Enterprise Subscription (see below).

Creating A Locator Page

Summary

To create a locator page that has a zip/postal code search box, a map of your locations, and the results list put the [slplus] shortcode on a page or post.

Go to Pages in your WordPress admin.

Create a new page.

Name it “Locations”.

Enter [slplus] in the main content area of the page.

Details

First create a new page for your WordPress site where the Store Locator Plus plug-in will reside. Add the shortcode (a special label inside of square brackets that is used within WordPress pages and posts to display the output from a plugin). You place a shortcode within the text of your page or post and the plugin will “do it’s magic”

Locator Shortcode

To display the Store Locator Plus search form, map, and search results using the defaults you have setup via Map Settings in the admin panel, use the following shortcode:

[slplus]

The base plugin will replace the shortcode with a search form, a Google Map, and a results section below the map.   Depending on how you have the plugin configured the map and results may start by showing some or all of your locations.

  • Hint: Do not copy and paste off this page or all you will see is the text. You must type in the shortcode onto your WP page.
SLP slplus shortcode
SLP slplus shortcode

Additional Shortcodes can be found under the SLP documentation Shortcodes:SLP