Need Full Width Category Banner In Product Category Urgent

Dear Support Team,

We need a feature which is required i.e full width category banner in Product category pages. I have added Banner which is displayed full width but when i am clicking on filter it is disturbing the layout of website. The Link for the page is https://www.madsbox.com/product-category/men/

Can you please check with this feature because we require this feature for our website. Please move the category banner from the right column section and place the category description section before sidebar and the products.

I think there might be issue with the ajax filter section. when i am selecting filter option the category banner moves to the right position as displayed in the attached image but when i am refreshing the page the layout comes to previous stage it will be great if you can provide a fix for this solution.

Attachments:

You must be logged in to view attached files.

Hi,

We can’t change this layout because it is based on WooCommerce template structure. And it doesn’t work with your fix on desktop devices as well https://gyazo.com/0f46a32a9bb0d893b7620c2eb085d966

Regards

Dear Support Team,

It is the Ajax filter which is causing the problem rest it seems fine. It is related to theme design structure you can change the layout by copying the archive_product.php file in themes woocommerce section. I have checked with other themes that offers full width category banner when sidebar is enabled . Please refer to below mentioned link in which sidebar is enabled with full width category banner

https://kriesi.at/themes/enfold-shop/product-category/women/casual/

I have asked for few changes but every time i asked for support never got positive reply from your end.

Hello,

Please add this snippet to the functiions.php of the child theme:

function basel_custom_desc_position() {
    remove_action( 'woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10 );
    remove_action( 'woocommerce_archive_description', 'woocommerce_product_archive_description', 10 );
    add_action( 'woocommerce_before_main_content', 'basel_taxonomy_archive_description', 1 );
    add_action( 'woocommerce_before_main_content', 'basel_product_archive_description', 2 );
}
add_action( 'wp', 'basel_custom_desc_position', 1000 );

function basel_taxonomy_archive_description() {
    if ( is_product_taxonomy() && 0 === absint( get_query_var( 'paged' ) ) ) {
        $term = get_queried_object();

        if ( $term && ! empty( $term->description ) ) {
            echo '<div class="term-description custom-desc-class col-sm-12 col-xs-12 col-12">' . wc_format_content( $term->description ) . '</div>'; // WPCS: XSS ok.
        }
    }
}

function basel_product_archive_description() {
    // Don't display the description on search results page.
    if ( is_search() ) {
        return;
    }

    if ( is_post_type_archive( 'product' ) && in_array( absint( get_query_var( 'paged' ) ), array( 0, 1 ), true ) ) {
        $shop_page = get_post( wc_get_page_id( 'shop' ) );
        if ( $shop_page ) {
            $description = wc_format_content( $shop_page->post_content );
            if ( $description ) {
                echo '<div class="page-description custom-desc-class col-sm-12 col-xs-12 col-12">' . $description . '</div>'; // WPCS: XSS ok.
            }
        }
    }
}

And this code to the Theme Settings > Custom CSS:

.custom-desc-class {
    margin-bottom: 20px;
}

Best Regards

Dear Support Team,

Thanks for your precious support. It seems ok but when we are clicking on tags the header banner is gone can you please check and suggest for this issue

Yes, because this banner is added to your category only. Tags don’t have this description and that is why when you visit your tags pages the header is gone.

[Author]

Posts