Add new tab to WooCommerce product details page

We will show you how to add a new tab to product details page.
Here is the code –

Move product title above the thumbnail in WooCommerce product page

Move product title above the thumbnail in WooCommerce product page

In WooCommerce’s product details page, product title always comes after product image section.
But each website have their own design and many a cases we have seen that product title needs to be shown at the top.

So, how to achieve that without tinkering the template code much ?

Let’s have look at the ‘content-single-product.php’ page. The default code of this page looks like –
If you look at the code closely, you will notice that there are two action hooks –
`woocommerce_before_single_product_summary` and `woocommerce_single_product_summary`.

Now, `woocommerce_show_product_images` function is attached with first hook and `woocommerce_template_single_title` is attached with later.

That’s the reason that image is coming first.

But in template, simply swapping places of those two action hooks are not recommended at all, as other functions are attached with those hooks too. So, the best way to do that is, remove title hook from `woocommerce_single_product_summary` and add it to `woocommerce_before_single_product_summary`.

So here we go, open your theme’s functions.php and add following lines –

remove_action(‘woocommerce_single_product_summary’, ‘woocommerce_template_single_title’, 5);

add_action(‘woocommerce_before_single_product_summary’, ‘woocommerce_template_single_title’, 5);

As of now, both image and title is added to same action hook but still title will come first. Because image showing function was added with priority 10 (default) and we have added title with priority 5.

So, like price you can re arrange any of the item like price, rating, add to cart button etc.

Hope you have enjoyed the article ūüėČ

Split cart items by shipping classes in WooCommerce

Assume you need to avail different shipping methods for different items in your store. But if both type items exists in your cart then how to do that ?

The first step you have to do is splitting the cart items into packages. Here in this code we will show how to do that —

Add plugin settings link to WordPress plugins page

If we write some functionality to our website which is not at all dependent on our theme, then it is always better to write those codes to a plugin page(creating new plugin) instead ¬†of theme’s functions.php. So if we change the theme we don’t have to bother about losing our functionality.

So do take this advantage we write plugins. Now with some plugins sometimes we need a settings page for our plugins too. But if we create a plugin it gives us only few links activate/deactivate, Edit, Delete.

But you must be wondering how to add a settings page link in this one. That is very simple. WordPress provides a filter hook for that ‘plugin_action_links_YOURPLUGINNAME’. This hook gives you an array of default links. Now you can add new link there applying a new filter.¬†¬†You can add settings page link or any other link also.

Below is an example of that hook.

Hope you guys figured this out very easy.

Pre-populate Woocommerce checkout fields

Pre-populate Woocommerce checkout fields can be done with the following snippent –

Change flat rate shipping price

This article is about how we can change flat rate shipping charge. There are many scenarios like –
1. If a cart having few specified items from some category we need to change flat rate shipping.
2. For a particular area (country, state or zip) we need to change flat rate shipping.
And more on this not only flat rate shipping we many need to manipulate other shipping methods also.

So, if you know the shipping method id, it is easily achievable. Here I have showed how to modify flat rate shipping. But you can replace ‘flat_rate’ with your own method id.

You can put the line ‘$rates[$key]->cost = 25;’ under any condition. And remember you have a variable ‘$package’ which contains items of cart/package so you can loop through it and check for shipping classes or product category and apply logic according to it.

Show/Hide payment gateways according to shipping method

We often face this issue.¬† Sometimes we want to activate specific payment gateways¬† depending on selected shipping method. Here is the code —


Line 2 : We are getting the selected shipping method.
Line 4: We are checking whether it is local delivery or not (you can put your own shipping method or some other logic) .
Line 6: Now disabling payment gateways.
So in this way you can hide all the payment gateways which you don’t want to make available for the local delivery (or whatever).

Feel free to ask if you have any doubt.