Add to Cart buttons
The WooCommerce Product Table plugin lists products in a table with an optional add to cart column. It 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 reload the page after adding products to the cart. Or if you prefer, you can remove the add to cart column completely and list your products without purchase options.
Add to cart options
Choose a type of add to cart button (buttons and/or checkboxes)
The cart_button option controls how the Add to Cart buttons are displayed in the product table. This option only applies when using the buy 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.
You can set this option globally on the plugin settings page, or directly in the shortcode for specific product tables. For example:
[product_table columns="name,price,buy" cart_button="button"]
[product_table columns="name,price,buy" cart_button="button_checkbox"]
[product_table columns="name,price,buy" cart_button="checkbox"]
Show or hide the quantity picker
By default, the Add to Cart buttons appear in the table without a quantity selector. You can set quantities to true to display a quantity box next to the “Add to Cart” button, or false to hide it.
Example: [product_table quantities="true"]
- For more information, please see the full documentation for the quantities option.
- If the quantity selector isn't working, please read our article about quantity problems.
AJAX add to cart or page reload?
The plugin fully supports AJAX add to cart behavior, 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 on the plugin settings page or add 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"]
Tip: If you are adding multiple product tables to the same page and are using the add to cart checkboxes, then we recommend disabling AJAX add to cart. When AJAX add to cart is disabled, customers can select products from multiple tables on the same page and use any of the 'Add Selected to Cart' buttons to add ALL the selected products to the cart at once. This isn't possible when AJAX add to cart is enabled.
Customize the 'Add Selected to Cart' button
Want to learn more about customizing WooCommerce Add to Cart button? Check out this in-depth guide: How to customize add to cart button in WooCommerce
If you use the checkbox or button_checkbox add to cart button styles, then an "Add Selected to Cart" button will automatically display above and/or below the product table.
Customers use this button to add the selected products to the shopping cart after ticking the checkboxes. You can control the location of this button on the plugin settings page, or using the add_selected_button option directly in the shortcode. The options are top, bottom or both. The default option is top, which displays the button above the table.
For example, the following shortcode will position the "Add Selected to Cart" button below the table:
[product_table cart_button="checkbox" add_selected_button="bottom"]
How to hide the 'Add Selected to Cart' button
The 'Add Selected' button will appear automatically if you have selected the add to cart 'checkbox' or 'button_checkbox' style, as this is needed to add the selected products to the cart. If you change the add to cart button style to 'button' then the Add Selected buttons will disappear.
There's also a CSS selector that you can use to hide the buttons in our developer documentation.
FAQ
Can I automatically redirect customers to the cart?
Yes, 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 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:
- In WooCommerce → Settings → Products → Display, tick the 'Redirect to the cart page after successful addition' box.
- 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 customers select products from multiple tables, and add them to the cart at once?
Yes, you can do this by disabling the AJAX add to cart option. That way, customers can use the add to cart checkboxes to tick products from more than one table on the same page, and use any of the 'Add Selected to Cart' buttons to add all the selected products to the cart together.
If AJAX add to cart is enabled, then unfortunately this isn't possible because then each table operates independently from the others on the page.
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 customizable 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 the WooCommerce Product Table 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.
Can I remove the add to cart buttons from the table?
Yes, all of the columns in WooCommerce Product Table are optional. When you choose your columns using these instructions, simply don't include an add to cart column. This will remove the add to cart buttons from the table.