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 use AJAX add to cart. Or if you prefer, you can remove the add to cart column completely and list your products without purchase options.
Add to Cart button types
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.
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,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
true to display a quantity box next to the “Add to Cart” button, or
false to hide it.
You can set this option globally on the plugin settings page, or directly in the shortcode for specific product tables.
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 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.
Add Selected to Cart Button
If you use the
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
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.
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.
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:
- 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 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.
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.