[Resolved] Woocommerce product archive not working with new flexbox

Home Forums Support [Resolved] Woocommerce product archive not working with new flexbox

Home Forums Support Woocommerce product archive not working with new flexbox

Viewing 15 posts - 16 through 30 (of 46 total)
  • Author
    Posts
  • #1477132
    moderndev

    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.

    https://snipboard.io/ivrycq.jpg

    #1477138
    Tom
    Lead Developer
    Lead Developer

    Try generate_before_main_content, and then use the Display Rules to target the WooCommerce archives.

    #1477149
    moderndev

    Ok Ive done that.

    But now I have duplicate content.

    I am not sure how to resolve this.

    #1477151
    Tom
    Lead Developer
    Lead Developer

    Have you removed it from the template in your child theme?

    #1477152
    moderndev

    I have yes

    #1477160
    Tom
    Lead Developer
    Lead Developer

    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?

    #1477167
    moderndev

    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.

    #1477169
    Tom
    Lead Developer
    Lead Developer

    Got it.

    So, keep your Element, and go to Customize > Layout > WooCommerce and uncheck “Display page title”.

    #1477174
    moderndev
    #1477184
    Tom
    Lead Developer
    Lead Developer

    Ah, sorry – what if you uncheck “Display short description” as well?

    #1477192
    moderndev

    That caused no change and the my code is not actually adding the page title back

    #1477232
    moderndev

    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' );
    
    #1477238
    Tom
    Lead Developer
    Lead Developer

    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?

    #1477249
    moderndev

    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.

    #1477255
    moderndev

    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?

Viewing 15 posts - 16 through 30 (of 46 total)
  • You must be logged in to reply to this topic.