How to insert a Button inside a Cell of an Elementor Table?

A product or plan table converts better when each row has its own call to action, right next to the price.

The Table widget from The Plus Addons for Elementor can add a button to any body cell, with its own text and link.

To check the complete feature overview documentation of The Plus Addons for Elementor Table widget, click here.

Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.

Before You Start

• Edition: Free — this works in the free plugin; Pro is not needed.
• Widget to enable: Table, switched on under The Plus Addons > Widgets.

How to Add a Button to a Cell

1. Add the Table widget and keep Content Table set to Custom.
2. Open Table Body and click the cell item that should hold the button. Its Action must be Cell Content.
3. On the Content tab, switch Button to Show.
4. Type the label in Button Text (default “Click here”) and the address in URL/Link. Open the link options of that field for Open in new window and Add nofollow.

On the page, the button fills its cell like this:

Add Custom Attributes

Turn on Add Custom Attributes to add attributes such as tracking data to the button link.

• With Pro active, type the attribute the way it is written in HTML: data-product="desk-lamp". In our test the Elementor style data-product|desk-lamp produced a broken attribute.
• In the free plugin, use key|value, one per line. Attributes such as onclick, id, class, href and style are ignored.

Link a Whole Cell Instead

To make the cell text itself clickable, fill in Link on the same Content tab instead of using a button. The link wraps the cell text and follows the same new window and nofollow options.

Style the Buttons

Go to Style > Table Body. Below the row settings you find the Button options: Button Padding, Button Width, typography, text and background colours, border and radius, each with a hover state. The style applies to all buttons in the table.

Limitations

• Button Style has one choice, Style 1: an outlined button. With Pro active it also had a shadow in our test; in the free plugin it had none.
• Buttons are only available for the Custom source, not for CSV File, Google Sheet, Plus Form or SQL Query tables.
• Header cells have no button option.

Troubleshooting

My custom attribute does not appear

Check the format for your edition above. With Pro, name|value does not work; write name="value".

The button does not open a new tab

Open the link options of URL/Link and tick Open in new window.

Related Docs

• Table widget settings overview
• Insert images in table cells
• Limit the number of rows in an Elementor table