For the most part, WooCommerce integrates well into most WordPress themes. In some custom-developed themes, the style of the theme may conflict or mismatch with the WooCommerce style. In this case, the layout of the WooCommerce store page, product category page, and product page may be disordered or displayed abnormally. We need to make some modifications to our theme so that our theme can support WooCommerce well. We can solve this problem using two methods:
- usehooks(for advanced users and developers)
- Using WooCommerce’s content output function in your themewoocommerce_content()Call WooCommerce content
Method 1: Use woocommerce_content() function
This solution allows us to create a new template in the theme, which is responsible forAll WooCommerce taxonomies archived and items displayed,This solution uses all default WooCommerce templates, and there is no way to modify the default WooCommerce templates. This method is recommended for developers who are not familiar with WooCommerce or do not need to deeply customize WooCommerce. This solution is very simple to implement, just follow the method below.
The first step is to copy the page.php page template to the woocommerce.php template
copyThematicpage.php, renamed towoocommerce.php, the location of this file should be: wp-content/themes/yourtheme/woocommerce.php.
The second step is to edit woocommerce.php and replace the WordPress loop with the WooCommerce loop.
Using your favorite editor, open woocommerce.php and find the article loop code for the page. It usually starts with the following code:
<?php if ( have_posts() ) :End with the following code:
<?php endif; ?>Delete the content between the two pieces of code above and paste the code below between the two pieces of code above.
<?php woocommerce_content(); ?>After completing the above operations, we used WooCommerce’s loop code instead of WordPress’ default article loop code.
Method 2: Use hooks
The Hook method is more complex and more flexible than the method of using woocommerce_content. This method is similar to the method of using hook to create a theme. It is also a method that WooCommerce is compatible with Twenty Ten and Eleven. in subjectfunctions.phpInsert the following code into the file.
First uninstall the WooCommerce default encapsulated HTML tags:
remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);Then mount our own theme’s HTML markup:
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 above tags match the tags for your theme, which can be found in page.php at the location of the response.
Declare WooCommerce support
Once the theme has WooCommerce support, we can declare in the code that our theme supports WooCommerce, so that we can hide the “Your theme does not declare WooCommerce support” message in the background. Add the following code to the theme’s functions.php file to achieve this function:
add_action( 'after_setup_theme', 'woocommerce_support' );
function woocommerce_support() {
add_theme_support( 'woocommerce' );
}After completing the above steps, your theme has basic WooCommerce support. As for implementing more layout styles and functions, you need to carry out some secondary development work according to the actual situation. If you encounter problems in the secondary development of WooCommerce, please discuss it in the comments. If you need to develop a web store based on WooCommerce, we provide professionalWooCommerce custom developmentServices, welcome to consult.
