How to Turn WooCommerce into a Catalog: A Comprehensive Guide
Introduction:
WooCommerce, the leading e-commerce platform for WordPress, is incredibly versatile. While primarily known for online stores, it can also be effectively used as a product catalog. This is particularly useful for businesses that want to showcase their offerings without immediately selling them online. Perhaps you want to drive leads to your physical store, generate inquiries, or simply display your product range before implementing full e-commerce functionality. This article will guide you through the steps to transform your WooCommerce store into a catalog-only website.
Main Part: Configuring WooCommerce for Catalog Mode
There are several ways to achieve this. We’ll cover the most common and effective methods:
Method 1: Using a Plugin (Recommended)
This is the easiest and safest approach for most users, especially those less comfortable with code. Several plugins are available specifically for converting WooCommerce to catalog mode. They usually offer a simple settings panel to control the desired behavior.
- Benefits:
- Easy to install and configure.
- Often provides additional options for customization.
- Avoids directly modifying core WooCommerce files.
- Example Plugins:
- “WooCommerce Catalog Mode, Disable Cart & Checkout”
- “YITH WooCommerce Catalog Mode”
- “Catalog Mode”
- How to use (Generic steps, refer to the specific plugin documentation):
- Remove the “Add to Cart” button.
- Remove or disable the cart and checkout pages.
- Optionally, replace “Add to Cart” with a “Request a Quote” or “Contact Us” button linking to a contact form.
- Removing the “Add to Cart” button:
1. Install and activate your chosen plugin from the WordPress plugin repository.
2. Navigate to the plugin’s settings panel (usually found under WooCommerce or Settings).
3. Enable catalog mode.
4. Configure the plugin options to:
5. Save your changes.
Method 2: Using Custom Code (For Advanced Users)
This method involves adding code snippets to your theme’s `functions.php` file or using a code snippets plugin. Be extremely cautious when editing the `functions.php` file as errors can break your website. Always back up your site before making any code changes.
This code snippet removes the “Add to Cart” button from product pages:
add_filter( 'woocommerce_loop_add_to_cart_link', '__return_empty_string' ); add_filter( 'woocommerce_is_purchasable', '__return_false' );
function remove_single_add_to_cart_button( $product ) {
remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_add_to_cart’, 30 );
}
add_action( ‘woocommerce_before_single_product’, ‘remove_single_add_to_cart_button’ );
- Removing the cart and checkout pages:
This snippet redirects users attempting to access the cart and checkout pages to the homepage:
add_action( 'template_redirect', 'redirect_to_homepage_if_cart_or_checkout' ); function redirect_to_homepage_if_cart_or_checkout() { if ( is_cart() || is_checkout() ) { wp_safe_redirect( home_url() ); exit; } }
- Replacing “Add to Cart” with “Contact Us”:
This example replaces the “Add to Cart” button with a custom “Contact Us” button linking to a contact form page (replace ‘your-contact-page-url’ with the actual URL):
add_filter('woocommerce_loop_add_to_cart_link', 'replace_loop_add_to_cart_button', 10, 2); add_filter('woocommerce_single_add_to_cart_text', 'woo_custom_cart_button_text'); // For product page add_filter('woocommerce_product_add_to_cart_text', 'woo_custom_cart_button_text'); // For product archives
function woo_custom_cart_button_text() {
return __(‘Contact Us’, ‘woocommerce’);
}
function replace_loop_add_to_cart_button($html, $product) {
$link = $product->get_permalink();
$text = __(‘Contact Us’, ‘woocommerce’);
$html = ‘‘ . $text . ‘‘;
return $html;
}
Method 3: Using CSS (Limited Functionality)
While not as robust as the other methods, you can use CSS to visually hide the “Add to Cart” button. However, this does not prevent users from directly accessing the cart or checkout if they know the URLs. This is the least recommended approach for true catalog mode.
- Add the following CSS to your theme’s stylesheet or using the WordPress Customizer:
.woocommerce .add_to_cart_button,
.woocommerce .single_add_to_cart_button {
display: none !important;
}
Key Considerations After Implementation
- Update permalinks: Go to Settings -> Permalinks and click “Save Changes” to flush the rewrite rules after making changes.
- Test thoroughly: Ensure the cart and checkout are inaccessible and that the “Add to Cart” button is removed or replaced as intended.
- Mobile responsiveness: Verify that the changes look good and function correctly on all devices.
- Contact Form: If replacing the “Add to Cart” button, ensure your contact form is properly configured and functioning.
- SEO Optimization: Even in catalog mode, optimize your product pages with relevant keywords, descriptions, and images to improve search engine visibility.
Conclusion:
Turning WooCommerce into a catalog is a straightforward process that can be achieved through plugins, custom code, or, less effectively, CSS. By implementing the techniques described above, you can showcase your products without immediate sales, encouraging inquiries, driving traffic to your physical store, and building brand awareness. Choosing the right method depends on your technical expertise and the level of customization you require. Always prioritize security and back up your website before making any changes to the `functions.php` file or installing new plugins.