Need Help with Creating a Custom Taxonomy Archive Page for WooCommerce Products

This topic has 4 replies, 2 voices, and was last updated 1 month, 3 weeks ago by Gagan.

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

Author

Posts

October 23, 2024 at 10:14 PM #46754

Participant

Hello Metabox Team and Community,

I’m currently working on a project using the Metabox plugin along with Oxygen Builder. I’m trying to create a custom archive page for my WooCommerce product taxonomy, but unable to achieve after doing so many attempts. I also tried to make it happen it with Piotnet Forms but it only support 'Image' field and not supporting Advanced Image and other types image fields, which I don't want to use because it required to upload the image every time instead selecting image from media library. Now I want to achieve it using MB Views.

Here’s what I’m trying to achieve:

Custom Taxonomy: I have a custom taxonomy called 'Concerns' (singular name is: 'concern') associated with my WooCommerce products. Some example taxonomy types/terms include acne removal, skin brightening, and anti-ageing. I only want to display the taxonomy terms on this archive page.

Each term should be displayed with:
- A background image (the same image for all terms)
- Custom image of taxonomy (from the custom image field)
- The taxonomy name (e.g., "Acne Removal")
- And the complete card should be linked that directs users to the term's archive page, where they can find different products under that term.

I have tried using following method but not succeed: https://docs.metabox.io/tutorials/create-taxonomy-thumbnails-featured-images/?fbclid=IwY2xjawGFei1leHRuA2FlbQIxMAABHYbEqGKbZ7HnUQ76ucL84cHarFXPbtsrOq1zuaGw-WijtM8RzNyunnWAlA_aem_COdN1xZbh7NxYMEC72-lpQ

Note: I not familiar with advanced coding, just know the CSS, HTML, and basics.

I appreciate your help

October 24, 2024 at 1:03 PM #46755

Gagan

Participant

After learning a little from the documentations I have implemented the following code:

{% set args = {taxonomy: 'concerns', hide_empty: false} %}
{% set concerns = mb.get_terms(args) %}

<div class="concerns-container">
    <h1 class="heading-title">Product Concerns</h1>
    <div class="concern-items">
    {% for concern in concerns %}
        <div class="concern-card">
            <a href="{{ mb.get_term_link(concern.term_id) }}" class="concern-link">
                <div class="concern-background" style="background-image: url('https://mywebsite.com/wp-content/uploads/2024/09/Concern-Background-Image.svg');">
                    {% set custom_image = mb.get_term_meta(concern.term_id, 'custom_thumbnail', true) %}
                    {% if custom_image %}
                        <img src="{{ custom_image }}" alt="{{ concern.name }}" class="concern-custom-image" />
                    {% else %}
                        <img src="https://mywebsite.com/wp-content/uploads/2024/09/Concern-Background-Image.svg" alt="Default Image" class="concern-custom-image" />
                    {% endif %}
                </div>
                <h3 class="concern-title">{{ concern.name }}</h3>
            </a>
        </div>
    {% endfor %}
    </div>
</div>

but it's still not working. Please guide through!

October 24, 2024 at 6:50 PM #46756

Peter

Moderator

Hello Gagan,

What is not working in your code? I think it is custom_image URL. Because the image field saves the image ID to the database if you use the WordPress function get_term_meta(), it will return the image ID only.
You can use the helper function rwmb_meta() to get useful information. Please follow the documentation https://docs.metabox.io/fields/image-advanced/#template-usage

If it still doesn't work, please export the field group to a JSON file and share it here. I will help you check the field settings.
https://docs.metabox.io/extensions/meta-box-builder/#export--import

October 25, 2024 at 10:49 AM #46760

Gagan

Participant

Its working now. I was doing a silly mistake to use a wrong slug of taxonomy. Here is the final code:

{% set args = {taxonomy: 'concern', hide_empty: false} %}
{% set concerns = mb.get_terms(args) %}
<div class="concerns-archive">
    <h1 class="heading-title">Concerns</h1>
    <div class="concern-items">
        {% if concerns|length > 0 %}
            {% for concern in concerns %}
                <div class="concern-item">
                    <div class="concern-item-inner">
                        <div class="concern-image-column">
                            <div class="concern-background" style="background-image: url('https://mywebsite.com/wp-content/uploads/2024/09/Concern-Background-Image.svg'); background-position: center; background-size: cover;">
                                {% set custom_image_id = mb.get_term_meta(concern.term_id, 'custom_thumbnail', true) %}
                                {% set custom_image_url = custom_image_id ? mb.wp_get_attachment_image_url(custom_image_id, 'full') : false %}
                                {% if custom_image_url %}
                                    <img src="{{ custom_image_url }}" alt="{{ concern.name }}" class="f-concern-image" style="padding: 12px; border-radius: 50%;" />
                                {% else %}
                                    <img src="https://mywebsite.com/wp-content/uploads/2024/09/4.avif" alt="Default Image" class="f-concern-image" style="padding: 12px; border-radius: 50%;" />
                                {% endif %}
                            </div>
                        </div>
                        <div class="concern-details-column">
                            <h3 class="concern-title">{{ concern.name }}</h3>
                            <p class="concern-description">{{ concern.description }}</p>
                            <a href="{{ mb.get_term_link(concern.term_id) }}" class="concern-button" target="_blank" rel="noopener">Check Related Products</a>
                        </div>
                    </div>
                </div>
            {% endfor %}
        {% else %}
            <p>No concerns found.</p>
        {% endif %}
    </div>
</div>

October 25, 2024 at 10:50 AM #46761

Gagan

Participant

Thanks @Peter for the help!

Author

Posts

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

You must be logged in to reply to this topic.