March 8, 2024

Customize WooCommerce Cart Page

WooCommerce offers a robust platform for online stores, but sometimes you need to fine-tune the user experience. This guide will show you how to customize the WooCommerce Cart page for specific products by removing the “Remove” button and disabling the quantity box.

Step 1: Identify Your Target Product(s)

First, decide which products you want to affect on the Cart page. Note down their unique product IDs. You can find these IDs easily in the product editing section of your WordPress dashboard.

Step 2: Banish the “Remove” Button (For Specific Products)

We’ll achieve this with a combination of PHP and JavaScript. Here’s the code snippet you need to add to your theme’s functions.php file or a custom plugin:

				
					/**
 * Remove product on cart page button for specific product
 */
add_filter('woocommerce_cart_item_remove_link', 'webficial_remove_cart_item', 10, 2);

/**
 * Webficial Remove Cart Item
 *
 * @param mixed $link
 * @param mixed $cart_item_key
 * @return string
 */
function webficiala_remove_cart_item($link, $cart_item_key)
{
  if (WC()->cart->find_product_in_cart($cart_item_key)) {
    $cart_item = WC()->cart->cart_contents[$cart_item_key];
    $product_id = 14; // Replace 14 with your actual product ID
    if ($cart_item['product_id'] == $product_id) {
      $link = '';
    }
  }
  return $link;
}
				
			

Important Note: Replace 14 with the actual product ID for which you want to remove the “Remove” button.

Step 3: Disable the Quantity Box (For Specific Products)

Now, let’s disable the quantity box using CSS. Add the following code to your theme’s stylesheet or a custom plugin:

				
					add_filter('woocommerce_quantity_input_args', 'webficial_hide_quantity_input_field', 20, 2);

/**
 * Webficial Hide Quantity Input Field
 *
 * @param mixed $args
 * @param mixed $product
 * @return mixed
 */
function webficial_hide_quantity_input_field($args, $product)
{
  try {
    $product_id = 14; // Replace 14 with your actual product ID
    if ($product->get_id() == $product_id) {
      $input_value = $args['input_value'];
      echo $input_value;
      $args['min_value'] = $args['max_value'] = $input_value;
    }
    return $args;
  } catch (Exception $e) {
    webficial_logger($e->getMessage());
  }
}
				
			

Remember: Replace 14 with the actual product ID for which you want to disable the quantity box.

Conclusion

By following these steps, you’ve gained control over the WooCommerce Cart page for specific products. You can now remove the “Remove” button and disable the quantity box, creating a customized experience for your customers.

Author

Share this post:
Facebook
Twitter
LinkedIn
WhatsApp

Discover more articles