
Tagged: archive page, description, product-loop, woocommerce
-
AuthorPosts
-
July 8, 2025 at 2:48 pm #1486464
Hey Folks,
i am desperatly trying to move the category description below the products in enfold but till now i failed misserably as enfold is jsut super stubborn with this topic. I actually need this for 3 different shops…
The optimum would look like this:
– Category Image
– Category Title
– Products
– Category descriptionand all that without destroying the side bar.
What i tryed:
Writing functions (always ends up NOT removing the top description)
Overwriting the Wootemplate which ends up in double images at the top no title and then the normal stuff from enfoldWhy is Enfold so stubborn with this? It makes 0 sense to show a long description before the products as it it very user unfriendly but one needs the description for seo purposes. I also wanna avoid using css to “hide” it as google does not like this when we display the text again and its a very unclean way to do that. If theres no other way it would also be ok for me do move everything (not jsut the description) below the product loop but without just hiding it at the top part.
What can we do? Any help is highly appreciated.
Kind regards
PatrickJuly 8, 2025 at 11:24 pm #1486484Hey j0schi,
Please link to the page in your screenshot so we can help. Your point of moving the description below the related products doesn’t make since, but I think that we can do this if you wish.Best regards,
MikeJuly 9, 2025 at 6:07 pm #1486523Hey Mike, thanks.
Why doesnt it make sense? Please let me know, maybe i have an oversight? The descriptions can be rather long and we dont want to have the users to scroll down so much before seeing the products. I attached an example below.Kind regards
J0schiJuly 9, 2025 at 10:13 pm #1486546Hi,
Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor, If you are not using a child theme you could use the WP Code plugin then add a new snippet, in the top right corner use the PHP snippet as the code type:
and ensure that it is activated, then add the bellow code and save.
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.function custom_script() { ?> <script> document.addEventListener("DOMContentLoaded", function () { const termDescription = document.querySelector(".archive .term-description"); const productsGrid = document.querySelector(".archive .products.columns-3"); if (termDescription && productsGrid && productsGrid.parentNode) { productsGrid.parentNode.insertBefore(termDescription, productsGrid.nextSibling); } }); </script> <?php } add_action( 'wp_footer', 'custom_script', 99 );
Sorry, I don’t read your language in the screenshot, now that I can translate your live page it does make sense. :)
Best regards,
MikeJuly 9, 2025 at 10:49 pm #1486548That actually worked like a charm, thank you so much! I modifyed it a bit so the h1 stays at the top and it moves only the rest of the description:
I know why i still stay with enfold after all those years :Dfunction custom_script() { ?> <script> document.addEventListener('DOMContentLoaded', function () { /* --- Grab required elements ---------------------------------------- */ const termDescription = document.querySelector('.archive .term-description'); const productsGrid = document.querySelector('.archive .products'); // works for columns-3/4/5 … if (!termDescription || !productsGrid) return; /* --- 1) Create wrapper for the moved text -------------------------- */ const movedDesc = document.createElement('div'); movedDesc.className = 'moved-term-description'; movedDesc.style.cssText = 'clear:both;margin-top:4rem;'; /* --- 2) Move everything except the first <h1> into movedDesc ------- */ const h1 = termDescription.querySelector('h1'); // stays in place [...termDescription.childNodes].forEach(node => { // Keep the H1 where it is, move the rest if (h1 && node === h1) return; movedDesc.appendChild(node); }); /* --- 3) Insert movedDesc AFTER the product grid -------------------- */ productsGrid.parentNode.insertBefore(movedDesc, productsGrid.nextSibling); }); </script> <?php } add_action( 'wp_footer', 'custom_script', 99 );
July 9, 2025 at 11:07 pm #1486549Hi,
Glad we were able to help, and thanks for posting your solution. If you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike -
AuthorPosts
- The topic ‘Move Category Description below products 2025’ is closed to new replies.