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.

Check I skip the cart and direct customers straight to the checkout?

Yes, you can do this by using the free Redirection plugin to automatically take customers from the cart page to the checkout:

  1. In WooCommerce > Settings > Products > Display, tick the ‘Redirect to the cart page after successful addition’ box.
  2. Install the Redirection plugin and go to Tools > Redirection. Use this page to redirect the cart page URL to the checkout page on your site.

Whenever a customer adds a product to the cart, they will automatically be redirected to the checkout. This is an easy way to skip the cart in WooCommerce.

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 hide the add to cart/read more buttons for out of stock products?

By default, the add to cart button text changes to ‘Read more’ for out of stock products, and links to the single product page. This is standard WooCommerce behavior and not specific to our plugin. This may not be appropriate if you’re using the single product page.

The only way to change this is to write some custom code. This is outside of our plugin support, but WooCommerce have provided a code snippet to help with this. If you don’t know how to use it then we recommend that you ask your developer or post a job on Codeable.

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