How to Allow Customers to Set a Global Quantity on WooCommerce Products
As an ecommerce store owner, providing a seamless and personalized shopping experience for your customers is essential. One feature that can enhance their experience is the ability to set a global quantity for all products they wish to purchase.
In this article, we'll explore how to create a custom feature that allows customers to set a specific quantity amount for all products on your WooCommerce store. This can be particularly useful for customers who frequently purchase the same items in bulk or have a preferred quantity they like to order.
Implementing the Quantity Adjustment Shortcode
To get started, we'll create a custom shortcode that displays a form for customers to input their desired quantity. This shortcode can then be placed on any page or post where you want the quantity adjustment feature to appear.
Here's the code that implements the shortcode:
if( ! function_exists('set_bulk_product_quantity') ) {
function set_bulk_product_quantity() {
$bulk_qty = WC()->session->get( 'bulk_qty' );
if( empty($bulk_qty) )
$bulk_qty = '0';
$label_name = __('Set Products minimal Bulk Quantity ', 'woocommerce');
$submit_button = __('Set quantity', 'woocommerce');
$reset_button = __('Reset', 'woocommerce');
$style = 'style="max-width:80px;text-align:right"';
return '<form id="bulk_qty" method="post" action="">
<p class="form-row form-row-wide" id="bulk_product_quantity_field">
<label for="bulk_qty">'.$label_name.'</label>
<input type="number" class="input-text qty text" name="bulk_qty" '.$style.' value="'.$bulk_qty.'">
<input type="submit" class="button alt" name="bulk_qty_submit" id="bulk_qty_submit" value="'.$submit_button.'">
<input type="reset" class="button alt" id="bulk_qty_reset" value="'.$reset_button.'">
</p>
</form>
<script type="text/javascript">
jQuery(function($){
if( $("input[name=bulk_qty]").val() == "")
$("input[name=bulk_qty]").attr("value", "0");;
$("#bulk_qty_reset").click( function(){
console.log($("input[name=bulk_qty]").val());
$("input[name=bulk_qty]").attr("value", "0");
$("form#bulk_qty").submit();
});
});
</script>';
}
add_shortcode( 'bulk_qty', 'set_bulk_product_quantity' );
}
This code creates a shortcode called [bulk_qty]
that displays a form with an input field for the customer to enter their desired quantity. The form also includes a "Set quantity" button and a "Reset" button to clear the quantity.
The value of the quantity is stored in the customer's session data using the WC()->session->set()
function. This ensures that the quantity persists across the customer's browsing session.
Updating the Quantity on Product Pages
Now that we have the ability to set a global quantity, we need to ensure that this quantity is reflected on the individual product pages. We can do this by hooking into the woocommerce_quantity_input_args
filter and updating the input_value
argument.
Here's the code that implements this functionality:
add_filter( 'woocommerce_quantity_input_args', 'custom_quantity_input_args', 10, 2 );
function custom_quantity_input_args( $args, $product ) {
if( ! is_cart() ){
$bulk_qty = WC()->session->get( 'bulk_qty' );
if( ! empty($bulk_qty) ) {
$args['input_value'] = $bulk_qty; // Set the quantity to the stored value
}
}
return $args;
}
This code checks if the current page is not the cart page (to avoid interfering with the cart quantity) and then retrieves the stored quantity value from the session data. If a value is found, it updates the input_value
argument for the quantity input field on the product page.
Redirecting to the Shop Page and Displaying a Custom Notice
When the customer submits the quantity adjustment form, we need to save the new quantity, display a custom notice, and redirect the customer to the shop page. Here's the code that handles this:
add_action( 'template_redirect', 'special_bulk_product_quantity' );
function special_bulk_product_quantity() {
if ( isset($_POST['bulk_qty']) ){
$bulk_qty = sanitize_text_field( trim($_POST['bulk_qty']) );
if( $bulk_qty == 0 ){
$qty_display = $bulk_qty;
$bulk_qty = '';
} else {
$qty_display = $bulk_qty;
}
// Set the quantity value in customer WC_Sessions
WC()->session->set( 'bulk_qty', $bulk_qty );
// Add and display a custom notice (message)
wc_add_notice( __('The bulk quantity is now set to ', 'woocommerce') . $qty_display, 'notice' );
// Redirect to shop page
wp_redirect( get_permalink( wc_get_page_id( 'shop' ) ) );
exit(); // always exit at the end
}
}
This code checks if the bulk_qty
form field has been submitted. If so, it sanitizes the input, stores the quantity in the session data, displays a custom notice, and redirects the customer to the shop page.
Putting It All Together
To use this feature, simply add the [bulk_qty]
shortcode to any page or post where you want the quantity adjustment form to appear. When a customer submits the form, the quantity will be saved in their session data and reflected on all product pages.
This feature can be a valuable addition to your WooCommerce store, providing customers with a convenient way to set their preferred quantity for all products. By improving the user experience, you can potentially boost conversions and customer satisfaction.
If you have any questions or need further assistance, feel free to reach out to the team at Flowpoint.ai. We specialize in optimizing ecommerce websites and can help you identify and fix technical issues that may be impacting your conversion rates.
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.