[Resolved] Customize archive page

[Author]

Posts

[ralphG]

Tell us what you are trying to do?
We use woocommerce and toolset woocommerce and I'm trying to customize the archive pages.
I want to add a header image, title + description to each taxonomy archive (woocommerce categories) and shop page. I've managed to add Title and description on taxonomy pages.
For header images I already created a custom field to woocommerce categories, but I'm searching how to display them.

For shop page I didn't found any solution yet, since it is managed via toolset and it is not a category.

We use a child-theme based on astra.

Is there any documentation that you are following?

Is there a similar example that we can see? No.

What is the link to your site?

[Jamal]

Hello and thank you for contacting the Toolset support.

Currently, Toolset, only allows displaying term fields(category image is a term field) inside a loop of posts, there is now way to display it on the category archive page with Toolset shortcodes. You will need to create your own shortcode and then use it inside your WordPress archive, or you can leverage this solution from WooCommerce
https://docs.woocommerce.com/document/woocommerce-display-category-image-on-category-archive/

I hope this helps. Let me know your feedback.

[ralphG]

Hi,
Indeed the doc provided helps, but even by twiking it, I can't manage to access the custom field.
The field name is : wpcf-category-background-image,

Here's the code I use so far :

add_action( 'woocommerce_archive_description', 'woocommerce_category_bg_image', 2 );
function woocommerce_category_bg_image() {
    if ( is_product_category() ){
	    global $wp_query;
	    $cat = $wp_query->get_queried_object();
		
	    $bg_image = get_term_meta( $cat->term_id, 'wpcf-category-background-image', true );
	    $image = wp_get_attachment_url( $bg_image );
	    if ( $image ) {
		    echo '<img src="' . $image . '" alt="' . $cat->name . '" />';
		}
	}
}

When I try with the original code, the thumbnail is correctly displayed, but this don't work for the custom field.

[Jamal]

Hello and my apologies for the late reply, but I do not work on Sundays and Mondays.

Toolset image fields store the URL of the image instead of the ID. We won't need to use wp_get_attachment_url, I tested the following code and it worked for me:

add_action( 'woocommerce_archive_description', 'woocommerce_category_bg_image', 2 );
function woocommerce_category_bg_image() {
    if ( is_product_category() ){
        global $wp_query;
        $cat = $wp_query->get_queried_object();

        $bg_image = get_term_meta( $cat->term_id, 'wpcf-category-background-image', true );
        if ( $bg_image ) {
            echo '<img src="' . $bg_image . '" alt="' . $cat->name . '" />';
        }
    }
}

[ralphG]

Hi,
I tried the code you provided, but it don't work for me.
I added this to debug, and it seems that the custom field is not retrieved at all.

$term_vals = get_term_meta($cat->term_id);
var_dump($term_vals);echo "<br>";

Result in screeshot.

[Jamal]

I tried the following code on my local setup and it gives the following hidden link

echo '<pre>' . print_r( get_term_meta( $cat->term_id ), true ) .'</pre>';

Please check if this issue appears when:
- Only Toolset plugins are activated. It will tell us if there is an interaction issue with another plugin.
- The theme is set to a WordPress default like Twenty Fourteen. It will tell us if there is an interaction issue with your theme.
If the problem disappears, start activating one at the time to track where the incompatibility is produced.

If the issue persists, I'll need to take a copy of your website for further debugging locally. Would that be ok?

[ralphG]

Hi,
I tried to deactivate all plugins (except woocommerce and toolset) and switch theme to 2020 but the field didn't show up. See result in screenshot.

EDIT :
Sorry, after searching for a while I found that all images that I had defined in the fields were not here anymore. I added them again and now the field appear correctly.
I don't know why I have to set them again, but now it works. Thanks again.

[ralphG]

Thank you, now I can get the url of the image in the custom field,
but what I want to do is to use this image as background for the header of the page, I don't know if it is possible to modify directly the archive page from toolset ?

[Jamal]

Awesome, I am glad I could be of help. I am also confident we can customize the background of the page, but that might be tricky. At least we have now a way of getting the image, depending on how the header is built, we can set the background image with a custom CSS. Check this tutorial about background images hidden link

Keep in mind, that Toolset manages the return of the WordPress function the_content().

This being said, I'll need to check your archive page on the frontend and maybe on the backend too to figure out how to set the background image. If you would agree to share credentials to your website, your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **
Please specify the archive pages you want to customize and any details that would help me find the required elements easily/quickly.

[Jamal]

Thank you for the access credentials and my apologies for the late reply.

According to your WPML configuration, you are using the root page feature, this means that all pages except the root page will always have the language code (/fr/ or /en/ ) hidden link

This is creating some inconsistencies, a product category can be accessed in French(default language) with two URLs:
- hidden link is using the Toolset archive template.
- hidden link is not using the Toolset archive. It is probably using the default archive template from the theme.

Before touching the template, I wanted you to confirm what you expect to have. Because your screenshot was not for the Toolset archive template. You may want to share another screenshot!

[ralphG]

Hi, no problem,
Ok, it was because we migrated from Polylang (which had this configuration by default, language code for all pages) to WPML for using Toolset. So we kept the same URL structure after the migration.

If this is causing problems with Toolset we can disable it.

The screenshot is from another site, not ours, it is a visual reference of what we want to achieve.

And then what is the best solution to modify the categories pages via hooks in functions.php, or by editing the template (from woo-commerce views) ?

[Jamal]

Now that you are using WPML, I do not see a need for the query filter on language code, and also no need for the custom field that holds the language. WPML will take care of assigning the correct language to each post/translation.
It is probably causing a problem with Toolset, but it is useless, so I'd suggest disabling it(custom field + query filter).

What I have noticed before is not working anymore, The toolset archive template is not used on French, and the category archive does not use /fr/ code in URL anymore, below is what I found last week:
- hidden link is using the Toolset archive template.
- hidden link is not using the Toolset archive. It is probably using the default archive template from the theme.

On English, the shop page is correctly using the Toolset archive template, but category pages are not. There is an inconsistency in URL structure in the default language, and also on the secondary language:
- The shop page has the slug "activites".
- Product categories have also the slug "activites".
I believe that they should not have the same slug. Please choose another slug for one of them, make sure the translation to secondary language is complete(page slug, category base slug). Then save the permalinks again, and let's check if the French archive pages(shop, categories pages) will be using the Toolset archive template or not.

And then what is the best solution to modify the categories pages via hooks in functions.php, or by editing the template (from woo-commerce views) ?
You can do both. Toolset archives are responsible for parts of the page(mainly the content), hooking into functions.php gives total control of the rendering, but needs programming skills.

Let's fix the issues with slugs and URLs, and let's make sure that archive pages are using the Toolset archive template, then we can customize the background at a certain level(within the content generated by the archive) inside the archive template. Sounds good?

[ralphG]

Hi, sorry for late reply,
We applied all modifications that you advised :
- Restablished default shop page slug
- Deactivated language folder for default language

But now we have to update htaccess file to add 301 redirections, for SEO.
Can you check if the archive template is correctly applied please ?

[Jamal]

The issue is still there and the category archive does not use the toolset archive template and is always redirected from:
- hidden link
To:
- hidden link

I wanted to check it again, but the user password is not working anymore.

To quickly handle this issue, I would like to take a copy of your website and debug it locally. I'll first investigate without WPML, then with WPML. We prefer a Duplicator package as described in https://toolset.com/faq/provide-supporters-copy-site/
Please use filter to reduce the size of the copy as described in this video around 1:00 hidden link
If Duplicator fails to create a copy, we'll need a database copy/export, plugins, and theme folders, all in a zip file.
Your next reply will be private to let you share the download link safely.

[Jamal]

Thank you for your feedback. I didn't notice that the URLs are different.

Check this screenshot hidden link you will see the different areas of the pages and their "origin".

You can remove the breadcrumbs with a custom code as described here hidden link

For the title and the description, I found a documentation article from Astra theme, but nothing about the archive pages. Check it here hidden link

As a workaround I hid all of them with the following CSS code:

.term-description, .page-title, .woocommerce-breadcrumb {
  display: none;
}

I also disabled the custom code from functions.php by commenting on the add_action line.

Then, I thought about a solution that does not include any custom coding. It consists of customizing the view editor section, by adding adding the header on it, check this screenshot hidden link

<div class="my-archive-header" style="width:100%;">
  <h1>[wpv-taxonomy-archive info="name"]</h1>
  <p>[wpv-taxonomy-description]</p>
  <style>
    .my-archive-header {
    	background-image: url([wpv-taxonomy-field name='wpcf-category-background-image']);
    }
  </style>
</div>

And I used a custom CSS code, that can also go into the above code. This CSS code try to give a minimum and maximum width for the header:

.my-archive-header {
    width: 100%;
    min-height: 400px;
    max-height: 700px;
    background-size: cover;
    background-position: center center;
  margin-bottom: 20px;
}

This solution will need to be adapted for the shop page because all of the used shortcodes will not return a value:

[wpv-taxonomy-archive info="name"]</h1>
[wpv-taxonomy-description]</p>
[wpv-taxonomy-field name='wpcf-category-background-image']

Read more about these shortcodes here https://toolset.com/documentation/programmer-reference/views/views-shortcodes/

For the shop page, you can wrap all of them inside a conditional tag, and if they are empty, you can use a default value:
- "Shop" when [wpv-taxonomy-archive info="name"] is empty.
- "A description for the shop" when [wpv-taxonomy-description] is empty.
- "A default background image" when [wpv-taxonomy-field name='wpcf-category-background-image'] is empty.

I hope this helps. Let me know your feedback.