7 Useful WooCommerce Tips you Should Know

WooCommerce is one of the most popular eCommerce plugins nowadays and it has been changing the way we sell online completely.

We have extracted some useful tips for the WooCommerce plugin from our experience, as theme developers, we have listed them in this article. Our themes are 100% compatible and can help you build a beautiful and professional eStore. June WooCommerce Theme Tower Shop Demo  Specular Shop Demo

We also reviewed a big collection of Best Woocommerce Themes on our blog, you can see it here. 

There are over 17 woocommerce elements you can use on your website through visual composer.

And a lot of settings and configurations that stand behind this amazing powerful plugin. In this post, we are going to list some useful tips about WooCommerce firstly and then share some configurations that you can make to your website, with our themes.

1. Display some of your products as Featured

Clicking one of these stars will set an item as featured. Depending on the theme you are using this category will be shown or not. With Specular and Tower the featured category will appear this way (with the default theme design) :

2. Security : SSL & HTTPS Support in WooCommerce

The SSL setting is used to force specific pages to use HTTPS (a secure HTTP), but once SSL is set up for your site. To set up the SSL you need to purchase an SSL certificate from your host (or a third-party seller). This way you can enable HTTPS support for your WooCommerce shop. Your host provider should set the certificate up on the server that’s hosting your site.

Note: WooCommerce only supports dedicated SSL certificates, not shared certificates.

3. Assign custom labels to product thumbnails

This can be done using an extension: WooCommerce Advanced Product Labels. It may not be very important, but some customers like to catch the attention even with these simple tricks, especially when their products are on sale or highlighted. This extension can create labels easily (to promote free products, free shipping also). Once installed it will appear on WooCommerce > Settings > Product labels settings tab.

4. See your shop's detailed statistics

Have you ever wished to actually monitor the analytics of your online shop in the best way possible? Integrating your shop with Putler with WooCommerce it may be the answer. WooCommerce analytics includes usually the basic reporting and analysis about orders, products and customers.

But this may not be a complete analysis. With Putler you can get a more detailed statistic with: no switch over to multiple accounts, no need of paid extensions, multiple currency support, consolidation, automatic deduping, intuitive search, Product, Customer, Sales analytics, Deep growth insights, etc.

5. You can add a feature to Zoom in your Products Images

It is common, very useful and it is a major help for your customers when it comes to preserving the details of your product. It also increases their opinion about your shop, being a professional one. You can achieve this with YITH WooCommerce Zoom Magnifier plugin. The feature will appear when customers hover over the images.

Done with these general woocommerce tips, we will show you 2 more things you can add to your online shop, using our themes.

6. Display Specular Shop Cart with Left side header

By default the cart icon is not present in the left/right menu style. To add it here as well make the following changes:

• Go to your theme files and edit wp-content > themes > specular > header.php file by replacing this line:

< ?php if($header_class == 'header_7') $css_class .= ' pos_'.$cl_redata['header_7_position'].' ' ?>

with this :

< ?php if($header_class == 'header_7'|| class_exists('Woocommerce')) $css_class .= ' pos_'.$cl_redata['header_7_position'].' ' ?>

• And under the same block of code, add this code too:

< ?php if(class_exists('Woocommerce')): ?>
< ?php get_template_part('includes/view/woocommerce', 'cart'); ?>
< ?php endif; ?>

• Then add this code to your custom CSS box to edit the style :

a.cart_icon {
padding-left: 130px;
}
.cart .content {
display: none;
}
.cart .content a.cart_icon:hover {
display: block !important;
}

Note: Since this is not a default style, these changes made to file header.php will be overwritten in case of a theme update. So we suggest you to save a backup of it and replace it in the next theme update, to keep the changes.

7. Display Woocommerce single product sidebar

This is also not possible by default, because of the theme-specific design, but you can achieve it by changing some lines of code.

• Go to your theme files > wp-content > themes > specular > includes > core and open codeless_metaboxes.php. Find these lines:

$metaboxes[] = array(
            'id' => 'demo-layout2',
            //'title' => __('Cool Options', 'codeless-admin'),
            'post_types' => array('page', 'post'),
            //'page_template' => array('page-test.php'),
            //'post_format' => array('image'),
            'position' => 'side', // normal, advanced, side
            'priority' => 'high', // high, core, default, low
            'sections' => $layoutOptions
        );
        return $metaboxes;

and replace with these :

$metaboxes[] = array(
            'id' => 'demo-layout2',
            //'title' => __('Cool Options', 'codeless-admin'),
            'post_types' => array('page', 'post', 'product'),
            //'page_template' => array('page-test.php'),
            //'post_format' => array('image'),
            'position' => 'side', // normal, advanced, side
            'priority' => 'high', // high, core, default, low
            'sections' => $layoutOptions
        );
        return $metaboxes;

You will be able now to choose a layout that displays a sidebar on your woocommerce single product pages :