Tiny shopping cart holding a twenty-dollar bill near a laptop

Change WooCommerce Product Retailers Buttons

CommerceCategory
6 min read
Beka Rice

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:

retailers added

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.

Retailers name 2

I’d like to use more descriptive labels than just the retailer name. I could edit retailer names to do this, or I can change the button text programmatically instead so that I don’t have to change retailer names.

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 front end.

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:

/**

* Add as many cases as needed; this will change all button labels for a retailer

* NOTE: this will only work if the product has >1 retailer (multiple buttons)

**/

function godaddy_change_retailer_button_labels( $label, $retailer, $product ) {

switch ( $retailer->get_name() ) {

case 'Amazon':

$label = 'Buy Paperback at Amazon';

break;

case 'Kindle':

$label = 'Buy Kindle Edition';

break;

case 'iBooks':

$label = 'Buy iBook';

break;

default:

return $label;

}

return $label . ' - $' . $retailer->get_price();

// Use your currency symbol intead of $ if different from US dollars


}

add_filter( 'wc_product_retailers_button_label', 'godaddy_change_retailer_button_labels', 10, 3 );

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:

Retailers name 2

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.

/**

* Changes the retailer button label based on the product id

* Works when product displays >1 retailer buttons

**/

function godaddy_retailer_buttons_per_product( $label, $retailer, $product ) {

$name = $retailer->get_name();


if ( $name == 'Amazon' ) {

switch ( $product->id ) {

case '214':

$label = 'Buy Paperback at Amazon';

break;

case '152':

$label = 'Shop Amazon Shoes';

break;

default:

return $label;

}

return $label . ' - $' . $retailer->get_price();

// Use your currency symbol intead of $ if different from US dollars

}

return $label;

}

add_filter( 'wc_product_retailers_button_label', 'godaddy_retailer_buttons_per_product', 10, 3 );

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.

/**

* Changes the retailer button text based on product category

* Works with >1 buttons per product

**/

function godaddy_change_retailer_buttons( $label, $retailer, $product ) {

$name = $retailer->get_name();

// Use the retailer name whose buttons you'd like to change

if ( $name == 'Amazon' ) {


// Use your product category slugs to set new labels

if ( has_term( 'Books', 'product_cat' ) ) {


$label = 'Buy Paperback at Amazon';

} elseif( has_term( 'Shoes', 'product_cat' ) ) {

$label = 'Shop Amazon Shoes';


} elseif( has_term( 'Jewelry', 'product_cat' ) ) {

$label = 'Shop Amazon Jewelry';


} else {

return $label;

}


return $label . ' - $' . $retailer->get_price();

// Use your currency symbol intead of $ if different from US dollars

}

return $label;


}

add_filter( 'wc_product_retailers_button_label', 'godaddy_change_retailer_buttons', 10, 3

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.