Wir alle wissen, dass man in Divi keine Möglichkeit alle WooCommerce Kategorien auf einer Seite anzuzeigen, dafür gibt es kein Modul.

Heute zeige ich euch aber mal wie ich das gerne löse.

Video

Anleitung

Zuerst einmal muss man natürlich im Theme Builder eine Shop Seite anlegen, da könnt ihr dann Titel usw anlegen. Jetzt müsst ihr da einfach eine Zeile auswählen, ein Code Modul einfügen und den Shortcode eingeben. Und nachher müsst ihr nur noch die Funktion und das CSS einbauen.

Shortcode

Diesen Shortcode braucht man.

[categories_grid]

Functions

function wp_categories_grid() {

$cats = get_terms(array(
'taxonomy' => 'product_cat',
'hide_empty' => false,
));

$output = '<div class="cat-grid">';

    foreach ($cats as $cat) {
    $thumbnail_id = get_term_meta($cat->term_id, 'thumbnail_id', true);
    $image_url = $thumbnail_id ? wp_get_attachment_url($thumbnail_id) : '';

    $link = get_term_link($cat);

    $output .= '<a class="cat-item" href="' . esc_url($link) . '">
        <div class="cat-card">';


            if ($image_url) {
            $output .= '<img src="' . esc_url($image_url) . '" alt="' . esc_attr($cat->name) . '">';
            }

            $output .= '
            <h3>' . esc_html($cat->name) . '</h3>
        </div>
    </a>';
    }

    $output .= '</div>';

return $output;
}
add_shortcode('categories_grid', 'wp_categories_grid');

Styling

Wie man hier sehen kann, ich habe die Breite der Kategorien-Grid Elemente auf 25% gesetzt. Das heisst es sind immer 4 pro Zeile. Zwischen den einzelnen Kategorieelemente gibts dann einen kleinen Abstand von 20px, natürlich ist alles responsive. Zum Spass habe ich noch ein kleinen Hover Effekt eingebaut.

/* woocommerce kategorie grid */
.cat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.cat-item {
  width: calc(25% - 20px);
  text-decoration: none;
}

.cat-card {
  background: #f5f5f5;
  border-radius: 10px;
  overflow: hidden;
  text-align: center;
  transition: 0.25s ease;
}

.cat-card img {
  width: 100%;
  aspect-ratio: 1 / 1; 
  object-fit: cover;  
  display: block;
}

.cat-card h3 {
  margin: 15px 10px;
  font-size: 18px;
  color: #333;
}

.cat-card:hover {
  transform: translateY(-5px);
  background: #e2e2e2;
}

/* Mobile: 2 pro Zeile */
@media (max-width: 768px) {
  .cat-item {
    width: calc(50% - 20px);
  }
}

/* Klein: 1 pro Zeile */
@media (max-width: 480px) {
  .cat-item {
    width: 100%;
  }
}