SkyVerge WooCommerce Extensions

One of my favorite features of WooCommerce Product Retailers is that you can display retailer purchasing options with buttons on your product pages. This lets you list a product in your own store (or not if you don’t want to sell it yourself), and use your referral links elsewhere to generate revenue. Having buttons on your product page lets customers see all purchasing options at a glance and select where they’d like to buy from.

When you add retailers to your store, you probably add them based on the retailer name:

WooCommerce product retailers list

However, what you may not realize is that whatever the retailer name is set as will be what’s shown in the dropdown or buttons on the frontend.

WooCommerce Product Retailers buttons

I’d like to use more descriptive labels than just the retailer name. I could edit retailer names do this this, or I can change the button text programmatically instead so that I don’t have to change retailer names. If you’ve never added custom code to your site before, we recommend reading this tutorial as well to see how it’s best done.

Note that this tutorial will work if you display retailers using buttons, but not if you use the dropdown option.

Change WooCommerce Product Retailers Button Labels on All Products

Let’s assume that you want to change the way all retailers are displayed in your store. You can do this by searching for the retailer name, then replacing it on the frontend.

This snippet is purely cosmetic, but it’s up to you if you want to use it. You can achieve the same thing by renaming your retailers and using the button text you’d like to display as the name. However, some people don’t like cluttering up the admin like this, so this snippet will adjust the button text based on the retailers selected. We’ll use the wc_product_retailers_button_label filter to do so.

Let’s get our retailer name, then change the button label based on the retailer. You can add as many cases as you need to in this snippet:

Note that our filter isn’t quite as flexible as it could be, so we need to re-add the price to our label if it’s been changed. We’ll have to manually include the currency symbol, so I’ve included the HTML dollar sign, which you may need to change based on your currency.

Once we’ve done this, our retailer labels will now be changed on the frontend if they’re included in our code snippet:

WooCommerce Product Retailers new buttons

New Button Labels

Change WooCommerce Product Retailers Button Labels for Specific Products

While the above snippet is mostly based on our preference, there are some other great use cases for changing the button label. Let’s first change the label based on which product is being viewed, then focus on changing it for a product category.

This is really helpful if one of your retailers is a do-it-all shop like Amazon. Rather than adding Amazon as a retailer more than once with different text for your WooCommerce Product Retailers buttons, we can add Amazon as a retailer once, then change the text for Amazon depending on which product we’re viewing.

To do so, we’ll check first that the retailer is Amazon, then we’ll check for the product ID (this post can show you how to find it). We’ll change the label based on which product is being viewed by using the ID. If the product is one of my IDs specified, it will have a custom label for Amazon. If not, then just the retailer name will be displayed.

You could do this for another retailer by duplicating the entire if ( $name == 'Amazon' ) part (including the switch and cases), and including this if statement above the last return $label; within this function.

For product 214, which is my book, I’ll use a custom label:

WooCommerce Product Retailers new buttons

New Button Label

The same thing will happen for product 152:

WooCommerce Product Retailers new buttons

New Button Label

However, all other products will have an Amazon label that’s unchanged.

WooCommerce Product Retailers default buttons

Default Button Label

Change WooCommerce Product Retailers Button Labels Based on Category

If you have a lot of products, you may want to do this based on category instead. We can achieve the same result as the snippet above (button text that’s conditionally changed), but we can use the product category for our criteria.

We’ll use an if / elseif loop here to check for our product categories. If the retailer is Amazon and the product is in one of our designated categories, the button label will change. You need at least the first if statement and the else statement, but you can add elseif checks to check for more product categories.

When we do this, we’ll achieve the same result as our product-based snippet above: the WooCommerce Product Retailers button text will change based on our conditions.

Now go and make more descriptive button labels 🙂 .

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.

2 Comments

  1. Hi Beka,

    This was very helpful however I am checking If I can include retailer logo so the same is display on comparison page. Also if I can put a sorting order based on the price?

    Thanks,
    Ajit

    • 1) Retailer buttons can’t get include a logo / icon, but we have this on our idea board, so I’ve added your vote!
      2) You can drag and drop retailers to display them in the order you want to on the product, so while adding the prices you can do this.

Comments are closed.