On my WooCommerce shop page (archive-product template), I'm trying to move the page title so that it is outside the site-inner area and rather in the header area, like it is on the other pages on my site. I want to add a full-width image behind it, so I need it outside the current hook that it's in.
I'd also like to be able to make this edit in my functions.php file so that I don't have to worry about WooCommerce upgrades.
Here's the code on the archive-product page that's controlling the title:
get_header( 'shop' ); ?>
<?php
/**
* woocommerce_before_main_content hook.
*
* #hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
* #hooked woocommerce_breadcrumb - 20
*/
do_action( 'woocommerce_before_main_content' );
?>
<?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?>
<h1 class="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' );
?>
What can I add to my functions.php to override where the page title is now? You can see the page in question here.
First, it's possible to Override WooCommerce templates via a Theme (better with a child theme) avoiding the problem of woocommerce updates.
To remove the WooCommerce archives pages title you can use the code below:
add_filter( 'woocommerce_show_page_title', '__return_false' );
Code goes in function.php file of your active child theme (or theme) or also in any plugin file.
Then you will have to edit your header.php theme template to make the page title appear on the shop page just as you want (the best solution is to create a child theme and copy header.php from parent theme to child theme).
You can also use WooCommerce conditional tags to target the Shop page and other WooCommerce archives pages…
Copy wp-content\plugins\woocommerce\templates\archive-product.php
to wp-content\themes\your-theme\woocommerce\archive-product.php
Change code:
<?php
/**
* The Template for displaying product archives, including the main shop page which is a post type archive
*
* This template can be overridden by copying it to yourtheme/woocommerce/archive-product.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* #see https://docs.woocommerce.com/document/template-structure/
* #author WooThemes
* #package WooCommerce/Templates
* #version 3.3.0
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
get_header( 'shop' );
/**
* Hook: woocommerce_before_main_content.
*
* #hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
* #hooked woocommerce_breadcrumb - 20
* #hooked WC_Structured_Data::generate_website_data() - 30
*/
?>
<header class="woocommerce-products-header">
<?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
/**
* Hook: woocommerce_archive_description.
*
* #hooked woocommerce_taxonomy_archive_description - 10
* #hooked woocommerce_product_archive_description - 10
*/
do_action( 'woocommerce_archive_description' );
?>
</header>
<?php
do_action( 'woocommerce_before_main_content' );
if ( have_posts() ) {
/**
* Hook: woocommerce_before_shop_loop.
*
* #hooked wc_print_notices - 10
* #hooked woocommerce_result_count - 20
* #hooked woocommerce_catalog_ordering - 30
*/
do_action( 'woocommerce_before_shop_loop' );
woocommerce_product_loop_start();
if ( wc_get_loop_prop( 'total' ) ) {
while ( have_posts() ) {
the_post();
/**
* Hook: woocommerce_shop_loop.
*
* #hooked WC_Structured_Data::generate_product_data() - 10
*/
do_action( 'woocommerce_shop_loop' );
wc_get_template_part( 'content', 'product' );
}
}
woocommerce_product_loop_end();
/**
* Hook: woocommerce_after_shop_loop.
*
* #hooked woocommerce_pagination - 10
*/
do_action( 'woocommerce_after_shop_loop' );
} else {
/**
* Hook: woocommerce_no_products_found.
*
* #hooked wc_no_products_found - 10
*/
do_action( 'woocommerce_no_products_found' );
}
/**
* Hook: woocommerce_after_main_content.
*
* #hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
*/
do_action( 'woocommerce_after_main_content' );
/**
* Hook: woocommerce_sidebar.
*
* #hooked woocommerce_get_sidebar - 10
*/
do_action( 'woocommerce_sidebar' );
get_footer( 'shop' );
Related
This question already has answers here:
How to change the number of product categories per row using WooCommerce
(2 answers)
Closed 2 years ago.
My website shop is located at: www.TattiniBoots.com/shop
I am attempting to change only the shop category columns to a 4 column layout.
I have tried to do this with CSS, but it ends up changing the layout for all other pages as well (And specific page-id css is not working for the main shop page)
I am hoping for a solution to accomplish this with a functions.php altering columns with an override for the main shop page only
Here is my archive-product.php
<?php
/**
* The Template for displaying product archives, including the main shop page which is a post type archive
*
* This template can be overridden by copying it to yourtheme/woocommerce/archive-product.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* #see https://docs.woocommerce.com/document/template-structure/
* #package WooCommerce/Templates
* #version 3.4.0
*/
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
?>
<?php
global $post;
global $woocommerce;
$rev_slider = get_post_meta(woocommerce_get_page_id( 'shop' ), '_horseclub_revs', true);
if ($rev_slider != '' && function_exists('putRevSlider') ) : ?>
<div class="rev_slide"><?php echo putRevSlider($rev_slider); ?></div>
<?php endif; ?>
<div id="content" class="container">
<div class="row">
<div class="main <?php echo horseclub_main_class(); ?> shop-wrap" role="main">
<?php
if ( have_posts() ) {
/**
* Hook: woocommerce_before_shop_loop.
*
* #hooked wc_print_notices - 10
* #hooked woocommerce_result_count - 20
* #hooked woocommerce_catalog_ordering - 30
*/
do_action( 'woocommerce_before_shop_loop' );
woocommerce_product_loop_start();
if ( wc_get_loop_prop( 'total' ) ) {
while ( have_posts() ) {
the_post();
/**
* Hook: woocommerce_shop_loop.
*
* #hooked WC_Structured_Data::generate_product_data() - 10
*/
do_action( 'woocommerce_shop_loop' );
wc_get_template_part( 'content', 'product' );
}
}
woocommerce_product_loop_end();
/**
* Hook: woocommerce_after_shop_loop.
*
* #hooked woocommerce_pagination - 10
*/
do_action( 'woocommerce_after_shop_loop' );
} else {
/**
* Hook: woocommerce_no_products_found.
*
* #hooked wc_no_products_found - 10
*/
do_action( 'woocommerce_no_products_found' );
}
?>
</div>
Here is my single-product.php
<?php
/**
* The Template for displaying all single products
*
* This template can be overridden by copying it to yourtheme/woocommerce/single-product.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* #see https://docs.woocommerce.com/document/template-structure/
* #author WooThemes
* #package WooCommerce/Templates
* #version 1.6.4
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
?>
<div id="content" class="container">
<div class="row">
<div class="main <?php echo horseclub_main_class(); ?> shop-wrap" role="main">
<?php
/**
* woocommerce_before_main_content hook.
*
* #hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
* #hooked woocommerce_breadcrumb - 20
*/
do_action( 'woocommerce_before_main_content' );
?>
<?php while ( have_posts() ) : the_post(); ?>
<?php wc_get_template_part( 'content', 'single-product' ); ?>
<?php endwhile; // end of the loop. ?>
<?php
/**
* woocommerce_after_main_content hook.
*
* #hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
*/
do_action( 'woocommerce_after_main_content' );
?>
</div>
You can use the loop_shop_column filter:
add_filter('loop_shop_columns', 'loop_columns', 999);
function loop_columns() {
return is_product_category() ? 4 : 3;
}
The above example returns 4 columns for your category pages and 3 columns for your main shop page (or any other product overview page)
Simply add this to the functions.php of your child theme or via a plugin like Code Snippets.
I am building an e-commerce site with Woocommerce 3.6.4 + Wordpress 5.2.2.
I tried to disable the single product page of WooCommerce so that people can shop directly from my shop page.
Tried:
1. Add the code below to my child theme's functions.php file, didn't work.
remove_action( ‘woocommerce_before_shop_loop_item’,‘woocommerce_template_loop_product_link_open’, 10 );
remove_action( ‘woocommerce_after_shop_loop_item’,‘woocommerce_template_loop_product_link_close’, 5 );
2. Add the same code to my WooCommerce content-product.php file. Didn't work.
3./wp-content/plugins/woocommerce/templates/content-product.php
Make these code as comments:
do_action( ‘woocommerce_before_shop_loop_item’);
do_action( ‘woocommerce_after_shop_loop_item’);
Become like this:
//do_action( ‘woocommerce_before_shop_loop_item’);
//do_action( ‘woocommerce_after_shop_loop_item’);
It removed the link to the shopping page, but didn't remove the single product page.
Any advice or help, please?
As a person who knows nothing about coding, this is literally driving me crazy!!!
Can anyone help me, please? Any suggestion would be great!!
Below is the wp_content/themes/my_theme/woocommerce/content-product.php:
`<?php
/**
* The template for displaying product content within loops
*
* This template can be overridden by copying it to yourtheme/woocommerce/content-product.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* #see https://docs.woocommerce.com/document/template-structure/
* #author WooThemes
* #package WooCommerce/Templates
* #version 3.6.0
*/
defined( 'ABSPATH' ) || exit;
`
<li <?php wc_product_class( '', $product ); ?> data-product-id="<?php the_ID(); ?>">
<?php
/**
* Hook: woocommerce_before_shop_loop_item.
*
* #hooked woocommerce_template_loop_product_link_open - 10
*/
do_action( 'woocommerce_before_shop_loop_item' );?>
<?php if ('yes' != $themify->hide_product_image) : ?>
<?php
/**
* Hook: woocommerce_before_shop_loop_item_title.
*
* #hooked woocommerce_show_product_loop_sale_flash - 10
* #hooked woocommerce_template_loop_product_thumbnail - 10
*/
do_action( 'woocommerce_before_shop_loop_item_title' );
?>
<?php endif; ?>
<div class="product-content">
<div class="product-content-inner-wrapper">
<div class="product-content-inner">
<?php
/**
* Hook: woocommerce_shop_loop_item_title.
*
* #hooked woocommerce_template_loop_product_title - 10
*/
do_action( 'woocommerce_shop_loop_item_title' );
/**
* Hook: woocommerce_after_shop_loop_item.
*
* #hooked woocommerce_template_loop_product_link_close - 5
* #hooked woocommerce_template_loop_add_to_cart - 10
*/
do_action( 'woocommerce_after_shop_loop_item' );
?>
<div class="product-share-wrap">
<?php Themify_Wishlist::button() ?>
<?php if (themify_hide_quick_look()): ?>
<a onclick="return false;" data-image="<?php echo wc_placeholder_img_src() ?>" class="quick-look themify-lightbox" href="<?php echo add_query_arg(array('post_in_lightbox' => '1'), get_permalink()) ?>"><span class="tooltip"><?php _e('Quick Look', 'themify'); ?></span></a>
<?php endif; ?>
<?php if (themify_hide_social_share()): ?>
<?php get_template_part('includes/social-share', 'product'); ?>
<?php endif; ?>
</div>
</div>
</div>
</div>
<!-- /.summary -->
</li>
In your themes functions.php add the code,
// remove single product page link
remove_action( 'woocommerce_before_shop_loop_item','woocommerce_template_loop_product_link_open', 10 );
remove_action( 'woocommerce_after_shop_loop_item','woocommerce_template_loop_product_link_close', 5 );
// hide single product page completely
add_filter( 'woocommerce_register_post_type_product','hide_product_page',12,1);
function hide_product_page($args){
$args["publicly_queryable"]=false;
$args["public"]=false;
return $args;
}
solution was partly based on #Vitaly Gritsienko 's answer
The link I am trying to relocate is the link that wraps each product on the shop page which takes you to that products own page. As it is right now it wraps the image, product name, product sku and price. I only want it to wrap the image and product name.
Here's the code which is creating each product.
<li <?php post_class( $boot_classes ); ?>>
<?php
/**
* woocommerce_before_shop_loop_item hook.
*
* #hooked woocommerce_template_loop_product_link_open - 10
*/
do_action( 'woocommerce_before_shop_loop_item' );
/**
* woocommerce_before_shop_loop_item_title hook.
*
* #hooked woocommerce_show_product_loop_sale_flash - 10
* #hooked woocommerce_template_loop_product_thumbnail - 10
*/
do_action( 'woocommerce_before_shop_loop_item_title' );
/**
* woocommerce_shop_loop_item_title hook.
*
* #hooked woocommerce_template_loop_product_title - 10
*/
do_action( 'woocommerce_shop_loop_item_title' );
/**
* woocommerce_after_shop_loop_item_title hook.
*
* #hooked woocommerce_template_loop_rating - 5
* #hooked woocommerce_template_loop_price - 10
*/
do_action( 'woocommerce_after_shop_loop_item_title' );
/**
* woocommerce_after_shop_loop_item hook.
*
* #hooked woocommerce_template_loop_product_link_close - 5
* #hooked woocommerce_template_loop_add_to_cart - 10
*/
do_action( 'woocommerce_after_shop_loop_item' );
?>
</li>
How is this possible?
You can change the location of the product link close as you expect, this way:
add_action('init', 'change_location_of_loop_product_link_close' );
function change_location_of_loop_product_link_close(){
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_product_link_close', 5 );
add_action('woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_link_close', 20 );
}
Code goes in function.php file of your active child theme (or active theme).
Tested and works.
We are trying to get our product category descriptions to the bottom of the page so the products show first. I tried all the suggestions in this topic but none of them worked like they should.
The following piece of code places the category discription in three places, above the products, through the products and below the products.
remove_action( 'woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10 );
add_action( 'woocommerce_after_main_content', 'woocommerce_taxonomy_archive_description', 100 );
add_action( 'woocommerce_after_shop_loop', 'woocommerce_taxonomy_archive_description', 100 );
When I remove the middle line (about the main_content) the description that goes through the products disappears. So all I need to fix is removing the description for the top of the product page.
I would really appreciate your help. It might help to check out the product category on our website.
Code of my archive-product.php:
<?php
/**
* The Template for displaying product archives, including the main shop page which is a post type archive
*
* This template can be overridden by copying it to yourtheme/woocommerce/archive-product.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you (the theme developer).
* will need to copy the new files to your theme to maintain compatibility. We try to do this.
* as little as possible, but it does happen. When this occurs the version of the template file will.
* be bumped and the readme will list any important changes.
*
* #see http://docs.woothemes.com/document/template-structure/
* #author Transvelo
* #package WooCommerce/Templates
* #version 2.0.0
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
electro_get_header(); ?>
<?php
/**
* woocommerce_before_main_content hook.
*
* #hooked electro_before_wc_content - 10 (outputs opening divs for the content)
* #hooked electro_before_product_archive_content - 20
*/
do_action( 'woocommerce_before_main_content' );
?>
<?php
/**
* woocommerce_archive_description hook.
*
* #hooked woocommerce_taxonomy_archive_description - 10
* #hooked woocommerce_product_archive_description - 10
*/
do_action( 'woocommerce_archive_description' );
?>
<?php if ( have_posts() ) : ?>
<?php
/**
* woocommerce_before_shop_loop hook.
*
* #hooked electro_product_subcategories - 0
* #hooked electro_wc_loop_title - 10
* #hooked electro_shop_control_bar - 10
* #hooked electro_reset_woocommerce_loop - 90
*/
do_action( 'woocommerce_before_shop_loop' );
?>
<?php
/**
* woocommerce_shop_loop hook
*
* #hooked electro_shop_loop
*/
do_action( 'woocommerce_shop_loop' );
?>
<?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 wc_get_template( 'loop/no-products-found.php' ); ?>
<?php endif; ?>
<?php
/**
* woocommerce_after_main_content hook.
*
* #hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
*/
do_action( 'woocommerce_after_main_content' );
?>
<?php
/**
* woocommerce_sidebar hook.
*
* #hooked woocommerce_get_sidebar - 10
*/
do_action( 'woocommerce_sidebar' );
?>
Add this code in function.php
add_action('woocommerce_archive_description', 'custom_archive_description', 2);
function custom_archive_description(){
if ( is_product_category() ){
remove_action('woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10 );
add_action('woocommerce_after_main_content', 'woocommerce_taxonomy_archive_description', 5 );
}
}
Source link
insert this function in the function.php of your theme. to activate the short code.
use the shortcode in the category page, the text enclosed in the short code will make the jump
[wcsaltasotto] text you want to jump below[/wcsaltasotto]
function salta_sotto_shortcode( $atts, $content = null ) {
$GLOBALS['salta_sotto_marco'] = '<div class="descrizione-due">' . $content . '<br></div><br>';
}
add_shortcode( 'wcsaltasotto', 'salta_sotto_shortcode' );
function funzione_salta_sotto_marco ( ){
if (isset($GLOBALS['salta_sotto_marco'])) {
echo $GLOBALS['salta_sotto_marco'] ;
}
}
add_action( 'woocommerce_after_shop_loop', 'funzione_salta_sotto_marco' );
Use this code in function.php
// move category description to bottom of pages
remove_action( 'woocommerce_archive_description',woocommerce_taxonomy_archive_description', 10 );
add_action( 'woocommerce_after_shop_loop', 'woocommerce_taxonomy_archive_description', 100 );
NEWS:
After the answer above, I could change a little more, but I still couldn't change all I need. The big question now is:
How can I remove contents of a action (#hooked) and put it in a new hook. Can I do that? For example:
woocommerce_single_product_summary brings
* woocommerce_single_product_summary hook.
*
* #hooked woocommerce_template_single_title - 5
* #hooked woocommerce_template_single_rating - 10
* #hooked woocommerce_template_single_price - 10
* #hooked woocommerce_template_single_excerpt - 20
* #hooked woocommerce_template_single_add_to_cart - 30
* #hooked woocommerce_template_single_meta - 40
* #hooked woocommerce_template_single_sharing - 50
* #hooked WC_Structured_Data::generate_product_data() - 60
I'd like to remove (I know I have to use remove(action) to make it. And put this contents in a new hook:
woocommerce_single_product_summary brings with
* #hooked woocommerce_template_single_title - 5
* #hooked woocommerce_template_single_rating - 10
* #hooked woocommerce_template_single_price - 10
And a new hook "woocommerce_single_product_NEW with
* #hooked woocommerce_template_single_excerpt - 20
* #hooked woocommerce_template_single_add_to_cart - 30
* #hooked woocommerce_template_single_meta - 40
* #hooked woocommerce_template_single_sharing - 50
How can I do it?
My page now looks like this:
Thanks!
I'm a jr guy learning PHP to make my own Wordpress theme. Today, it's not a big deal, but I have a new project and I've trying to use woocommerce plugin.
My header, sidebar and my footer are working just fine, but I couldn't undestand exacly how to add my own theme to design the single product page and the others woocommerce pages because I didn't know how hooks and that functions bring the content.
My goals:
1) Change all itens of my single page products from this:
MY CODE:
<?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' );
?>
<!-- CLOSE - Shows the path of my site Inicio / Shop -->
<!-- PAge Title -->
<header class="woocommerce-products-header">
<?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?>
<h1 class="woocommerce-products-header__title page-title">
<?php woocommerce_page_title(); ?>
</h1>
<?php endif; ?>
<!-- Close PAge Title -->
<!-- Não mostra nada nesse momento -->
<?php
/**
* woocommerce_archive_description hook.
*
* #hooked woocommerce_taxonomy_archive_description - 10
* #hooked woocommerce_product_archive_description - 10
*/
do_action( 'woocommerce_archive_description' );
?>
<!-- Fecha - Não mostra nada nesse momento -->
</header>
<?php if ( have_posts() ) : ?>
<?php
/**
* woocommerce_before_shop_loop hook.
*
* #hooked wc_print_notices - 10
* #hooked woocommerce_result_count - 20
* #hooked woocommerce_catalog_ordering - 30
*/
do_action( 'woocommerce_before_shop_loop' );
?>
<?php woocommerce_product_loop_start(); ?>
<?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; ?>
<?php
/**
* woocommerce_after_main_content hook.
*
* #hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
*/
do_action( 'woocommerce_after_main_content' );
?>
<?php get_footer( 'shop' ); ?>
To something like that:
I already known wich part brings the content, but I'd like to understand how to change each peace of it.
If someone can help me or just link here some documentation, I would apreciate that so much.
Tks!
if you want to modify woocommerce into your theme just follow instructions.
first of all add woocommerce support into your theme.
add_theme_support( 'woocommerce' );
The WooCommerce plugin comes with a number of front-end HTML templates as well as email templates. Instead of editing these files directly within the plugin (which is a very bad idea because once update the plugin and all of your changes will be lost!), you can copy them into your theme:
In your theme directory, make a new folder called “woocommerce.”
Navigate to the WooCommerce plugin directory and open the "templates" folder. The templates folder has a lot of subfolders with all of the different templates that WooCommerce uses. Fortunately, the template file structure and naming in WooCommerce is easy to follow.
In your newly created "woocommerce" folder, copy the template file that you want to edit. Remember to keep the directory structure the same here. If the template you want to edit is within a subfolder then remember to create that subfolder within your theme's directory.
Edit the file from within your “woocommerce” folder and save the changes.
Then Let's say that we want to change some of the HTML within the “My Orders” screen of WooCommerce.
The first thing we need to do is locate the correct template. In this case, the “My Orders” section is under “My Account” in WooCommerce. The directory structure looks like the following:
/wp-content/plugins/woocommerce/templates/myaccount/my-orders.php
Next, make a folder within your theme called “woocommerce” and within that folder make a second folder called “myaccount.” After that, copy the my-orders.php file into that directory.
You should be left with the following:
/wp-content/themes/yourtheme/woocommerce/myaccount/my-orders.php
Any changes made to this file will now override the original.
help links:
https://code.tutsplus.com/articles/an-introduction-to-theming-woocommerce-for-wordpress--wp-31577
https://slicejack.com/creating-custom-woocommerce-themes/