Flatsome Theme Customization

In this post I’ll show you how to do flatsome theme customization. According to Themeforest its the #1 best selling WooCommerce theme ever. It’s a multiple-purpose responsive theme and can be used for any type of WooCommerce Project.

Important Flatsome Template Files

Flatsome theme has lot of files and directories, Below I’ll list some important files, which are used for WooCommerce frontend templates.

Flatsome root directory
It contains template files for Cart, Checkout & accounts pages

• page-cart.php
• page-checkout.php
• page-my-account.php

Flatsome/wocommerce directory
It contains template files for shop listing & product details pages

• archive-product.php
• single-product.php

Flatsome/inc/woocommerce directory
Below files contain functions for category, product, cart, checkout & accounts pages used within flatsome theme

• structure-wc-global.php
• structure-wc-category-page.php
• structure-wc-product-page.php
• structure-wc-product-box.php
• structure-wc-cart.php
• structure-wc-checkout.php

Child Theme

If you want to modify the WooCommerce core files, then the best option is to use a child theme to preserve customizations against future plugin updates. There are two ways with which you can customize.

• WooCommerce Template in child Theme:- Create “woocommerce” directory within child theme and add same directory structure as in WooCommerce Core. Add template file to it and do required customization. This will override the core template and any modification after plugin update will not effected.
• functions.php Code Snippets:- The code snippet add or remove some functionality. You need to be very familiar with WooCommerce Hooks (Actions & Filter). The snippets added in functions.php are attached with hooks. Without hooks the code will not do anything. Here is a complete list Action and Filter Hook Reference

Best WooCommerce Customization Practices

Hooks

Hooks are of two types Action and Filter. Hooks are snippets of code that can be placed into your WordPress theme’s functions.php file or even added into a custom plugin.

• Action hooks are triggered when an event takes place, such as a user logged in or a custom action that you define in your theme or plugin.
• Filter Hooks are used to modify data at runtime. The main difference between Action and Filter hook is, Filter Hook always returns a modified data value while Action Hook just triggers the code at that point in the code.

WooCommerce Hooks Actions & Filters

Now its time to start flatsome theme customization using action & filter hooks within child theme. Here is the list of pages on which we will do customization.

1. Shop Page
2. Product Detail Page
3. Cart Page
4. Checkout Page
5. Account Page

Shop Page

 
On shop page, how to remove the category title? First reach at the point where its relevant functions are hooked. Go to Flatsome/inc/woocommerce directory and open and open structure-wc-product-box.php file. Search for ‘flatsome_woocommerce_shop_loop_category‘ function, in current version its on line #55. This function is attached with action hook ‘woocommerce_shop_loop_item_title‘.

Add the following code to functions.php file to hide shop page category

 
There is a situation where you want to display some additional text for the products on-sale. The if condition checks and display text only on relevant products. The below code is attached to a hook ‘flatsome_product_box_after‘ that you can find in flatsome/woocommerce/product-content.php file.

Add the following code to functions.php file to display additional text for on-sale products

 

Product Detail Page

 
For product detail page, I’ll show you three things the fist is how to display text after product detail pageimage. For this within flatsome/woocommerce/single-product/product-image.php file contains a hook ‘flatsome_after_product_images‘.

Add the following code to functions.php file to display text after product detail image.

 
The 2nd thing on products details page is to display data after product description. There is a WooCommerce filter hook ‘woocommerce_short_description‘ for doing this. You can find this hook in flatsome/woocommerce/single-product/short-description.php

Add the following code to functions.php file

 
Our last customization thing is to add a custom tab. For creating a new tab, add all the required array value and attach it to filter ‘woocommerce_product_tabs‘. You can find the filter in flatsome/woocommerce/single-product/tabs/tabs.php file. In array there is ‘callback’ => ‘woo_custom_tab_content’ the callback value is linked to a function function woo_custom_tab_content() that will display the custom tab contents.

Add the following code to functions.php file

For more on tabs please check my other tutorial Product Tabs in WooCommerce

Cart Page

 
The cart table contains all the products that a customer want to purchase. You can customize and add additional things to the cart table. At first we’ll add Category & SKU within product title column.

The filter ‘woocommerce_cart_item_name’ can be found in flatsome/woocommerce/cart/cart.php It has three parameters, the $cart_item contains all the relevant details of products added to cart in array format. I got the product_id like $cart_item[‘product_id’] and then fetched the Categories & SKU.

Add the following code to functions.php file to display Categories & SKU in cart table

 

Next, we’ll display simple text after the flatsome Cart Totals. To do this , flatsome has a hook ‘flatsome_cart_sidebar’ that can be found in flatsome/woocommerce/cart/cart.php

Add the following code to functions.php file to display data after cart coupon

 
 
Custom Flatsome Cart Page
The last thing we want to do is to customize the cart page and look like the below image.

 
Within flatsome/woocommerce/cart/cart.php file we just have play with some div elements. In below code firtsly I changed ‘large-7’ to ‘large-12’ that will make cart table to full-width. Next for cart-collaterals I added an extra div element above.

Add the following code to cart.php file within you child theme on relevant places, I already explained in it where to add.

Checkout Page

 
Checkout page is an important page of ecommerce site. You always want it to look perfect and user friendly. I have a complete tutorial on customizing WooCommerce Checkout
WooCommerce Checkout Page Fields

In Checkout tutorial part, we’ll reorder the Billing Form Email field to display after Customer Name Fields. In image you can see its at the bottom of Billing form. Set the priority =2 0 for Email field and attach it to filter hook ‘woocommerce_checkout_fields‘.

Add the following code to functions.php file to reorder checkout billing form email field

Account Page

 
If you want to show to your user their role type in flatsome theme, then I am going to show you how to do it.
 

The flatsome/woocommerce/myaccount/account-user.php file contains action hook ‘flatsome_after_account_user‘. In below code I fetched the user role by its user_id.

Add the following code to functions.php file to display use role in flatsome accounts area

 
The final thing in our tutorial is to links to Flatsome account dashboard & navigation menu. The flatsome/woocommerce/myaccount/dashboard-links.php file contains filter hook ‘flatsome_account_links’ that display’s account links. The code within list-item contains our custom link label & endpoint. For more on WooCommerce Custom Account Page check my tutorial
Create WooCommerce Custom Accounts Page

Add the following code to functions.php file

 

Related Links:
7 Things You Should Never Do With Your WooCommerce Store
 
Custom WooCommerce Plugin Development
 
Best WooCommerce Customization Practices