1. Home
  2. Knowledge Base
  3. WooCommerce Product Table
  4. Product Table Shortcode Options
  5. Add to Cart buttons

Add to Cart buttons

WooCommerce Product Table comes with several options to control how Add to Cart buttons appear in the table. You can choose buttons or checkboxes, show or hide the quantity selector and whether or not to use AJAX add to cart.

Add to Cart button types

The cart_button option controls how the Add to Cart buttons are displayed in the product table. This option only applies when using the add-to-cart column in your table.

There are 3 options:

  • button – The default option. Displays the standard add to cart button for each product, or if the product cannot be purchased (out of stock, grouped product, etc), then a Read More or View Products link is displayed.
  • checkbox – Displays the checkbox on its own without the add to cart button.
  • button_checkbox – Displays the same add to cart button with an additional checkbox next to the button which allows the customer to select multiple products in the table. To add them to their cart, they click the ‘Add Selected to Cart’ button above the table.

Examples:

[product_table columns="name,price,add-to-cart" cart_button="button"]
[product_table columns="name,price,add-to-cart" cart_button="button_checkbox"]
[product_table columns="name,price,add-to-cart" cart_button="checkbox"]

Show or hide quantity

By default, the Add to Cart buttons appear in the table without a quantity selector. You can set show_quantity to true to display a quantity box next to the “Add to Cart” button, or false to hide it.

Example: [product_table show_quantity="true"]

If the quantity selector isn’t working, please read our article about quantity selector problems.

AJAX add to cart

The plugin fully supports AJAX add to cart behaviour, including both for individual products and when adding several products using the ‘Add Selected to Cart’ button. AJAX is enabled by default.

If you wish to disable AJAX functionality, set the option in the plugin settings page or use ajax_cart="false" in your shortcode. If disabled, the page will reload each time the customer adds a product to the cart.

Example: [product_table ajax_cart="false"]

Add Selected to Cart Button

If you use cart_button="checkbox" or cart_button="button_checkbox", the table will automatically display an “Add Selected to Cart” button above the table.

Customers use this button to add their selected products to the shopping cart after making their selection. You can choose the location of this button using the add_selected_button option. The options are top, bottom or both. The default option is top, which displays the button above the table.

For example, to display the “Add Selected to Cart” button below the table:

[product_table cart_button="checkbox" add_selected_button="bottom"]

Can I automatically redirect customers to the cart?

WooCommerce automatic redirect to cartYes, WooCommerce has a setting to immediately redirect customers to the cart page after adding products to the cart. For example, this can be useful if you’re using add to cart checkboxes, as customers can add multiple products and immediately be taken to the cart.

Activate this feature by going to WooCommerce > Settings > Products > Display and ticking the ‘ Redirect to the cart page after successful addition’ box.

Can I add a button linking to the single product page?

Yes! There are 2 ways to do this:

  • If you’re using variable products and haven’t enabled variations in the product table, then the ‘add to cart’ column will change to ‘Read More’ and link to the single product page.
  • You can also add a button column instead of (or as well as) the ‘add to cart’ column. This adds a customisable button linking to the product detail page.

Can I add other types of buttons?

It’s also possible to add other types of link or button to the product table. For example, you might want to add icons linking to downloadable files, or a button linking to an enquiry form.

You can achieve this by adding the buttons within a custom field and displaying it in the table. Please see our article about how to do this.

Was this article helpful?

Related Articles