SkyVerge WooCommerce Extensions

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:

WooCommerce Product Retailers configuration

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:

WooCommerce Product Retailers Dropdown

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:

WooCommerce Product Retailers Button Display

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:

WooCommerce Product Retailers only external products

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

WooCommerce Color Settings

Customizing WooCommerce Product Retailers

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:

WooCommerce Product Retailers Customization

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.

Published by Beka Rice

Beka leads product direction for SkyVerge and technical documentation. She spends a lot of time on research and interviews, but likes to write so she has an excuse to spend more time jamming out to anything from The Clash to Lady Gaga.

36 Comments

  1. Hi I wish there was a demo, it is hard to figure how an external site can be paid on my site

    • Hey there, the external site isn’t actually paid on your site. The button on the product page will send people elsewhere to purchase. If you’re using an affiliate or referral link, you usually get a commission for sending someone to purchase the item (for example, you can use an affiliate link for Amazon to send someone to purchase your Kindle book). Hope this clears this up!

  2. So would this be the plugin to use if you are looking to use a wooCommerce “Add-to-cart” button on a separate website? Similar to the paypal method of simply adding an “Add-to-cart” button to any website. If not, is there such a plugin available?

    • Hey there, this only works on your own site to send customers to an external site to purchase. If you’d like to have someone add a button back to your store from another site, you’ll want to use an Add-to-Cart URL. This tutorial on creating pricing tables explains how to get an add-to-cart link as a part of the tutorial, and it would be up to you (or the other site) to use this for a button.

      • Hey Beka, thanks so much for the reply. I will dig into that more to see if it will work for my client. On a separate note, after looking around your website, I would be interested in learning more about your consulting services. I’ve been using wooCommerce for several months now and I love it, but tend to get hung up from time to time and usually wind up with some half arse solution, or a mildy disappointed client. Do you have a separate email I could contact you at to maybe discuss things a bit more?
        Thanks!

  3. This thread is helpful, but some video would really benefit the visual learners. =)

    For a brand new project, I am currently using a different plugin to list affiliate products (from Amazon) and provide a Buy button that takes users to Amazon for those products. I am trying to find a better way to accomplish the objective of allowing customers to buy BOTH in-store products and Amazon products with as little disruption as possible,

    The biggest problem I have is that move to the Amazon product is not in a new window and provides no way to return to my site. At the least, I would like the Amazon link to open in a new window and leave my window open. The best solution would be a tool that allows users to add all products to the cart and then have them check out twice. Is there a way to utilize this tool to get closer to that outcome?

    Thanks very much.

    • Hey Jamie, our plugin will definitely allow you to see both affiliate products and your own (more aligned with your first thought, but not the second). You can force all Product Retailers links to open in a new tab under the WooCommerce product settings when the plugin is active – we have a screenshot for settings in the documentation that shows how to do it 🙂 .

  4. Great extension for my client. Just wondering if there is a way to code so affiliate links open in a new window or tab.

  5. How in the world did I miss this? Thanks! I guess I thought it wouldn’t be that simple. One more feature that makes this a great extention.

  6. Would like to know if its possible to change the retailers check out buttons with custom images instead of the simple checkout buttons. So each retailer added to a product could get its own image.

    Would like to end up with something like that:
    http://thesolesupplier.co.uk/products/hal-x-adidas-eqt-running-guidance-93/

    A grid of logos for the external linked retailers.

    thanks in advance

    • Hey Roman, I’m afraid that this could be accomplished with custom code, but there’s not really an easy way to do so. The retailers are all added as buttons, and while there’s a filter to change the button text, there’s not an easy way to change the entire retailer output (nor are there specific CSS classes for each retailer). You’d probably have to use a companion plugin to add a logo or something to each retailer, then output this along with the button.

      • I also need to add custom images per retailer button. Some retailers like Amazon have familiar button styles that are sure to convert more clicks than a plain button with text.

  7. Hi Beka,

    When using the Retailers Only Purchase feature, do you know if this extension allows for a way to require account registration before a purchase is made from an affiliate link? With the store ‘turned off’ visitors have access to the purchase options without registering an account, thus losing potential list building opportunities. Looking for a way to acquire a ‘customer mailing list’ through this extension.

    • Hey Scott, the retailers buttons only act as a typical affiliate link – the customer is sent to the retailer site with your referral link, so there’s not really a way to gather any information from the customer here. The customer never goes through your checkout or account registration process, as they’re sent directly to the retailer with your referral.

  8. Thanks for your reply. This confirms what I suspected, but thought it was worth asking just in case I missed something. And it will help my client understand the benefits of selling product through his own store in addition to retail affiliates.

  9. Hello Beka Rice,

    Here is my situation, take a look at amazon website. When you purchase a products at the cart session, you get options for other sellers selling the same products or other products, you can click on the sellers and see their products and even review the sellers, based on the review and the price of the products, you can now compare and choose who to buy from.

    Can I achieve this with the woo commerce extension? I want people to view my site, when buying the product in the cart session, they should see other sellers selling the same products or other products being sold by sellers, check the sellers and products review, all within my website. I dont want a link that will take them to another website. Please help

  10. Hi, is there a way to get a link for a product via shortcode using your plugin? I think that your product could fit for my website, but I need to add products links directly from posts or other products. If I add a “product A” as woocommerce product, then can I link directly to this product while I’m writing a post or a description in other products?

    Thank you in advance,

    S.

  11. It’s the first time then I am interested in affliates programs and I am sorry if my questions are very basic, but I can’t find answers to them.
    I would like integrate WooCommerce product retailer plugin to my website but I can’t understand how does it works: how could I control the quantities of the retailers products if I would like to use function which enable directly payment in my site? How does it work directly payment in the site: the money have to go to retailer’s account and only the percents is going to website (if the answer is yes, where and how to set up different retailers accounts?) How could I control behaviour of the customer in the retailers websites if I direct customer to their websites, how could I know how many items retailers sold because of my direction? How could I control products links, if the products are out of stocks in the retailers website, if I have all time, by myself, looking products links or computer shows errors what some links are missed?

    Thank you in the advance for the answers.

  12. Hi is there a way to show the external links when the product is not available?.
    if the product is not in stock (stock = 0), then the product details page will show 2 links

    • Hey Patrick, not yet but we’re already working on this feature :). It’ll be merged and released once the teammate who’s working on this is back from holiday.

  13. Hey Beka,

    Are there any plans to support product variations with retailers? I’m trying to add a 100% affiliate based shop to a blog. The shop will focus on selling beauty products.

    A good example would be a lipstick which comes in 28 different shades. I would like to be able to redirect my users to the correct product pages on other sites after choosing the color they like.

    Since their are so many variations it’s not really an option to add all 28 shades as separate products.

    • Hey Wesley, we do have this on our idea board, so I’ve added your vote for it 🙂 We have a couple other updates and rewrites we’re working on currently, but I’d anticipate us starting on this in the fall.

  14. Love the plugin. It’s just what I need to show multiple options for affiliate partners. Only thing is when I update the products with the vendor option they don’t seem to show up in my shop and category archive. Any idea what I’m doing wrong?

    • Figured it out, I had edited by content-product.php file from <a href="”>
      to <a href="get_product_url() ) ?>” target=”_blank” rel=”nofollow”> in order to go directly to the affiliate page.

      Is there a way to still go to the first retailer on the list and still have the plugin work? I also have an icon that still goes to the individual product page. If not, is there a simple way to remove the retailer button on the shop & category archive pages with css?

      • Hey Laura, are your referring to using the “Add to cart” button for the first retailer? I’m afraid this isn’t possible with the plugin alone, but you could do so via custom code.

        Hiding this button with CSS would most likely depend on your theme. This may work: ul.products li.product .add_to_cart_button { display: none; }, but if not I’d ask the theme author which class to target.

  15. is it possible to modify the plugin so that retailer is applicable only on certain variations while other the others remain purchasbale from the site?

    • Hey Alan, it’s not possible with the plugin as-is, but it could certainly be modified to do what you’re asking with custom code.

  16. Hi Beka,

    I’d like to track customers who made purchase via my link. Meaning I need the client to register on my site before clicking the retailer link and if possible to log some additional purchase about the item being bought.

    Is there a tweak that could make this possible.

  17. Do you know if i can envoke the PR buttons though PHP code?

  18. Great Post Beka.
    Any ideas, what settings to change in wordpress woocommerce, if I do not want product pages . Like when ever someone clicks on product they are taken direct to Amazon or other affiliate website like here :

Hmm, looks like this article is quite old! Its content may be outdated, so comments are now closed.