WooCommerce, an open-source eCommerce plugin for WordPress, now getting popular as the completed documentation and tutorial make the customization become easy for most of the users.

woocommerce

I have started using this powerful wordpress plugin and would like to share the tips, hope it will help anyone who face the same problem along the way.

If you need a shopping catalog without the “Add to Cart”, “Checkout” and “Payment” and other shopping cart functions, there is a tweak you can do to achieve that.

OR

You can try my new plugin “WooCommerce Product Catalog” that can turn WooCommerce into a product catalog with a few clicks.

Step 1

I would suggest to create a child theme for main theme you plan to use for customization. For the project, i have used “Wootique” free theme. (Refer to the wordpress child theme reference for mroe details here : http://codex.wordpress.org/Child_Themes)

The final structure layout:

wp-content/ <- your wordpress directory
    themes/ <- the wordpress themes directory
        wootique/
        wooshop/
            custom.css
            functions.php
            index.php
            screenshot.png
            style.css

Let say the child theme i named “wooshop“, first i create style.css under the wooshop folder.

/*
Theme Name: WooShop
Description: WooShop - Child theme for the Wootique woocommerce theme
Version: 1.0
Author: terrytsang
Template: wooshop
*/

@import url("../wootique/style.css");

Step 2:

Copy the custom.css from wootique to wooshop, then add some css styles to hide the related shopping cart element.

/*disabled shopping cart function for woocommerce*/
#wrap_all .sub_menu {
 display:none;
}

.woocommerce-message {
 display:none;
}

.thumbnail_container div.thumbnail_container_inner a.product_type_variable,
.thumbnail_container div.thumbnail_container_inner a.product_type_simple {
 display:none;
}

.quantity {
 display:none;
}

.summary button {
 display:none;
}

.summary button[type="submit"] {
 display:none;
}

.cart_dropdown {
 display:none;
}

/*Custom styling for Mystile theme*/
ul.nav li.cart a,
ul.nav li.checkout a {
display:none;
}

Step 3:

Copy the functions.php from wootique to wooshop and put some wordpress action hooks under custom action section.

// Remove add to cart button on the navigation bar
remove_action( 'woo_nav_after', 'wootique_cart_button', 10);
remove_action( 'woo_nav_after', 'wootique_checkout_button', 20);

// Remove add to cart button from the product loop
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10, 2);

// Remove add to cart button from the product details page
remove_action( 'woocommerce_before_add_to_cart_form', 'woocommerce_template_single_product_add_to_cart', 10, 2);

//disabled actions (add to cart, checkout and pay)
remove_action( 'init', 'woocommerce_add_to_cart_action', 10);
remove_action( 'init', 'woocommerce_checkout_action', 10 );
remove_action( 'init', 'woocommerce_pay_action', 10 );

Step 4:

Copy index.php at wootique and override the index.php under the wooshop folder. Replace line #61 with below line:


<?php #woocommerce_template_loop_add_to_cart( $loop->post, $_product ); ?>

Step 5:

Create a (300 x 250 px) screenshot.png for the child theme.

Final Step:

Activate “wooshop” theme and done!