WooCommerce is one of the most popular and preferred ecommerce solution available on the internet today that powers more than 30% of the online store and has been downloaded 10,126, 999 times.
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 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 the products and orders. From content to subscriptions to digital downloads, you will be able to configure a WooCommerce store to sell anything worldwide.
Worldwide community
With over 350 contributors to WooCommerce and over 7 million downloads to date, you get to join one of the fastest growing open source communities on the internet.
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.
Secure code
This platform is audited by Sucuri, one of the most popular security services, to guarantee that it adheres to WordPress coding standards and best practices, and is kept up-to-date and secure.
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.
In today’s post, we are going to use DW Brickstore WooCommerce WordPress theme that is developed and maintained by DesignWall, a leading WordPress Custom Websites Company with a global marketplace.
DW Brickstore is one of the most popular WordPress shop themes that enables you to leverage the benefits of an exclusive range of WooCommerce features. DW Brickstore also boasts a responsive, minimalistic and clean design.
Impressive features of DW Brickstore
- 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.
Enough with WooCommerce bragging, let’s jump straight to the fundamentals of theming WooCommerce.
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.
I personally find this method works best in a majority of cases and actually minimizes the development time.
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 which will have the following code:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?> <?php the_title(); ? <?php the_content(); ?> <?php endwhile; endif; ?>
- Change your loop with the WooCommerce loop:
<?php woocommerce_content();?> - Next, make any other modifications that you want such as modifying the layout or switching a different sidebar.
The Final Words
You now understand the basics of WooCommerce theme integration and will be able to easily integrate your WooCommerce compatible theme into your WordPress website.
The steps explained in this post will have you covered for most scenarios of WooCommerce. If you want a more flexible or advanced theme integration then the next step is to learn about various conditional statements, filters and hooks available for use with WooCommerce.
