The WooCommerce templating works in different ways depending on your needs and/or skills.
The function:
<?php
wc_get_template_part('content', 'product');
is the WooCommerce equivalent of WordPress core template function:
<?php
get_template_part('filename');
It is important to know that this is the same as php require but without
using .php extension at the end.
Before you do any of the steps mentioned below, make sure your theme supports WooCommerce by looking in the functions.php for this line of code:
<?php
// After setup theme hook adds WC support
function mytheme_add_woocommerce_support() {
add_theme_support( 'woocommerce' ); // <<<< here
}
add_action( 'after_setup_theme', 'mytheme_add_woocommerce_support' );
In order to use your own design/template you have different options:
1) Easiest way:
Create a “woocommerce.php” in your theme folder
This file will have the highest priority in terms of which file will be used by WordPress in your theme. Delete this file if you want to use the second method.
2) Advanced way:
Create a “woocommerce” folder and copy the template which you want to modify into this folder.
WooCommerce/WordPress will recognize it and use the templates provided in this folder. This method is called “template overwriting” and allows you to insert and modify parts of the WooCommerce frontend output into your theme. This is the more advanced way of WC customization, maybe a challenge for you but for sure the more professional way of doing it.
In this case you are propably looking for this file:
woocommerce/archive-product.php
That is the template file which displays the shop’s main product overview.
After creating the folder name and copying the file into it, you can create your own markup for this layout.
In the end, your new file might look like this:
<?php get_header(); ?>
<div class="container">
<div class="row">
<?php get_template_part('sidebars/sidebar-left'); ?>
<main class="col-xs-12 col-sm-9 col-md-9 col-lg-9">
<?php
// Only run on shop archive pages, not single products or other pages
if ( is_shop() || is_product_category() || is_product_tag() ) {
// Products per page
$per_page = 24;
if ( get_query_var( 'taxonomy' ) ) { // If on a product taxonomy archive (category or tag)
$args = array(
'post_type' => 'product',
'posts_per_page' => $per_page,
'paged' => get_query_var( 'paged' ),
'tax_query' => array(
array(
'taxonomy' => get_query_var( 'taxonomy' ),
'field' => 'slug',
'terms' => get_query_var( 'term' ),
),
),
);
} else { // On main shop page
$args = array(
'post_type' => 'product',
'orderby' => 'date',
'order' => 'DESC',
'posts_per_page' => $per_page,
'paged' => get_query_var( 'paged' ),
);
}
// Set the query
$products = new WP_Query( $args );
// Standard loop
if ( $products->have_posts() ) :
while ( $products->have_posts() ) : $products->the_post();
// Your new HTML markup goes here
?>
<div class="col-xs-12 col-md-3">
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
<?php // more stuff here... markup, classes etc. ?>
</div>
<?php
endwhile;
wp_reset_postdata();
endif;
} else { // If not on archive page (cart, checkout, etc), do normal operations
woocommerce_content();
}
?>
</main>
</div>
</div>
</div>
<?php get_footer(); ?>
I hope this gives you an understanding of how it works. You can also have a look at the WC backend system page at the bottom. There it will display for you which templates WC uses.