Topic: Is this possible with hooks?

MacGraphic
September 30, 2024 at 4:57 am

I am in the last stages of converting an old site to GP & GB (pro versions).
The site also has WooCommerce & WPGridBuilder installed.

On the product category pages, previously we had a layout showing the product category name & description before the products. See:

I can’t (don’t want to have to) re-create this using a separate page for each category, or setup a layout template/element for these, as we are using WPGridBuilder for searching.
The search functionality has been placed in an off-canvas, see and

Basically, I am wondering if there’s a way I can use a custom hook to add the div with the category name & description before the products, in the way shown in the first image?
David
September 30, 2024 at 5:57 am

Hi there,

can I see the archive page ?
MacGraphic
September 30, 2024 at 6:19 am

Hi David, I have just uploaded the latest version of the site to a temporary domain, I will add the link to the ‘Private Info’ section.

If you need it, I can add another user access for you.

Thanks, Mark

David

September 30, 2024 at 6:33 am

OK, so its using a GB Query Loop, which makes it a bit tricky adding something before the first post item.
You could try this PHP Snippet:


$loopnumber = 0;
add_filter( 'render_block', function( $block_content, $block ) {
    global $loopnumber;
    if ( !is_admin() && ! empty( $block['attrs']['className'] ) && strpos( $block['attrs']['className'], 'queryloop-insert-before-block' ) !== false ) {
        if ( $loopnumber == 0 && is_product_category() ) { 
            $category_title = woocommerce_page_title( false ); 
            if ( ! empty( $category_title ) ) {
                $block_content = '<div class="gb-grid-column gb-query-loop-item custom-class">' . esc_html( $category_title ) . '</div>' . $block_content;
            }
        }
        $loopnumber++;
    }
    return $block_content;
}, 10, 2 );

Then edit the Query Loop you have on the archive pages, and select the Grid Block inside it and give it an Advanced > Additional CSS Class of: queryloop-insert-before-block

What this “should” do is; on any query loop with that class, before the 1st post item in the loop it will output another grid item with the current product category archive title.

It will take some CSS too style it and I am not sure what grid builder will do to it…

MacGraphic

September 30, 2024 at 7:06 am

Hi David,
Thanks for the snippet, no joy unfortunately.
It’s not outputting anything before the first product block. As you said, the Query Loop may well be preventing this from working.

I’d also tried setting the first row to a grid, with a container in the first third with a shortcode (below).
And then 2 products in the remaining 2/3rds. Then doing another Query Loop & Grid with an offset of the two items in the row above.
But that still didn’t work as needed.

Shortcode attempt:

function product_category_info_shortcode() {
    if ( is_product_category() ) {
        $term = get_queried_object();

        // Check if the object is a valid product category
        if ( isset( $term->taxonomy ) && $term->taxonomy === 'product_cat' ) {
            $output = '<div class="product-category-info">';
            $output .= '<h3 class="product-category-name">' . esc_html( $term->name ) . '</h3>';
            $output .= '<hr>';
            $output .= '<div class="product-category-description">' . wp_kses_post( $term->description ) . '</div>';
            $output .= '</div>';
            return $output;
        }
    }
    return '';
}
add_shortcode( 'product_category_info', 'product_category_info_shortcode' );

David

October 1, 2024 at 2:29 am

Ok, my offering before was completely wrong.
Try this:

1. Add this PHP:


add_filter( 'render_block', function( $block_content, $block ) {
    if ( !is_admin() && ! empty( $block['attrs']['className'] ) && strpos( $block['attrs']['className'], 'queryloop-insert-before-block' ) !== false ) {
        static $block_count = 0;
        $block_count++;
        if ( $block_count <= 2 ) {
            $category_title = get_the_title( get_queried_object_id() );
            return '<div class="gb-grid-column gb-query-loop-item custom-class">' . esc_html( $category_title ) . '</div>' . $block_content;
        }
    }
    return $block_content;
}, 99, 2 );

2. edit the Query Loop Grid Block and remove the queryloop-insert-before-block class
3. select the Post Template block in the query loop and give it the class of: queryloop-insert-before-block

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Is this possible with hooks?