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:

• WooCommerce 2.4.10+
• Store Locator Plus 4.4.25+
• SLP Experience Add-On 4.4.05+
• SLP Premier Add-On 4.4.01+

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>

Premier WooCommerce Buy Links On Locations

xperience 4.4.05 Woo Buy Link Layout

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