Code 1 - uses wp_list_categories to list product categories in columns of x categories up to a total of y, with a link to view all categories if there are more than y.
Code 2 - Later realising i needed thumbnails aswell, I tried using get_terms to retrieve the list and thumbnails. However it is just 1 long list and I am having a lot of trouble trying to apply the principles from the Code 1 to Code 2 to make it work.
This is Code 2:
<?php
$args = array(
'taxonomy' => 'product_cat',
'title_li' => '',
'hide_empty' => 0,
'echo' => 0,
'show_count' => 0,
'style' => '',
'parent' => 0
);
$get_cats = get_terms( $args );
?>
<div class="design">
<div class="menu">
<ul class="hoverimage">
<?php
foreach ( $get_cats as $cat ) {
$thumbnail_id = get_term_meta( $cat->term_id, 'thumbnail_id', true );
$image = wp_get_attachment_url( $thumbnail_id );
if($image == "") {
$image = get_bloginfo('url') . '/wp-content/uploads/woocommerce-placeholder-100x100.png';
}
?>
<li class="menu-item" data-image="<?php echo $image; ?>"><a href="<?php echo get_term_link( $cat ); ?>"><?php echo $cat->name; ?></a></li>
<?php
}
?>
</ul>
</div>
<div class="zoom-preview">
<div class='img_container'>
</div>
</div>
<div class="clear"></div>
</div>
<script>
$(function(){
var imageContainer = '.img_container',
imageList = '.hoverimage',
maxWidth = 'parent', // parent or specific css width/
defImage = '<?php bloginfo('url'); ?>/wp-content/uploads/woocommerce-placeholder-100x100.png';
var $imageContainer = $(imageContainer).eq(0);
var $imageList = $(imageList).eq(0);
if (maxWidth === 'parent') { maxWidth = $imageContainer.width() + 'px'; }
//Load images and set hover::
$imageList.find('li').each(function(index){
if (typeof $(this).data('image') === 'string') {
$imageContainer.append(
"<img id='imageToggle"+index+
"' src='"+$(this).data('image')+
"' style='max-width: "+maxWidth+"; display:none;' />"
);
$(this).data("image","imageToggle"+index);
$(this).hover(
function(){ loadImage($(this).data('image')); },
function(){ loadImage('imageToggleDef'); }
);
}
});
//Load default:
$imageContainer.append(
"<img id='imageToggleDef"+
"' src='"+defImage+
"' style='max-width: "+maxWidth+"' />"
);
//Toggle images:
function loadImage(imageId) {
$imageContainer.stop(true).fadeOut('fast', function(){
$(this).find('img').hide();
$(this).find('img#'+imageId).show();
$(this).fadeIn('fast');
});
}
});
</script>
This is Code 1. I am trying to combine this with Code 2 while still using get_terms instead of wp_list_categories. Ive noticed that you cant explode the results from get_terms, but having trouble where $i seems to be a string and not a number....Its over my head and Im getting lots of errors.
// First, define these.
$max_cat_count = 32; // this is 'x'
$qty_per_column = 8; // this is 'y'
// Then the $args array.
$args = array(
'taxonomy' => 'product_cat',
'number' => $max_cat_count + 1, // keep the + 1
'title_li' => '',
'hide_empty' => 0,
'echo' => 0,
'style' => '',
// ... your other args here ...
);
// Get the categories list.
$get_cats = wp_list_categories( $args );
// Split the list into array items.
$cat_array = explode( "<br />", $get_cats );
$total = count( $cat_array );
$list_number = 1;
$_new_col = false;
foreach ( $cat_array as $i => $category ) {
if ( $i >= $max_cat_count ) {
break;
}
if ( $i % $qty_per_column === 0 ) {
// Close previous column, if any.
if ( $_new_col ) {
echo '</div><!-- .cat_columns -->' . "\n";
}
// Open new column.
$id = 'cat-col-' . $list_number;
echo '<div class="cat_columns" id="' . $id . '">' . "\n";
$_new_col = true;
$list_number++; // increment the columns count
}
if ( $total > $max_cat_count && $i === $max_cat_count - 1 ) {
// Make sure to change the # to the proper URL.
echo "\t" . '<div><a href="#">View All</a></div>' . "\n";
} else {
echo "\t" . '<div>' . trim( $category ) . '</div>' . "\n";
}
}
// Close last column, if any.
if ( $_new_col ) {
echo '</div><!-- .cat_columns -->' . "\n";
}
This is what the output looks like:
divwith the category link/name?.cat_columnslike this?.. If yes, you can just use CSS?