Woocommerce Tabs

https://woocommerce.com/document/editing-product-data-tabs/

 

Um WooCommerce-Tabs zu manipulieren, ist es oft notwendig, Aktionen und Filter-Hooks zu verwenden. Hier ist ein einfaches Tutorial auf Deutsch mit Beispielcode, der zeigt, wie Sie WooCommerce-Tabs beeinflussen können.

### 1. Ziel: Ein neues Tab hinzufügen

#### Schritt 1: Funktion für das neue Tab

Fügen Sie den folgenden Code zu Ihrer `functions.php`-Datei im Theme hinzu:

```php
function custom_woocommerce_product_tabs( $tabs ) {
// Füge ein neues Tab hinzu
$tabs['custom_tab'] = array(
'title' => __( 'Benutzerdefiniertes Tab', 'textdomain' ),
'priority' => 50,
'callback' => 'custom_tab_content',
);

return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'custom_woocommerce_product_tabs' );

// Callback-Funktion für den Tab-Inhalt
function custom_tab_content() {
echo '<h2>' . __( 'Benutzerdefiniertes Tab Inhalt', 'textdomain' ) . '</h2>';
echo '<p>' . __( 'Hier ist der Inhalt für das benutzerdefinierte Tab.', 'textdomain' ) . '</p>';
}
```

#### Schritt 2: Stil für das neue Tab

Fügen Sie den folgenden CSS-Code zu Ihrer `style.css`-Datei hinzu, um das Erscheinungsbild des neuen Tabs anzupassen:

```css
/* Stil für das benutzerdefinierte Tab */
#tab-custom_tab {
background-color: #f5f5f5;
padding: 20px;
border: 1px solid #ddd;
}

“`

### 2. Ziel: Ein vorhandenes Tab entfernen

#### Schritt 1: Funktion zum Entfernen des Tabs

Fügen Sie den folgenden Code zu Ihrer `functions.php`-Datei hinzu:

“`php
function remove_existing_tab( $tabs ) {
// Entferne das vorhandene Tab
unset( $tabs[‘description’] );

return $tabs;
}
add_filter( ‘woocommerce_product_tabs’, ‘remove_existing_tab’, 98 );
“`

#### Schritt 2: Stil für die Produktbeschreibung anpassen

Da die Beschreibung nicht mehr als Tab vorhanden ist, können Sie den folgenden CSS-Code verwenden, um den Stil der Produktbeschreibung anzupassen:

“`css
/* Stil für Produktbeschreibung, wenn das Tab entfernt wurde */
.woocommerce-tabs .panel {
background-color: #fff;
padding: 20px;
border: 1px solid #ddd;
}
“`

Diese Codes sollten Ihnen einen Einstieg in die Manipulation von WooCommerce-Tabs geben. Beachten Sie, dass Sie möglicherweise Änderungen an den Codes vornehmen müssen, um sie an Ihre spezifischen Anforderungen anzupassen.

Agile Projekte | KI | Digitale Transformation - Schulungen mit Mehrwert

Kleingruppen-Kurse bis maximal 6 Personen garantieren praxisnahen Wissenstransfer und individuelle Betreuung - massgeschneidert für Ihre beruflichen Herausforderungen.

  • Rasche und kompetente Betreuung. Wir garantieren Ihnen Antwort innerhalb von 24 Stunden.
  • Regelmäßiger Kursstart mit Durchführungsgarantie. Max. 6 Teilnehmer für optimale Lernerfolge.
  • Falls Sie einen Termin versäumen. Dann steigen Sie bei einem der nächsten Kurse ganz einfach wieder ein.
Rückruf mit X-Sieben vereinbaren
Fragen? Rückruf-Service nutzen - Unsere Bildungsberater helfen gerne
Persönliche Karriere- und Schulungsberatung
Schulung wählen und schon bald fit für die neue Arbeitswelt sein