so far while my woocommerce theme loop through all products in shop page i’m trying to customise and add few bootstrap classes to style it in a prober way since default styles generated causes layout issues. after investigating the page i discover out that this was in the heart of the loop:
wc_get_template_part( 'content', 'product' );
don’t know what that is thought it would look like regular html and css classes i can edit it instead but i’m still thinking it might be hiding somewhere but don’t know where to find it.
i’m stuck since yesterday on how to edit the html elements i’m still beginner in theme development so please help me or at least advice. this is full archive-product.php which is as follow:
get_header(); ?>
<div class="row">
<div class="small-12 medium-12 large-12 columns text-left">
<!--breadcrumb-->
<?php
/**
* woocommerce_before_main_content hook.
*
* @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
* @hooked woocommerce_breadcrumb - 20
* @hooked WC_Structured_Data::generate_website_data() - 30
*/
do_action( 'woocommerce_before_main_content' );
?>
</div>
<header class="small-12 medium-6 large-6 columns text-left woocommerce-products-header collapse">
<!--title-->
<?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?>
<h1 class="woocommerce-products-header__title page-title"><?php woocommerce_page_title(); ?></h1>
<?php endif; ?>
<?php
/**
* woocommerce_archive_description hook.
*
* @hooked woocommerce_taxonomy_archive_description - 10
* @hooked woocommerce_product_archive_description - 10
*/
do_action( 'woocommerce_archive_description' );
?>
</header>
<div class="small-12 medium-6 large-6 columns collapse">
<?php if ( have_posts() ) : ?>
<?php
/**
* woocommerce_before_shop_loop hook.
*
* @hooked woocommerce_result_count - 20
* @hooked woocommerce_catalog_ordering - 30
*/
do_action( 'woocommerce_before_shop_loop' );
?>
<?php endif; ?>
</div>
</div>
<div class="row small-up-2 large-up-4">
<?php if ( have_posts() ) : ?>
<?php #woocommerce_product_loop_start(); ?><!--removes ul-->
<?php woocommerce_product_subcategories(); ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php
/**
* woocommerce_shop_loop hook.
*
* @hooked WC_Structured_Data::generate_product_data() - 10
*/
do_action( 'woocommerce_shop_loop' );
?>
<?php wc_get_template_part( 'content', 'product' ); ?>
<?php endwhile; // end of the loop. ?>
<?php #woocommerce_product_loop_end(); ?>
<?php
/**
* woocommerce_after_shop_loop hook.
*
* @hooked woocommerce_pagination - 10
*/
do_action( 'woocommerce_after_shop_loop' );
?>
<?php elseif ( ! woocommerce_product_subcategories( array( 'before' => woocommerce_product_loop_start( false ), 'after' => woocommerce_product_loop_end( false ) ) ) ) : ?>
<?php
/**
* woocommerce_no_products_found hook.
*
* @hooked wc_no_products_found - 10
*/
do_action( 'woocommerce_no_products_found' );
?>
<?php endif; ?>
</div>
1
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.
