Using and Customizing the WooCommerce Product Retailers Extension May 27 2014

We sometimes get requests or questions from customers on how to tweak our WooCommerce extensions. Today we’re going to walk you through some settings and tweaks for the WooCommerce Product Retailers extension.

Why WooCommerce Product Retailers?

Let’s pretend that you own a book store and sell some popular books via orders that you fulfill yourself. You simply list some of your inventory online and ship right from your store.

However, you could be making more money with these listings if you can also sell these products as an affiliate. For example, customers could purchase the book from you, but Amazon may have a lower price. They’ll find this out anyway, and purchase from Amazon.

Why not give customers the option to purchase from you, or send them to Amazon yourself? This way, you can use your Amazon affiliate link, and get a commission for a sale you would have otherwise lost. This is also handy for listing eBooks and other versions of a product you can’t sell yourself.

You can even extend this out and list products in your catalog that you sell solely as an affiliate, as well as gain the ability to link to multiple sources rather than be limited to using one affiliate link for each of these external products.

That’s what the Product Retailers extension is for.

Using WooCommerce Product Retailers

There are a few ways you can use WooCommerce Product Retailers to sell both your own products and to link to external products as an affiliate. We’ll cover a few configurations here.

First, Product Retailers supports both simple and variable products. However, it does not dynamically display retailer options based on which variation is selected. Using our book example, let’s say you sell both a paperback and hardcover edition. When a customer selects a variation, they’ll be able to purchase from you, or will view all retailer purchasing options. However, retailers cannot be displayed based on which variation is selected (i.e., retailers only displayed when certain variations are selected).

When you start using Product Retailers, you’ll enter retailers under WooCommerce > Retailers. Whatever you enter for the “Name” will be displayed on the product page as a dropdown option or a button (depending on how you’d like this displayed). Set up some retailers, and the URL to the homepage for that retailer with your affiliate link.

Once retailers are entered, you’ll be able to add them to products. Product Data will have a new Retailers tab for you to add this information. If you add retailers to a product, they’ll be displayed as purchasing options in addition to your own store’s purchasing options. Let’s pretend for now that you’ve selected retailers and entered pricing and your affiliate link for a product, but have not selected any other options:

Configure Product Data

Your product will be displayed with the purchasing options available at your store, but will also display a dropdown of the external retailer options as well:

Easy enough, right? Customers can choose to purchase from you, or to visit another retailer. Once they’ve selected another retailer, they’ll be sent to the URL you entered for that product (or the general affiliate URL if you haven’t entered one specific to this product), and you get a commission on a sale you otherwise would have lost.

Don’t want to use a dropdown? Enable the second option titled “Use Buttons”. This will show a button for each retailer, using the retailer name as text and the price you’ve entered:

Finally, you can also list products that you solely sell as an affiliate. If you enable the first option for a “Retailers Only Purchase”, this will hide the WooCommerce Quantity and Add to Cart options. Only the retailers dropdown / buttons will be displayed on the product page:

Note that you must have the product set as a “Simple Product” for the Retailers Only Purchase to work, as otherwise customers will have no way to select the variation and force the buttons / dropdown to be shown.

Customizing WooCommerce Product Retailers

Product Retailers buttons will inherit the button and dropdown styles set by your theme and by WooCommerce, but they do have their own class so you can modify the way they look if you choose. If your theme doesn’t modify the WooCommerce buttons, your Product Retailers buttons will use the same colors and styles as the default WooCommerce buttons (such as the “Add to Cart”).

If you adjust the default WooCommerce styles under WooCommerce > Settings > General, WooCommerce Product Retailers will adopt the same color scheme. For example, take a look at the settings I’ve changed below, and how they’re reflected on my product page:

 
 

WooCommerce Color Settings

Changing Buttons with WC Settings

You can customize a little bit about your buttons by tweaking their CSS. We covered some CSS basics and how to make a child theme when we talked about customizing the WooCommerce Product Documents extension.

In your child theme’s stylesheet, or using a CSS editor (i.e., the “Edit CSS” function in Jetpack), you can change your retailer buttons by targeting the .button.wc-product-retailers class. Let’s say I want to change only the color of my Product Retailers buttons, but not the color of my other WooCommerce buttons. Add some CSS for the background color of the .button.wc-product-retailers class, border color, font color, and anything else you want to change. You may need to add !important if your child theme stylesheet is loaded before the WooCommerce stylesheet and your changes do not show up:

.button.wc-product-retailers {
	background: #005dab !important;
	border-color: #383839 !important;
	color: #f7f7f7 !important;
	margin-bottom: 3px !important;
}

Adding this bit of CSS changes my product retailers buttons only, but leaves the WooCommerce styles intact:

Change only Retailer Buttons

This covers pretty basic usage of the extension, but a bit more knowledge about the actions added to the WooCommerce product page could allow you to add retailers before WooCommerce “Add to Cart” buttons, change the button display further, and more.

The post Using and Customizing the WooCommerce Product Retailers Extension appeared first on SkyVerge.