WP Woocommerce customization tips

4 Customizations Everyone with a Woocommerce Site Should Be Using

Settings up an online store that’ll be a success is not just about getting a domain and installing Woocommerce on your WordPress. You have to carve out the design so that it attracts customers, makes a gunique and reliable impression that encourages them to buy your product. This kind of a design DOES NOT just come with a out-of-the-box plugin installation.

What follows are some really good customizations that I have learnt through personal experience and that have helped me increase my own store sales over the years.

Some of these are customizations that I wanted and so came up with myself while others are modified versions of some other hacks found online – hacks which failed to do their job thoroughly.

So, let’s start!

1. Changing Spacing Between Products On The Shop Page

By default, WordPress has a 25px (only) spacing between product columns on the shop and all other Product Archive pages. This layout makes the page look too cluttered. It felt even more so for me because, as you can see, I love to have a lot of white space around my content – it gives a beautifully clean look. So I needed to increase this spacing.

I found a couple of articles online that helped me add more spacing between columns but this in turn started disturbing my product layouts connected with ‘Related Products’, ‘Upsell Products’ etc. because Woocommerce uses the same code to show products on product archives as well as these suggested products on your single product pages. The problem here is if you’re shop page is using 3 columns (which it IS by default) and you add more spacing between them, this badly affects your Related/Upsell products as they are using a full-width 4 column layout.
So I needed a solution that would create more column spacing on the Product Archives/Shop pages but exclude the Related/Upsell layouts from this change.

Also, my theme is responsive, so I had to wrap the new CSS code in a way that it is activated only when the user’s screen is bigger than 1000px. Also, I went ahead and added more spacing between the product rows as well – to match the new column spacing.

Here’s how I did this. I added the following code to my child theme’s CSS.

@media only screen and (min-width: 1000px) {
body.woocommerce .main-content .span_9 ul.products li.product, body.woocommerce-page .main-content .span_9 ul.products li.product { width: 29%!important;
}
.woocommerce ul.products li.first, .woocommerce-page ul.products li.first {
clear: none!important;
}
.woocommerce .main-content ul.products li.product {
margin-right: 6%!important; margin-bottom:35px !important;
}
.woocommerce ul.products li:nth-child(3n+4) {
clear: both!important;
}
.woocommerce .main-content .related ul.products li.product {
margin-right: 23px !important;
}
.woocommerce .related ul.products li:nth-child(3n+4) {
clear: none !important; } }

If you notice above, the ‘3n+4’ refers to an arrangement with 3 columns. So if you’re using the following code to change your number of columns, you can change the 3n+4 in the above code block to 2n+3 or 4n+5 etc.

// Change number or products per row to 3
add_filter('loop_shop_columns', 'loop_columns');
if (!function_exists('loop_columns')) {
function loop_columns() {
return 3; // 3 products per row
} }

2. Show Total Number of Sold Units for Selected Single Products

I wanted – how many products I have sold – to be displayed on single product pages BUT – (here’s the catch) only on specific ones that I could choose.
Why? Because we all have certain products in our store that sell far better than others. They’re basically the ‘Stars’ of our shop. For these products we want to proudly show how many units we sold but it’s stupid to show the number on products you have sold less units of or maybe NO units of.

So I came up with the following shortcode. The reason I needed it in the form of a shortcode is that it can be placed in the description of ANY single product of my choice. So I don’t have to show ‘0 Units sold’ on products that I haven’t sold yet but can happily show the units sold for products that are more popular!

/* shortcode to display total sales of woo product */
function tt_show_product_loop_unitsold() {
global $product;
$units_sold = get_post_meta( $product->id, 'total_sales', true );
echo '<p><strong>' . sprintf( __( 'Units Sold: %s', 'woocommerce' ), $units_sold ) . '</strong></p>'; //you can change text Units Sold to any text liked Total Downloads } add_shortcode('showsold', 'tt_show_product_loop_unitsold');

Once you have pasted the code above in your child theme’s functions.php file, you can just type the following in the description area of any product you choose.

3. Add Custom Tab on Single Product Page

If you’ve been to my shop, you must have noticed that I am not using a sidebar on my single product page. So with that option gone, I wanted a custom tab under my single products to show information about the designer of the product – Me.

I added the following code to my child theme’s functions.php file to make this work.

// Add custom Woo Tab
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {
// Adds the new tab
$tabs['test_tab'] = array(
'title' => __( 'Designer', 'woocommerce' ),
'priority' => 50,
'callback' => 'woo_new_product_tab_content'
);
return $tabs; }
function woo_new_product_tab_content() { // The new tab content
echo '<h2>The Artist</h2>';
echo '<p><img src="http://83oranges.com/wp-content/uploads/2013/06/creative-designer-uma-gokhale-circular.jpg" style="width:90px; height:90px; margin-right:35px" align="left"> This product is designed by Uma Gokhale. She is a talented illustrator, designer & runs 83 Oranges Design Co.</p>';
}

You can change the text – This product is designed by Uma Gokhale. – to whatever you want.

4. Add a ‘Send Enquiry’ Form Tab

Lastly, I wanted a form to help my potential buyers send me an enquiry or questions about a product. The most logical place to show this form was in a new tab. So I installed Contact Form 7, created a product enquiry form in its settings and then put the following code in my child theme’s functions.php

// Add send enquiry contact tab to woo product page
if ( ! defined( 'ABSPATH' ) ) exit;
/** Check if WooCommerce is active **/
if ( ! in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) {
return;
} // let's add a filter to woocommerce_product_tabs to add our additional tab..
add_filter('woocommerce_product_tabs','woocommerce_product_tabs_contact_form7',10,1);
function woocommerce_product_tabs_contact_form7($tabs){
$tabs['contact_form7'] = array(
'title' => __( 'Send Enquiry', 'woocommerce' ),
'priority' => 20,
'callback' => 'woocommerce_product_contact_form7_tab'
);
return $tabs; }
// our tab's callback...
function woocommerce_product_contact_form7_tab(){
// do the thing zhu li! Let's echo our shortcode for contact form 7
echo do_shortcode('[your contact form short code here]');
}

Do these and let me know how it goes!
If this article was helpful, don’t forget to share it and leave a comment below.