Create Amazing Custom WooCommerce Theme in WordPress

Create Amazing Custom WooCommerce Theme in WordPress

WooCommerce is a widely used e-Commerce solution. It is versatile & easy to handle.  And if you are good in coding you can also create custom WooCommerce theme too.

However, it nearly powers about 30% of all the online business on the internet with over 32 million downloads. This plugin is one of the most comfortable to customize an e-commerce platform.

We provide the instant solution for WooCommerce Setup in case of any issue feel free to avail our support services by dialing our Toll-Free number + 1 844 275 0975.

WooCommerce themes are responsible for the portrayal of your website. It’s a bunch of files that combine and produce a graphical interface which designs a website. The interesting part is that you are allowed to create a WooCommerce Custom theme using different methods. Let’s have a look at method use to customize the themes.

Method of creating Custom WooCommerce Theme

Our WordPress experts are aware of so many methods to create custom WordPress themes.  But for the user’s sake, we will discuss two basic methods.

  • Using WooCommerce Content
  • Using WooCommerce Hooks

The first method is the WooCommerce Content Method you will find the WooCommerce template file from WooCommerce plugin files. You can use these templates if you are customizing a particular WooCommerce page in WordPress.

1. WooCommerce Content Method

In this WooCommerce Content method, you are creating a custom WooCommerce theme using a new WooCommerce PHP page in your theme file.

Note: This method uses all the WooCommerce default taxonomy and post type.

WooCommerce plugin has the template files. All the necessary pages and their page structure are under in templates file. Also, you have to do is to copy the template and paste it into your WooCommerce theme file.

Create a New Custom WooCommerce Theme File

To create a new Custom WooCommerce theme file follow these step:-

  • Firstly, Log into your cPanel, head to the directory where the theme files and WordPress are located.
  • Search for the page.php file and duplicate the file.
  • Rename the file as WooCommerce.php file and save it.
  • The file path should be like this now;

wp-content/theme/NAME OF YOUR THEME/woocommerce.php.

Adding Template to Custom WooCommerce Theme File

After creating the new custom WooCommerce theme file. We have to place the required file template in the custom file. You can find the template at the location given below;

wp-content/plugins/woocommerce/templates

woocommerce plugin template

Like this, if you have to change the cart page. Copy the cart page template and paste it into new WooCommerce theme file created in the theme file.

Although, the cart page in the theme will be called first before the default cart template. The custom WooCommerce theme will have the default looks of the WooCommerce. Thus, to change the look of this theme you have to create your own custom WooCommerce CSS (Cascading Style Sheet) file.

Note: Since you are making changes to the core file. Each time when you are updating your theme. You have to do the changes manually again.

After that, you feel all the customize functions are working good. You have to declare the WooCommerce support to hide the message.

If your theme does not declare WooCommerce support. So, paste the following code into your functions.php file.

add_action( ‘after_setup_theme’, ‘woocommerce_support’ );

function woocommerce_support() {

   add_theme_support( ‘woocommerce’ );

}

The second method is the developer-based method. It is the most preferred method. WooCommerce Hooks are like calling and inheriting your custom WooCommerce functions without annoying the core file.

2. WooCommerce Hooks Method

Hooks method is more preferred and easy to maintain WooCommerce customization method. Creating a custom WooCommerce theme by the content method has some limitations. Also, don’t try to use the content method for WooCommerce customization.

This method is the last option because you have to look out for compatibility issues regularly before WooCommerce and theme update.

Now come to the point:

However, by using Hooks method, you are calling the fundamental characteristics of a WooCommerce page into your custom WooCommerce theme. This technique bets suits for integrating custom WooCommerce to a non-WooCommerce compatible WordPress theme.

The hooks method involves the following steps:

Unhook WooCommerce Wrapper

WooCommerce function file contains the default wrappers:

Here, you wish to remove or replace these default opening wrappers to hook in your custom function among them all.

“remove_action( ‘woocommerce_before_main_content’, ‘woocommerce_output_content_wrapper’, 10);

remove_action( ‘woocommerce_after_main_content’, ‘woocommerce_output_content_wrapper_end’, 10);”

Hook Your Custom WooCommerce File

Place your own wrappers to hook these function files into your custom WooCommerce theme.

“add_action(‘woocommerce_before_main_content’, ‘my_theme_wrapper_start’, 10);

add_action(‘woocommerce_after_main_content’, ‘my_theme_wrapper_end’, 10);

function my_theme_wrapper_start() {

echo ‘<section id=”main”>’;

}

function my_theme_wrapper_end() {

echo ‘</section>’;

}”

Also, this process is more or less like throwing a lasso and hooking the functions you need.

Example- To show the Up-sell product per page/per line, is that the number of products shown in the recommended products segment.

“remove_action( ‘woocommerce_after_single_product_summary’, ‘woocommerce_upsell_display’, 15 );

add_action( ‘woocommerce_after_single_product_summary’, ‘woocommerce_output_upsells’, 15 );

if ( ! function_exists( ‘woocommerce_output_upsells’ ) ) {

function woocommerce_output_upsells() {

   woocommerce_upsell_display( 3,3 ); // Display 3 products in rows of 3

}

}”

However, we have mentioned only one three products to be displayed in a row of the upsell section in this code. If your custom functions are working well with your custom WooCommerce theme. Declare the WooCommerce support by placing the below-given code in the functions.php file.

add_action( ‘after_setup_theme’, ‘woocommerce_support’ );

function woocommerce_support() {

   add_theme_support( ‘woocommerce’ );

}

Wrapping this all in end!

The Pre-build themes have quality and good to use. But at a certain stage of time, you may found there is nothing unique in your website. At that time, you need to create a theme which gives a unique look and a creative touch of your views.

The method discussed above help you in woocommerce custom theme development. By developing a theme you can clear thought of your project and forward the same with your viewers.

Still, if You are not able to do it. then, talk to our WordPress Technical Support experts to resolve your all errors related to WordPress, dial + 1 844 275 0975(Toll-Free). We will be glad to help you.

Read More:



Leave a Reply

Call Now