How to Add ‘Buy On Amazon’ Buttons in WordPress (3 Ways)

Amazon is one of the biggest eCommerce marketplaces both for retailers and wholesalers. Not only vendors and customers but also many affiliate marketers join Amazon to earn commissions by promoting products and services on this platform.

The ‘Buy on Amazon’ button is nothing but a CTA button affiliate marketers add to their websites. Using this button, they can direct users to specific product pages, enabling them to buy products with a single click.

In this article, we’ll show you three easy methods of how to add ‘Buy on Amazon’ button in WordPress. Get ready to explore.

Method 1: Using the Default Buttons Block

The Gutenberg editor comes with a default button block. With this block, you can create and add a well-functional button on your site.

Step 01: Add the Default Button Block to Your Site

Open a post or page where you want to add this CTA button. Click the プラス(+)ボタン on the editor. Find the Buttons block by typing it in the search box. Add it to a suitable place in the editor.

Add the button block to WordPress

The Buttons block is added. By default, it has no text, and it’s left-aligned. Next, we’ll add a CTA copy with a link and align it centrally.

The Buttons block is added

Step 02: Add a CTA Copy and Link to the Button

Place your cursor on the button and type Buy on Amazon. You can bold the text by pressing the Bold option on the toolbar. After that, centrally align the button. You may align it on the left or right as well.

Add a CTA copy and align the button centrally

Add a link to the CTA button by clicking the Link option をクリックしてください。

ボタンにリンクを追加する

Step 03: Customize and Stylize the Buttons Block

You’ll get the 設定 そして Styles tabs on the right sidebar. The Settings tab will let you increase the width of the button block as you need.

Change the width settings of the CTA button

より スタイルタブ, you can change the text そして background color of the button. After that, you you can change the typography, font size, padding, border, そして radius of the button block.

Hope you can do them yourself. Thus, you can create the Buy On Amazon button with this default block.


Method Two: Using the Button (Improved) Block

There are many button plugins online, allowing you to add more features and functionalities to your CTA buttons. アルティメット・ブロック is one of them. It lets you add animation effects to the button and display it whether in horizontal or vertical orientations.

こちらへ プラグイン > 新しいプラグインの追加. Type アルティメット・ブロック in the search box. インストール そして アクティブ化 the plugin. Then follow the steps outlined below.

Ultimate Blocksプラグインをインストールして有効化する

Step 01: Find and Add the Button (Improved) Block

The button block Ultimate Blocks comes up with is named as Button (Improved). Find and add it to the editor.

Add the Button (Improved) block to the editor

Step 02: Add Copy and Link to the Button (Improved) Block

Add the CTA copy ‘Buy on Amazon‘ and a link to the button following the same method described above.

Add a copy and link to the CTA button

Step 03: Configure Settings of the Button (Improved) Block

について 設定タブ on the right sidebar will offer you many options. You can justify the block’s alignment, define its orientation, and choose the size そして width of the button.

Configure settings of the button (improved) block

Step 04: Add an Icon to the Button

Scroll down the tab a bit. You’ll get the option to add an icon to the button. You can also change the button’s position, including its size. You can see below we have added the cart icon to the button.

Step 05: Add Animation to the Button (Improved) Block

Scroll down the tab again a bit more. The Pro option is reserved only for premium users. Once you upgrade to the premium version, you can add animation effects to the button.

After that, you can set to hide this block for specific devices using the レスポンシブ・コントロール・オプション.

Add animation effect to the button

Step 06: Stylize the Button (Improved) Block

に行く。 スタイルタブ. You can select the button color, text color, hover color, button radius, そして layout style.

Stylize the button (improved) block

Scrolling down the tab a bit more, you’ll get options to add button styling そして dimension settings. Do these stylizations yourself. Thus, you can create compelling CTA button with the plugin.

Add button style

Method Three: Using the Tableberg Plugin

テーブルバーグ is a table builder plugin. There are many affiliate marketers who want to promote products through comparisons and product specifications tables. TableBerg could be an ideal plugin for them. It allows you to add CTA buttons to the table.

インストール そして アクティブ化 その TableBergプラグイン.

Step 01: Find and Add the Tableberg Block

The TableBerg plugin comes with a table-builder block. Like any other bock, find the テーブルバーグ block and add it to the editor.

TableBergブロックを見つけて、Gutenbergエディタに追加します。

Step 02: Create Your Table and Add Content to It

Each cell of the table also has the Gutenberg プラス(+)ボタン. By clicking the button, you can add several types of blocks to the table, allowing you to add different types of content. Please explore and do it yourself.

Use TableBerg blocks to create a table and add content to it

You can see that we have created a demo table with the plugin.

Create a demo table with the TableBerg plugin

Step 03: Add CTA Buttons to the Table

を追加する。 ボタンブロック to all the respective cells in the table one by one.

Add the button block to all the respective cells of the table

Next, add the copy ‘Buy on Amazon‘ and customize the buttons. We are not showing the process here again, as we have already explained it in the above two methods.

Add CTA copy and customizations to the button block

Learn ワードプレスで商品スペック表を作成する方法.


結論

Adding CTA buttons to sell Amazon affiliate products isn’t difficult when you have the right tools. While the default block allows you to create mediocre buttons, the other two plugins shown above allow you to create more attractive CTA buttons.

With them, you can improve the shopping experience, increase conversions, and generate income for your site. If you like this article, let us know through the comment box. Plus, if you have any query, also mention it below so we can satisfy you with informative answers.



テーブルバーグ・チーム

早割キャンペーン実施中
これは通知バーのデフォルトテキストです。