Archived topic
Categories List not posts on Archive page
32 replies · Started by David on August 11, 2022
Yeah, woo uses its own custom functions, it hooks in this callback: woocommerce_maybe_show_product_subcategories which results in this:
Its quite clever but probably way overkill for what you need.
I would suggest checking out the ACF method above as it shouldn't be more complicated than that.
Thanks David, great support as always :)
Just need to try and add some styling to it now!
https://staging.howardandsons.co.uk/massey-ferguson-exports/
Awesome - do you need a hand with the stying ?
So I'm ok with styling...
https://staging.howardandsons.co.uk/massey-ferguson-exports/
It's creating the php to sit inside my styled divs, and make it work dynamically, that I would love help with :)
Here is what I currently have
<?php
$tax = 'massey-ferguson-categories';
$terms = get_terms( $tax, $args = array(
'hide_empty' => false, // do not hide empty terms
));
foreach( $terms as $term ) {
$term_link = get_term_link( $term );
$image = get_field('category_thumbnail', 'product_category_' . $term_id );
if( $term->count > 0 ) {
echo '<div><a href="' . esc_url( $term_link ) . '"></div>';
echo '<img src="' . $image['url'] . '" alt="' . $image['alt'] .'">';
echo $term->name .'</a>';
} elseif( $term->count !== 0 ) {
echo '' . $term->name .'';
}
}
?>
<div class="grid-container">
<div class="row">
<div class="col-xs-12 col-sm-4">
<a href=""><div class="tax-cat-box">
<div class="tax-cat-image" style="background-image: url(https://staging.howardandsons.co.uk/wp-content/uploads/2022/08/about-14.jpg);">
</div>
<div class="tax-cat-title"><h3>Category Title</h3></div>
</div></a>
</div>
<div class="col-xs-12 col-sm-4">
<a href=""><div class="tax-cat-box">
<div class="tax-cat-image" style="background-image: url(https://staging.howardandsons.co.uk/wp-content/uploads/2022/08/about-14.jpg);">
</div>
<div class="tax-cat-title"><h3>Category Title</h3></div>
</div></a>
</div>
</div>
</div>
<style>
.tax-cat-box {border:1px solid #d3d3d8;box-shadow: 5px 5px 10px 0 rgb(0 0 0 / 10%);}
.tax-cat-image {background-repeat: no-repeat;background-position: center center;background-size: cover;transition: all 0.5s ease;overflow: hidden;min-height: 300px;position: relative;}
.tax-cat-title {text-align:center; padding:20px;}
.tax-cat-title h3 {font-size: 15px;font-weight: 700;text-transform: uppercase;margin-bottom: 0;}
</style>
It would be great to add this back up image, if no category image is added too...
https://staging.howardandsons.co.uk/wp-content/uploads/2022/08/no-image.jpg
ACF category image is category_image
Any help with getting it to work would be fantastic.
Thanks
Dave
Maybe this?
<?php
$tax = 'massey-ferguson-categories';
$terms = get_terms( $tax, $args = array(
'hide_empty' => false, // do not hide empty terms
));
// your fallback image url
$fallback_image = 'your_fallback_image_url';
echo '<div class="grid-container"><div class="row">';
foreach( $terms as $term ) {
$term_link = get_term_link( $term );
$image = get_field('category_thumbnail', 'product_category_' . $term_id );
$image_url = $image['url'];
if ( empty( $image_url ) ) {
$image_url = $fallback_image;
}
if( $term->count > 0 ) {
echo '<div class="col-xs-12 col-sm-4"><a class="tax-cat-box" href="' . esc_url( $term_link ) . '">';
echo '<div class="tax-cat-image" style="background-image: url(' . $image_url . ');"></div>';
echo '<div class="tax-cat-title"><h3>' . $term->name . '</h3></div>';
echo '</a></div>';
}
}
echo '</div></div>'
?>Thanks so much David - I made a could of small changes and it worked :)
Only thing that isn't showing is the advanced custom field category_image
<?php
$tax = 'massey-ferguson-categories';
$terms = get_terms( $tax, $args = array(
'hide_empty' => false, // do not hide empty terms
));
// your fallback image url
$fallback_image = 'https://staging.howardandsons.co.uk/wp-content/uploads/2022/08/no-image.jpg';
echo '<div class="grid-container"><div class="row">';
foreach( $terms as $term ) {
$term_link = get_term_link( $term );
$image = get_field('category_image', 'product_category_' . $term_id );
$image_url = $image['url'];
if ( empty( $image_url ) ) {
$image_url = $fallback_image;
}
if( $term->count > 0 ) {
echo '<div class="col-xs-12 col-sm-4"><a href="' . esc_url( $term_link ) . '"><div class="tax-cat-box">';
echo '<div class="tax-cat-image" style="background-image: url(' . $image_url . ');"></div>';
echo '<div class="tax-cat-title"><h3>' . $term->name . '</h3></div>';
echo '</div></div></a>';
}
}
echo '</div></div>'
?>
<style>
.tax-cat-box {border:1px solid #d3d3d8;box-shadow: 5px 5px 10px 0 rgb(0 0 0 / 10%);}
.tax-cat-image {background-repeat: no-repeat;background-position: center center;background-size: cover;transition: all 0.5s ease;overflow: hidden;min-height: 300px;position: relative;}
.tax-cat-title {text-align:center; padding:20px;}
.tax-cat-title h3 {font-size: 15px;font-weight: 700;text-transform: uppercase;margin-bottom: 0;}
</style>So $image = get_field('category_image', 'product_category_' . $term_id );
Is the category_image the field name ?
And is this product_category_ the right taxonomy ? I assume no....
So I changed it to
$image = get_field('category_image', 'massey-ferguson-categories' . $term_id );
category_image being the field name and massey-freguson-categories being the taxonomy.
https://staging.howardandsons.co.uk/massey-ferguson-exports/
Try:
$image = get_field('category_image', 'massey-ferguson-categories' . $term->term_id );
No luck :(
Keep that line ie.
$image = get_field('category_image', 'massey-ferguson-categories' . $term->term_id );
And after that add:
var_dump( $image );
That will dump the variable contents on the page, we can then see what its doing if anything.
Like this...
<?php
$tax = 'massey-ferguson-categories';
$terms = get_terms( $tax, $args = array(
'hide_empty' => false, // do not hide empty terms
));
// your fallback image url
$fallback_image = 'https://staging.howardandsons.co.uk/wp-content/uploads/2022/08/no-image.jpg';
echo '<div class="grid-container"><div class="row">';
foreach( $terms as $term ) {
$term_link = get_term_link( $term );
$image = get_field('category_image', 'massey-ferguson-categories' . $term->term_id );
var_dump( $image );
$image_url = $image['url'];
if ( empty( $image_url ) ) {
$image_url = $fallback_image;
}
if( $term->count > 0 ) {
echo '<div class="col-xs-12 col-sm-4"><a href="' . esc_url( $term_link ) . '"><div class="tax-cat-box">';
echo '<div class="tax-cat-image" style="background-image: url(' . $image_url . ');"></div>';
echo '<div class="tax-cat-title"><h3>' . $term->name . '</h3></div>';
echo '</div></div></a>';
}
}
echo '</div></div>'
?>
https://staging.howardandsons.co.uk/massey-ferguson-exports/
Showing a Null
Does the image need to be Image Array, Image URL or Image ID in ACF settings?
So its returning nothing.
Generally i work with ID or URL.
I've got it set at URL. The code above is returning this...
https://staging.howardandsons.co.uk/massey-ferguson-exports/
The 100 series should be showing an image as one has been uploaded.
So the get_field doesn't seem to be returning anything. Can you check with ACF Support to see what we're missing ?
