How to make your theme compatible with WooCommerce - Declare WooCommerce support in theme

In most cases, WooCommerce can be well integrated into most WordPress themes. In some customized themes, the style of the theme may have some conflicts or mismatches with the style of WooCommerce, in this case, the layout of the WooCommerce store page, product category page and product page may be wrong or displayed abnormally. We then need to do some remodeling for our theme to make our theme support WooCommerce well.We can use two methods to solve this problem:

• utilization hooks (for advanced users and developers)
• Using WooCommerce's Content Export Functions in Themes woocommerce_content() Calling WooCommerce Content

Method 1: Use woocommerce_content() function

This solution allows us to create a new template in the theme which is responsible for theAll WooCommerce taxonomy archives and product displays.This solution uses all the default WooCommerce templates and there is no way to modify the default WooCommerce templates, it is recommended for developers who are not familiar with WooCommerce or don't need to deeply customize WooCommerce. This solution is very simple to implement, just follow the method below.

Step 1: Copy the page.php page template to woocommerce.php template

make a copy ofthematic page.phpRenamed woocommerce.phpThis file should be located at: wp-content/themes/your-theme/woocommerce.php.

Step 2: Edit woocommerce.php and replace the WordPress loop with the WooCommerce loop

Using your favorite editor, open woocommerce.php and find the page's post loop code, which typically starts with the following code:

<?php if ( have_posts() ) :

End with the following code:

<?php endif; ?>

Just delete the middle of the above two pieces of code and paste the following code between the two pieces of code above.

<?php woocommerce_content(); ?>

After completing the above, we have used WooCommerce's looping code instead of WordPress' default post looping code.

Method 2: Use hooks

The Hook approach is more complex and flexible than the woocommerce_content approach, which is similar to the way themes are created using hooks, and is the way WooCommerce is compatible with Twenty Ten and Eleven. In the theme's functions.php The following code is inserted in the file.

First uninstall the WooCommerce default wrapper HTML markup:

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 the HTML tags of our own 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 '
'; }
}

function my_theme_wrapper_end() {
  echo '
'; } function my_theme_wrapper_end()
}

Make sure the markup above matches the markup of the theme you're using, which can be found in the responsive location in page.php.

Declare WooCommerce support

Once the theme is ready for WooCommerce support, we can declare our theme to support WooCommerce in our code to hide the “Your theme does not declare WooCommerce support” message from the backend. file of the theme to add the following code to realize this function:

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

Doing some of the above steps, your theme has done a good job of basic WooCommerce support, as for the realization of more layout styles and features, you need to according to the actual situation of some secondary development work, if you have encountered problems in the secondary development of WooCommerce, welcome to put forward in the comments to discuss. If you need to develop a WooCommerce-based online store, we offer professional WooCommerce Custom DevelopmentServices, welcome inquiries.