An intuitive user experience goes a long way in growing brand loyalty and customer retention in eCommerce stores. If you own an eCommerce store, it is recommended that you monitor and optimize your store for better performance and improved user experience regularly. One such feature that can be useful for customers but not often found in eCommerce stores is the ability to select multiple products while browsing and add them simultaneously to the cart in a single click.
WooCommerce does not have this feature of adding selected products to a cart by default. If you are looking for a way to achieve this nevertheless, you are at the right place as this article will show you how to add selected products to your cart directly in WooCommerce.
Benefits of Adding Selected Products to Cart Feature
There are several benefits in including the feature of adding multiple selected products to the cart directly;
- It reduces the number of clicks and time taken for the user to add more products to the cart while making their purchase.
- If you cater to customers who make more bulk purchases like wholesalers and event organizers, this feature is really useful as the time spent by them in manually adding products repeatedly is saved.
- Allowing multiple products to cart directly is also useful if you are giving offers, upsells, and cross-sells.
- It also simplifies reordering if the customer is buying the same set of products again.
There are two methods that can bring this feature to your WooCommerce store, one involves using a plugin and the other involves using a custom code in your store themes functions.php file.
Method 1 – Using the WooCommerce Product Table Plugin
The first and simpler way to add the feature of getting multiple products in the cart directly is by using the WooCommerce Product Table Plugin. The plugin is available for free in the WordPress plugin repository and let us now see how to use it and add the feature to your WooCommerce store. You can also consider the premium version of the WooCommerce Product Table plugin which unlocks further table customization features.
Install and activate the WooCommerce Product Table Plugin as you would do with any WordPress plugin and open the configuration by navigating to your WordPress dashboard and clicking on the WC Product Tables menu. You will be taken to the product table creation menu which will look like this.
Note that this plugin helps you create a bulk cart-adding feature on a new page for your existing list of products. Click on “Add New Table” to get started.
Columns
There are five sections in the plugin and for creating a product table you mainly need two sections, Columns and Configurations. In the column menu, click on Add Column to choose the attributes of products you want to add to your product list.
Choose the relevant attributes you want to add to your product list from the given list of attributes.
Next move to the configurations section to add other data to your product list.
Configurations
Here you can set the conditions for the products to be displayed in your list.
This helps in grouping just the products you want to allow your users to add to the cart in bulk by selection. You can also exclude products by their tags, ID, etc. Toggle whether you want to display products that are not in stock, sales as well as an “Add All to Cart” button.
Add the data of the products you want to add to your product table and publish the table. Now you will have a shortcode that you can add anywhere on your WooCommerce store.
Copy and paste the shortcode on the page you want your products to be listed in a way that customers can add them to the cart directly with one click. Or you can also create a new page for this product table if it is a product set commonly bought by wholesalers, for example.
For illustration, I have created a separate page with a list of 3 products that can be directly added to the cart without switching to a new page as is usually the case in eCommerce stores. It will look as shown below.
As you can see, this plugin offers an easy way to add multiple products to a cart directly along with the ability to choose the number of individual products with a variety of customization options to further personalize this feature. Let’s check out the other sections with additional personalization to the product table now.
Navigation
The Navigation section allows you to add further elements to your product table. You can add more links in the table such as the number of results per page, category and pricing filters, and sorting options.
Responsive
In the Responsive mode section, you get the option to either make the table automatically responsive or manually.
Design
The Design section has the settings for altering the visual aspects of the table such as the background and border color, width, etc for the table header, add to cart button as well as the table body.
Custom CSS
If you want even more customization of your product table, you can manually enter custom CSS to further personalize it in the Custom CSS section.
The WooCommerce Product Table Plugin is an easy way to link several products directly to the cart. If you are not looking to add a plugin to achieve this feature, read on to see how you can add the option to select and add multiple products to the cart using a code snippet in your WordPress them’s functions.php file.
Method 2 – Customizing the functions.php File
WooCommerce refreshes the page when a product is added to the cart by default. In order to add several products without having the page refreshed, we need to enable AJAX to add to the cart. For this, add the following script to your WordPress theme editor’s functions.php file.
add_filter('woocommerce_loop_add_to_cart_link', '__return_empty_string');
add_filter('woocommerce_product_single_add_to_cart_text', '__return_empty_string');
add_action('wp_enqueue_scripts', function () {
wp_enqueue_script('wc-add-to-cart');
});
This code will add the AJAX add-to-cart mode which bypasses the usual refreshing happening in WooCommerce when a product is added to the cart. This is achieved by asynchronous JavaScript and XML which changes the cart content dynamically in the background without refreshing the page.
Note that you can consider creating the child theme and editing the functions.php file of the child theme instead of editing the parent theme’s file. This way you can make sure that your customizations are not lost when the theme file is updated.
Next, we can add checkboxes to each product by adding the following code to the functions.php file to edit the product loop or product display template.
add_action('woocommerce_before_shop_loop_item_title', function () {
echo '<input type="checkbox" name="product_ids[]" value="' . get_the_ID() . '">';
});
With the above features now added, use the below code to add the cart update button wherever you want it on your store.
echo '<button type="submit" name="add_selected_to_cart" value="1">' . __('Add selected to cart', 'woocommerce') . '</button>';
Lastly, add the below code to the functions.php file to retrieve the selected products and add to cart when “add selected to cart” button is clicked.
add_action('woocommerce_add_to_cart', function () {
if (isset($_POST['add_selected_to_cart']) && isset($_POST['product_ids'])) {
$product_ids = array_map('intval', $_POST['product_ids']);
foreach ($product_ids as $product_id) {
WC()->cart->add_to_cart($product_id);
}
}
});
With these code snippets, you can enable the ability to select multiple products to the cart on your WooCommerce store.
The feature of adding multiple carts simultaneously without refreshing the page improves the user experience of any eCommerce website and you can greatly benefit from adding this simple yet useful functionality to your WooCommerce website by either using the plugin or if you have the technical expertise and the interest, by adding the code snippets given to the functions.php file.
If you have any questions or suggestions, feel free to let us know in the comments.
