Most of the time, WooCommerce templates will integrate nicely with most WordPress themes.
You may encounter problems when using WooCommerce’s default content that does not match your chosen theme. One can quickly notice when your layout is broken by leaving your sidebar in an incorrect position.
This problem may affect the shop page, the single product page, and the taxonomies page (categories and tags) because WooCommerce uses a template to display these pages, and WooCommerce can’t know exactly which markup you use for your theme. Other carriers (checkout, cart account) are not affected because they use your article’s ‘page.php’ file.
There are two ways to solve this problem:
- Using hooks (for advanced users/developers)
- Using the woocommerce_content () function within your theme
Note: This tutorial does not guarantee that you will not experience problems during integration. Look for an expert in WooCommerce for help if you cannot solve the conflict problems that may exist.
Using woocommerce_content ()
This solution allows you to create a new template within your theme to be used for all WooCommerce taxonomies and post displays. Despite the ease of implementation, there is a disadvantage, as the template will be used for all WooCommerce taxonomies, but in most cases, it is enough to start a virtual store. For developers, it is best to use the hook option.
To configure this template, follow these steps:
1 => Duplicate the file ‘page.php’
Create a copy of the ‘page.php’ file of your theme and rename it to ‘woocommerce.php.’ This file should be within the home directory of your theme, along with the file ‘index.php.’
2 => Edit your layout (woocommerce.php)
Open your new file created in the previous step, ‘woocommerce.php’ in a text editor.
3 => Replace the loop
Now you need to find the loop. Usually, it starts like this:
<? php if (have_posts ()):
and usually ends like this:
<? php endif; ?>
This can vary between different themes. Once you have found the code snippet, delete it. Instead, enter:
<? php woocommerce_content (); ?>
This will cause us to use the WooCommerce loop as default. Save the file. Ready! You can now skip to the “Declaring WooCommerce Support” part.
Note: When we create ‘woocommerce.php’ in the theme folder, we cannot override the ‘woocommerce / archive-product.php’ file template because ‘woocommerce.php’ has priority over ‘archive-product.php’. This is to prevent display problems.
Using Hooks
The hook method is more complex than when we use woocommerce_content, but it is more flexible. It is similar to the way we use it when creating our themes. We also use this method to properly integrate themes Twenty Ten and Eleven (WordPress Pattern).
Insert some lines in your ‘functions.php’ file.
First, remove the Woofer hook WooCommerce:
remove_action ('woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
remove_action ('woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);
Now insert the hook into your ‘functions.php’ file according to what needs to be displayed correctly in your theme. In this case, we are dealing with Wrappers (Tags that ’embrace’ the site’s content). Usually, it is a div with class content or main.
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>';
}
Make sure the code markup matches what you need in your layout. If you’re unsure what classes or IDs to use, look at your ‘page.php’ file.
Declaring support for WooCommerce
Now that you’re happy that your theme has full support for WooCommerce, it’s time to declare this in your code and hide the message “Your theme does not declare WooCommerce support.” Do this by adding the code snippet below in your ‘functions.php’ file:
add_action ('after_setup_theme', 'woocommerce_support');
function woocommerce_support () {
add_theme_support ('woocommerce');
}
If everything goes wrong
Suppose you are unsuccessful with any of the above methods and do not have access to a developer. In that case, it is strongly recommended that you look at WooCommerce ready-made themes and fully managed WooCommerce hosting that work great and are great hassle-free solutions.
