WooCommerce shop page custom content broken
It’s possible to add custom content above the products on WooCommerce shop page by editing the page that is assigned as the “Shop page”.
When adding complex blocks with the new block editor (or perhaps a third party page builder) then you may find that there can be unwanted line breaks (<br>
) and paragraphs (<p>
) added, potentially mangling the content and making it appear broken.
Disabling WPAutop does not solve the issue, because it is actually caused by WC’s wc_format_content
function, called in the woocommerce_product_archive_description
function in wc-template-functions.php
:
function woocommerce_product_archive_description() {
...
$description = wc_format_content( wp_kses_post( $shop_page->post_content ) );
...
}
Luckily it’s a pluggable function, so all you need to do is to override it in your child theme’s functions.php
file:
/**
* WC override: Remove `wc_format_content` from Shop page content.
*/
function woocommerce_product_archive_description() {
if(is_search()) {
return;
}
if(is_post_type_archive('product') && in_array(absint(get_query_var('paged')), [0, 1], true)) {
$shop_page = get_post(wc_get_page_id('shop'));
if($shop_page) {
$description = wp_kses_post($shop_page->post_content);
if($description) {
echo '<div class="page-description">' . $description . '</div>';
}
}
}
}
Alternatively you can add your content manually to the woocommerce_archive_description
hook instead of putting it in post content.