What is WooCommerce catalog mode?
WooCommerce catalog mode is a feature that allows online store owners to display products without enabling the full e-commerce functionality. In catalog mode, customers can browse products, view product details, and check prices, but the option to add items to the cart and complete a purchase is disabled. This mode is often used for businesses that want to showcase their products without directly selling them online.
Enable WooCommerce catalog mode in few steps
Note: Before you begin, make sure that you have taken backup of code and database. Steps can be different for your theme, this guide is for Pizzon theme.
It would be simple to enable this kind of catalog mode if you don’t have own several coding skills. What you need to do if you follow this method is to hide your product pricing as well as the “Add-to-cart” button. Next, your WooCommerce store works as one catalog in Pizzon Theme.
Step 1: Disable your Product Image Link From Home Page
- Go to Admin Panel > Pages > click on Edit with elementor and edit Home Page
Now you have elementor visual builder for edit home page
- You have to Edit Woo Product Grid Widget and navigate to Media Overlay section in Content Tab
- Click on “Link to Single Page” option and switch off for disabled product image link
Step 2. Disabled your Product Image Link & Product Title Link From Every Site
- Go to the Admin Panel > Appearance > Customizer
- Navigate to Additional CSS Section
- Add stylesheet code listed bellow and hit on Publish Button
.elementor-widget-tmpcoder-woo-grid .tmpcoder-grid-item-title a {pointer-events: none;}
.elementor-widget-tmpcoder-product-archive-addons .products li {pointer-events: none;}
.elementor-widget-tmpcoder-recent-post-list .tmpcoder-post-list-wrapper li {pointer-events: none;}
After added this code product title link and product image link not clickable in every site
Step 3. Remove Add To Cart Button From Single Product Page
- Go to Admin Panel > Pizzon > Theme Layouts
- Click on Single Product Tab
- Hover over the Woo Single Product Layout post and click on Edit with elementor Button and edit this layout
- You have to delete Product Add to Cart Widget
- Navigate to Product Add to Cart Widget, right click on widget edit icon and click on delete option for remove add to cart button
- See screenshotes that listed bellow for better experience
Step 4. Remove Add To Cart Button From Shop Page
- Go to Admin Panel > Pizzon > Theme Layouts
- Click on Product Archive Layout
- Hover over the Woo Product Archive post and click on Edit with elementor Button and edit this layout
Step 5. Remove Add To Cart Button From Product Category Layout & Product Tag Layout
- Go to Admin Panel > Pizzon > Theme Layouts
- Click on Product Product Category
- Hover over the Woo Product Category post and click on Edit with elementor Button and edit this layout
