Stellen Sie sich genau das Entwicklungsprogramm zusammen, das zu Ihren Zielen passt. Besuchen Sie nur jene Inhalte und Module, die Sie wirklich weiterbringen – zum für Sie passenden Zeitpunkt.
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.