Archived topic
Woocommerce product archive not working with new flexbox
45 replies · Started by moderndev on October 6, 2020
Yes I understand what your saying.
This is the block.
<div class="wooarchive">
<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>
</div>
What I dont understand is how to do that. And shouldnt it be woocommerce_before_main_content?
This is what I have done for now.
Try generate_before_main_content, and then use the Display Rules to target the WooCommerce archives.
Ok Ive done that.
But now I have duplicate content.
I am not sure how to resolve this.
Have you removed it from the template in your child theme?
I have yes
Interesting - what happens if you deactivate the Element? It looks like WooCommerce adds the header by default. Any reason why it was added in the child theme?
Basically, I was using the child template to add a div and a class around the description text so that I could make it full width and sit it above both the product grid and side bar.
Perhaps this is not the correct or best way to achieve, buts its only way I could manage it.
I have removed the element now, but that removes my additional div and class.
Got it.
So, keep your Element, and go to Customize > Layout > WooCommerce and uncheck "Display page title".
That just removes the header. I still have duplicate descriptions and no title at all
Ah, sorry - what if you uncheck "Display short description" as well?
That caused no change and the my code is not actually adding the page title back
I have put things back. So that you can see what I am trying to achieve.
This is my child template. Maybe it helps you to understand what the issue is.
I have also added a temporary admin login link in the Private information.
<?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
*/
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
*/
?>
<div class="wooarchive">
<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>
</div>
<?php
do_action( 'woocommerce_before_main_content' );
?>
<?php
if ( woocommerce_product_loop() ) {
/**
* Hook: woocommerce_before_shop_loop.
*
* @hooked woocommerce_output_all_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.
*/
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' );
So let's do it step by step.
First, remove that block from the file:
<div class="wooarchive">
<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>
</div>
Does that make it so no title/description shows up at all?
The changes I have made to the template are the following.
I have added the div with the class wooarchive, which I wrapped around the header block (standard woocommerce header). This additional class lets me style the block.
I then moved the wooarchive block containing the header above the woocommerce_before_main_content.
To answer your question. Yes it will remove the entire header. No title or description will appear.
Do you want me to do that and then add it back using the hook element?