The WooCommerce product catalog mode allows you to disable the add to cart functionality on your WooCommerce store, effectively turning it into a catalog where customers can only view products without the option to purchase them. This can be useful in various scenarios, such as when you want to showcase your products without the ability to buy them directly, or when you’re still setting up your store and don’t want to accept orders yet.
To achieve the product catalog mode in WooCommerce, you can use the woocommerce_before_add_to_cart_button action hook along with a custom function that removes the add to cart button and any related elements. Here’s an example code snippet that you can add to your theme’s functions.php file:
function wpsnippets_disable_add_to_cart_button() {
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
}
add_action( 'woocommerce_before_add_to_cart_button', 'wpsnippets_disable_add_to_cart_button' );
This code snippet hooks into the woocommerce_before_add_to_cart_button action, which is fired just before the add to cart button is displayed on the single product page. The wpsnippets_disable_add_to_cart_button function is then called, which removes the default WooCommerce add to cart button using the remove_action function.
By adding this code to your theme’s functions.php file, the add to cart button will no longer be displayed on your product pages, effectively enabling the product catalog mode.
Remember to always follow the WordPress coding standards and prefix your custom functions with ‘wpsnippets_’ to ensure compatibility and avoid naming conflicts with other plugins or themes.
Examples
Example 1: Enabling WooCommerce Product Catalog Mode
This use case demonstrates how to enable the product catalog mode in WooCommerce by removing the “Add to Cart” button and disabling the ability to purchase products.
function wpsnippets_enable_product_catalog_mode() {
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
}
add_action( 'init', 'wpsnippets_enable_product_catalog_mode' );
In this code example, we use the remove_action() function to remove the “Add to Cart” button from both the shop loop and single product pages. By hooking this code to the init action, the catalog mode is enabled when the website initializes.
Example 2: Hiding Price and “Add to Cart” Button in Catalog Mode
This use case demonstrates how to hide the product price and the “Add to Cart” button when the catalog mode is enabled in WooCommerce.
function wpsnippets_hide_price_and_add_to_cart() {
if ( is_shop() || is_product_category() || is_product_tag() ) {
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
}
}
add_action( 'init', 'wpsnippets_hide_price_and_add_to_cart' );
In this code example, we use conditional statements to check if the current page is a shop page, product category page, or product tag page. If it is, we remove the actions responsible for displaying the price and “Add to Cart” button. By hooking this code to the init action, the hiding functionality is applied when the website initializes.
Example 3: Customizing Catalog Mode Message
This use case demonstrates how to customize the message displayed when the catalog mode is enabled in WooCommerce.
function wpsnippets_custom_catalog_mode_message() {
add_filter( 'woocommerce_loop_add_to_cart_link', 'wpsnippets_custom_add_to_cart_message', 10, 2 );
add_filter( 'woocommerce_product_single_add_to_cart_text', 'wpsnippets_custom_add_to_cart_message' );
}
function wpsnippets_custom_add_to_cart_message( $text ) {
return 'View Details'; // Custom message to replace "Add to Cart"
}
add_action( 'init', 'wpsnippets_custom_catalog_mode_message' );
In this code example, we use the add_filter() function to modify the text displayed on the “Add to Cart” button. By hooking the wpsnippets_custom_add_to_cart_message function to the appropriate filter hooks, we can replace the default “Add to Cart” text with a custom message. The init action is used to apply this customization when the website initializes.