Detailed Guide for Theming WooCommerce For WordPress

WooCommerce is one of the most popular and preferred e-commerce solutions available on the web today that powers more than 30% of online stores. The platform allows you to convert your WordPress website into a complete and feature-rich e-commerce store. WooCommerce platform has been designed to render you in complete control to sell anything through a WordPress powered website.

WooCommerce and its core features

WooCommerce, an open source platform, renders users with an extensive set of features and user-friendly experience, making it ideal for online stores to establish a successful presence on the internet without spending a fortune.

Huge Flexibility

Perhaps the most common advantage of using WooCommerce is that it offers huge flexibility with products and orders. From content to subscriptions to digital downloads, you will be able to configure a WooCommerce store to sell anything worldwide.

Mobile friendly

This open source platform is developed to ensure your e-commerce platform and products look as good on their mobile phones as they do on a desktop computer. It also enables you to convert your ecommerce store into a mobile app with few third party services/tools without any custom coding.

WooCommerce extensions

WooCommerce extensions are what set it apart. You can find hundreds of free and paid extensions that can be added to your e-commerce store to customize it as per your requisites.

Impressive features of PWS WordPress Hosting with WooCommerce

• Comes with a drag and drop page builder that lets you customize the look and feel of your theme
• Comes equipped with a slider revolution plugin
• Integrated with a popup quick view to access information without reloading a whole page.

Before getting started, we are assuming that you have WordPress and WooCommerce installed already and are familiar with HTML and CSS. Also, you have the basic knowledge of developing WordPress themes and using Chrome Developer Tools or any other web development tool.

Tailoring the WooCommerce CSS

WooCommerce is packed with certain built in CSS that intends to make it compatible with as many themes as possible. It is often a great idea to start with the default CSS but it is dubious that it is going to immaculately suite the style of your theme right after installing it.

Basically, there are two methods to customize the CSS for a particular theme:

• Using the default styles as a base and override them
• Or you can disable the default styles and start from scratch.

Note: A body class of “woocommerce” is added to all of WooCommerce pages.

Overriding Default Styles

Well, it is the fastest method to start overriding the default styles and will most likely suit many users.

A default WooCommerce CSS file (placed in wp-content\plugins\woocommerce\assets\css\woocommerce.cssorwoocommerce.less) needs to be copied.

You can now delete anything you do not need or alter anything you want, but keep note, this will be a time-consuming task and might end up with a ton of repeated CSS.

You can use the following way to avoid this time-consuming task:

• Browse through the website locating the styles that you need to alter.
• Now you can use Chrome Developer Tools (or any other tool that you prefer) to find out the classes, and even try making the modifications in the browser to ensure you comprehend how it will look. Right click on the screen and from the drop-down list select “inspect element”.
• Now, from Chrome Developer Tools, copy the CSS into your theme’s CSS file.
• Examine the CSS in Chrome Developer Tools’ since it might grey-out or strike-through some vendor prefixed styles for other browsers. It is crucial to alter these values so as to maintain your CSS consistency across numerous browsers users may use to visit your website.
• Finally, eliminate any values that you didn’t alter in the copied CSS. As an instance, if you altered the width of anything, but you didn’t change the respective height, then you don’t have to add the height in your custom CSS file.

Removing the Default CSS and Starting From Scratch

Add a small snippet code to your theme’s functions.php file to remove default CSS.
define('WOOCOMMERCE_USE_CSS', false);

Copy the original CSS file into your own file to get access to all the WooCommerce classes and delete anything you find unnecessary.

Declare WooCommerce Support

Declaring WooCommerce support is crucial if you are planning to sell your theme or make it public. If you don’t declare it, your users will receive an error message saying “the theme is not supported with the WooCommerce plugin” in the WordPress Dashboard. However, it is extremely easy to remove this error message. Insert the following code snippet in the functions.php file of your theme.

add_action( 'after_setup_theme', 'woocommerce_support' );
function woocommerce_support() {
add_theme_support( 'woocommerce' );
}

Editing templates

Now that we have learned how to edit CSS with WooCommerce, it is time to learn how to edit templates of WooCommerce.

This open source platform is packed with various front-end HTML templates, which can be found in wp-content/plugins/woocommerce/templates.

If you are looking to change a particular element or perhaps delete it completely, you will need to edit the template where that particular element is located.
Once again, to make changes in the template, copy it and create your own file and then edit it.

Here are the steps to do that:

• Open your template folder and make a new “woocommerce” folder
• Create a copy of the template from wp-content/plugins/woocommerce/templates.
• Upon creating a copy of the template, open your woocommerce folder you have recently made and paste the copied template.

Note: If the template was copied from a sub directory then you will need to make the same directory structure within the woocommerce folder.

• Now it’s time to make changes to your new template and alter its structure.

A Practical Example of editing a WooCommerce template

Let’s suppose we are going to alter the HTML of “My Orders” WooCommerce screen.

The first and foremost thing you need to do is find the right associated template. In our scenario, “My Orders” is within the “My Account” section.

This is how the directory structure looks like:

/wp-content/plugins/woocommerce/templates/myaccount/my-orders.php

Now create a directory inside your theme with a name “woocommerce” and create another folder within this with a name “myaccount”. Next, copy and paste the my-orders.php file inside this directory.

You must have the following directory section now:
/wp-content/themes/yourtheme/woocommerce/myaccount/my-orders.php

Any changes made to this file will now override the original.

The WooCommerce Loop

If you have ever built or changed WordPress themes before, you probably know what The WooCommerce Loop is and how it works.

Well, WooCommerce comes with its own loop that enables you to change WooCommerce pages. As an instance, you might wish to do this when you’d want to load a different sidebar for your pages of WooCommerce.

This is the most fundamental incorporation and by building a bespoke WooCommerce template, this will be smeared automatically to each WooCommerce page such as archives, categories and products.

If you don’t want your WooCommerce template to appear any different, you will have to build a bespoke WooCommerce template.

Building a template is a simple and easy process:

• Copy your theme’s page.php file and change its name with woocommerce.php.
• Locate the WordPress loop inside your woocommerce.php file.

• Change your loop with the WooCommerce loop: 
• Next, make any other modifications that you want such as modifying the layout or switching a different sidebar.

Conclusion

You now understand the basics of WooCommerce theme integration and will be able to easily integrate your WooCommerce compatible theme into your WordPress website.  If you every have questions or need help you can always go to priority web services for 24/7 help and support.