Een introductie tot het ontwikkelen van thema's voor WooCommerce: hoe je vanaf nul je eigen e-commerce website kunt bouwen.

Als je al vertrouwd bent met het ontwikkelen van WordPress-themes, zal het maken van een thema voor WooCommerce een logische volgende stap zijn. WooCommerce is een winkelmodule voor WordPress, en de kernfuncties worden geleverd door een reeks aangepaste paginaontwerpen, cycli en shortcodes. Een WooCommerce-thema moet deze elementen op de juiste manier gebruiken en ervoor zorgen dat alle stijlen en scripts soepel worden geïntegreerd.

Om een WooCommerce-thema te ontwikkelen, moet je eerst een basis-WordPress-thema hebben. Dit kan een subtheme zijn dat je vanaf nul hebt gemaakt, of een thema dat is gebaseerd op een bestaande framework (zoals Underscores of Storefront) en dat je verder hebt ontwikkeld. Het is belangrijk dat je je thema duidelijk aangeeft als compatibel met WooCommerce; alleen op deze manier zullen plugins de templatebestanden van WooCommerce in je themastructuur kunnen worden ingevoegd.

Het hele proces omvat enkele belangrijke stappen: het opzetten van een ontwikkelingsomgeving, het begrijpen van de structuur van de templates in WooCommerce, het maken van de benodigde themafailen, het aanpassen van functies met behulp van action- en filterhooks, en ten slotte het testen en optimaliseren van het eindproduct. We gaan deze stappen nu een voor een uitwerken.

Aanbevolen leesmateriaal Handboek voor het ontwikkelen van WordPress-themes: bouw je eerste thema van scratch op。

Opzetten van een ontwikkelingsomgeving en themastructuur

Voordat je met het schrijven van code begint, is een betrouwbare lokale ontwikkelingsomgeving essentieel. Het wordt aanbevolen om tools als Local, XAMPP of Docker te gebruiken om snel een omgeving op tezetten met PHP, MySQL en Apache/Nginx. Zorg ervoor dat je PHP-versie voldoet aan de meest recente vereisten van WooCommerce (meestal PHP 7.4 of hoger), en installeer WordPress en de WooCommerce-plugin.

UltaHost WordPress-hosting

30-daagse garantie voor het terugbetalen van het geld, onbeperkt bandbreedte- en databestand, gratis DDoS-beveiliging, en een prijsvoordeel van 50% bij een aankoop van 3 jaar.

toegangspagina

Maak een nieuwe themakatalog, bijvoorbeeld... my-woocommerce-themeEn plaatst het daar. wp-content/themes/ In de map met thema’s moet een thema dat minstens de basisfuncties van WooCommerce ondersteunt de volgende essentiële bestanden bevatten:

• style.cssHet thema-sjabloon bevat de standaardkoppennotaties van WordPress.
• index.phpHet hoofdtemplatebestand van het thema.
• functions.phpDe kernbestanden die worden gebruikt om themafuncties, registratie-scripts en -stijlen te toevoegen, en om de ondersteuning voor WooCommerce aan te geven.

Allereerst: style.css In de hoofdcommentaren moet je de thema-informatie duidelijk definiëren.

/*
Theme Name: My WooCommerce Theme
Theme URI: https://yourdomain.com/
Author: Your Name
Description: 一个为 WooCommerce 定制的现代电商主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-woocommerce-theme
*/

Vervolgens, in functions.php In het bestand is het eerste en belangrijkste punt om te verklaren dat je thema WooCommerce ondersteunt. Dit wordt gedaan door… add_action Hooken en… add_theme_support Deze functionaliteit is gerealiseerd door een function.

<?php
/**
 * 主题功能文件
 */
function my_woocommerce_theme_setup() {
    // 声明主题支持 WooCommerce
    add_theme_support( 'woocommerce' );
    // 可选：支持 WooCommerce 的特定功能，如产品画廊缩放、轮播等
    add_theme_support( 'wc-product-gallery-zoom' );
    add_theme_support( 'wc-product-gallery-lightbox' );
    add_theme_support( 'wc-product-gallery-slider' );
}
add_action( 'after_setup_theme', 'my_woocommerce_theme_setup' );

// 注册主题的样式和脚本
function my_woocommerce_theme_scripts() {
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );
    // 引入 WooCommerce 样式
    if ( class_exists( 'WooCommerce' ) ) {
        wp_enqueue_style( 'woocommerce-theme', get_template_directory_uri() . '/css/woocommerce.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_woocommerce_theme_scripts' );
?>

Het begrijpen en aanpassen van WooCommerce-templates

WooCommerce gebruikt een set aan overdraagbare templates. Alle standaardtemplatebestanden vind je in de map met plugins. templates/ Binnen de map. Om deze templates aan te passen in je thema, moet je in de map met je thema een bestand met de naam ‘’ (leeg te vullen) maken. woocommerce De map, en vervolgens worden de corresponderende templatebestanden gekopieerd en gewijzigd volgens de gelijke padstructuur in het plugin.

Aanbevolen leesmateriaal Ultimate Guide to WordPress Theme Development: Build Your First Custom Theme from Scratch。

Als je bijvoorbeeld de template van een enkele productpagina wilt wijzigen, is de standaardroute in WooCommerce… plugins/woocommerce/templates/single-product.phpJe moet in je thema de volgende elementen creeren:themes/my-woocommerce-theme/woocommerce/single-product.phpAls deze bestand bestaat, zal WooCommerce de versie uit het thema voorrang geven bij het laden.

Het concept van template-lagen is een andere belangrijke factor. WooCommerce heeft de standaardtemplate-lagen van WordPress slim geïntegreerd. Voor de winkelpagina (Shop Page) zal WordPress bijvoorbeeld op de volgende manier naar templates zoeken:archive-product.php > archive.php > index.phpDus, creëren… archive-product.php Dit is de meest directe en effectieve manier om de pagina met de lijst van custom winkels te genereren.

De meest gebruikelijke kerntemplatebestanden waarvan het wordt aanbevolen om deze voorrangrijk te overschrijven, zijn:
- single-product.phpPagina met details over één product.
- archive-product.phpProductarchieven-pagina (hoofdpagina van de winkel).
- cart/cart.phpWinkelwagen-pagina.
- checkout/form-checkout.phpAfrekeningspagina.
- myaccount/my-account.phpMijn accountpagina.

hosting.com gedeelde hosting

Hoge prestaties met AMD EPYC CPU's, NVMe SSD opslag en LiteSpeed, 24/7 deskundige interne ondersteuning, geavanceerde beveiligingsmaatregelen waaronder SSL, bescherming tegen brute kracht, malware en DDoS, besparingen tot 73%

toegangspagina

Tijdens het overschrijven van een template is het beste om eerst de originele template-bestanden uit het WooCommerce-plugin te kopieren naar het corresponderende mapverhaal van je thema, en pas daarna te bewerken. Dit voorkomt dat essentiële functies van WooCommerce worden beschadigd.

Functies aanpassen met behulp van hooks

Naast het overschrijven van templatebestanden, biedt WooCommerce ook een groot aantal acties (actions) aan.action) en filters (filterHet gebruik van ‘hooks’ biedt de mogelijkheid om inhoud en functies te toevoegen, te verwijderen of te bewerken zonder de kerntemplatebestanden te hoeven aanpassen. Dit is meestal lichter en gemakkelijker in onderhoud dan wanneer je de template rechtstreeks overschrijft.

Action hooks bieden je de mogelijkheid om op specifieke plaatsen eigen code uit te voeren. Je kunt bijvoorbeeld een aangepaste blok toevoegen na de productbeschrijving.

Aanbevolen leesmateriaal Een professionele website bouwen: een volledig handboek voor het ontwikkelen van een aangepaste WordPress-thema vanaf nul。

function my_custom_product_message() {
    echo '<p class="my-custom-notice">🎉 Deze product wordt momenteel gebruikt in een beperkt tijdslange actie!</p>';
}
add_action( 'woocommerce_single_product_summary', 'my_custom_product_message', 20 );

Hier.woocommerce_single_product_summary Het is een bijnaam.20 Het zijn prioriteitscijfers (die bepalen de uitvoeringsvolgorde).

De filter-haken bieden je de mogelijkheid om gegevens te bewerken. Bijvoorbeeld kun je het tekstvak van de “In winkelwagen leggen”-knop veranderen.

InterServer gedeelde hosting

Shared hosting $2.50 USD per maand, eerste maand $0.1 USD promo code tryinterserver, 461 cloud apps scripts, een klik te installeren.

toegangspagina

function my_custom_add_to_cart_text( $text ) {
    if ( is_product() ) {
        $text = __( '立即购买', 'my-woocommerce-theme' );
    }
    return $text;
}
add_filter( 'woocommerce_product_single_add_to_cart_text', 'my_custom_add_to_cart_text' );

Een ander krachtig hulpmiddel zijn de template-hooks. WooCommerce bevat veel van deze hooks in de template-bestanden. do_action Door deze hooks te gebruiken, kun je de weergave van de paginastructuur precies beheersen. Je kunt ze inzetten om... remove_action Om onnodige elementen te verwijderen, of om... add_action Een nieuw element invoegen op een specifieke plek is flexibeler dan het rechtstreeks bewerken van het templatebestand. Dit is vooral handig wanneer je de WooCommerce-plugin updatet, aangezien je wijzigingen dan minder gemakkelijk kunnen worden overschreven.

Stijlontwerp en responsief ontwerp

WooCommerce beschikt over een set basisstijlen, maar om het te laten passen bij het design van je thema, is een gedetailleerde aanpassing van de stijlen nodig. Het is aan te raden om een apart CSS-bestand te maken. woocommerce.cssEn in… functions.php De inhoud wordt op basis van bepaalde condities geladen, zoals in het voorafgaande voorbeeld wordt beschreven.

Het kernpunt van stijlontwerp is om de HTML-structuur en CSS-klassen te begrijpen die door WooCommerce worden generereerd. Het is een goede manier om snel te starten om elementen als de productlijst en het winkelwagentje te onderzoeken met de ontwikkelaarstool van je browser. WooCommerce biedt voor bijna alle elementen uitgebreide, semantische CSS-klassen aan. .product、.woocommerce-loop-product__link、.onsale etc.

Als voorbeeld: het wijzigen van het ontwerp van de label “Speciale aanbieding”:

/* 在你的 woocommerce.css 中 */
.onsale {
    background-color: #ff3366;
    color: white;
    border-radius: 0;
    padding: 0.5em 1em;
    font-weight: bold;
    top: 10px;
    right: 10px;
    left: auto; /* 覆盖默认的 left: 0 */
}

Responsive design is van essentieel belang voor e-commerce websites. Je moet ervoor zorgen dat product grids en tabellen (zoals de winkelwagen en orderdetails) goed worden weergegeven op alle schermgrootten. Gebruik CSS-mediaqueries en Flexbox/Grid-layouts om de manier waarop producten worden weergegeven te herstructureren.

@media (max-width: 768px) {
    ul.products li.product {
        width: 48%; /* 在平板设备上每行显示两个产品 */
        margin-right: 4%;
    }
    ul.products li.product:nth-child(2n) {
        margin-right: 0;
    }
}

@media (max-width: 480px) {
    ul.products li.product {
        width: 100%; /* 在手机上每行显示一个产品 */
        margin-right: 0;
    }
    /* 调整结账表单的输入框 */
    .woocommerce form .form-row {
        width: 100%;
        float: none;
        margin-right: 0;
    }
}

Samenvatting

WooCommerce-themaontwikkeling betekent dat je kennis van WordPress-thema's combineert met de specifieke vereisten van een online winkel. Het belangrijkste is om de werking van de template-overlays te begrijpen en om handig te kunnen omgaan met actionen en filter-hooks om flexibele functionaliteiten te kunnen aanpassen. Van het opzetten van de omgeving, het aangeven van ondersteuning voor bepaalde functies, het overschrijven van belangrijke templates tot het gebruik van hooks voor fine-tuning en diepe stijlafstellingen: ieder stap is een fundament voor het bouwen van een professionele, unieke en efficiënte online winkel. Vergeet nooit dat je moet ontwikkelen in sub-thema's en dat het gebruik van hooks bovenop het rechtstreekse aanpassen van de kerntemplates de beste praktijk is voor het behouden van de maintainability (onderhoudbaarheid) en de toekomstige compatibiliteit van je code.

Veelgestelde vragen (FAQ)

Hoe verwijder je of verplaats je elementen op de productdetalijensite binnen een thema?

Je kunt gebruikmaken van remove_action Er is een functie beschikbaar om bepaalde elementen uit de productbeschrijving te verwijderen. Eerst moet je weten met welke hook het element is toegevoegd en welke prioriteit het heeft.

Als je bijvoorbeeld de producttitel wilt verwijderen, kun je kijken naar… plugins/woocommerce/templates/single-product/title.phpAls je het bestudeert, zal je zien dat het gebruikmaakt van een soort ‘haak’ om te functioneren. woocommerce_single_product_summary Voeg dit toe met prioriteit 5. Dan, in je onderwerp… functions.php Je kunt het verwijderen door de volgende code toe te voegen:

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );

Om de elementen te herordenen, moet je eerst alle relevante elementen verwijderen en ze daarna opnieuw in de gewenste volgorde toevoegen. Alternatief kan je de prioriteitscijfers van de elementen aanpassen; hoe lager het cijfer, des eerder wordt het element uitgevoerd en des hoger staat de positie in de uitvoeringsvolgorde.

Waarom zijn de modificaties aan mijn thema verdwenen nadat ik WooCommerce heb bijgewerkt?

Als je direct het directory van het WooCommerce-plugin hebt gewijzigd…wp-content/plugins/woocommerce/Als de templatebestanden niet op de juiste plek zijn opgeslagen, worden deze wijzigingen elke keer dat de plugin wordt bijgewerkt overschreven. Dit is absoluut niet aan te raden.

De juiste manier om dit te doen, is door het template-overriding-mechanisme van WooCommerce te gebruiken. Kopieer de templatefile waar je aan wilt modificeren naar het mapje met je eigen thema (theme directory). woocommerce/ Je kunt modificaties maken in een submap. Op deze manier laadt WooCommerce voorrangkelijk de versie van je thema op, en wanneer plugins worden bijgewerkt, worden je aangepaste instellingen niet verstoord.

Hoe maak je een aangepaste lay-out voor de pagina's van een WooCommerce-winkel?

De efficiëntste manier om een aangepaste lay-out te creeren voor een winkelpagina, is door de bestaande code te overschrijven (of te bewerken). archive-product.php Templatebestand. Je kunt de HTML-structuur van dit bestand volledig opnieuw ontwerpen.

Een andere, meer modulaire manier om dit te doen, is het gebruik van ‘hooks’. De inhoud van de winkelpagina wordt voornamelijk gecreëerd door… woocommerce_before_main_content、woocommerce_archive_description、woocommerce_before_shop_loop、woocommerce_after_shop_loop Je kunt de hooks besturen. Je kunt de standaardlus verwijderen en je eigen aangepaste query's en loopsstructuren tussen deze hooks invoegen om unieke raster-, lijst- of Masonry-lay-outs te maken.

Daarnaast kun je, door de WordPress Customizer te gebruiken of een thema-optiespagina te maken, gebruikers de mogelijkheid geven om het lay-out te wijzigen zonder dat ze de code hoeven aan te passen.

Hoe voeg je op de juiste manier custom JavaScript toe aan een WooCommerce-thema?

Om een custom JavaScript toe te voegen aan een WooCommerce-thema, moet je de beste praktijken voor het schrijven van WordPress-scripts volgen. Hier zijn enkele tips: functions.php In het document wordt gebruikgemaakt van wp_enqueue_script Er zijn functies voor het registreren en laden van scripts.

Zorg ervoor dat je dit gebruikt. wp_enqueue_script Wanneer je een script gebruikt, kun je afhankelijkheden instellen via de derde parameter – bijvoorbeeld van jQuery. Voor scripts die specifiek zijn voor WooCommerce, zijn soms afhankelijkheden van andere bibliotheken of frameworks vereist. wc-add-to-cart-variation(Gebruikt voor variabele producten) of wc-checkout(Gebruikt op de afrekeningspagina.) Goed. wp_localize_script Je kunt veilig PHP-variabelen (zoals AJAX-URL's of website-adressen) overdragen naar je JavaScript-bestand.

PHP
function my_theme_wc_scripts() {
wp_enqueue_script(
'my-woocommerce-script',
`get_template_directory_uri()` . 'https://www.likacloud.com/js/my-woocommerce.js',
array( 'jquery', 'wc-add-to-cart-variation' ), // Afhankelijkheden
'1.0.0',
true // Laad in de voetnoot
);
`wp_localize_script('my-woocommerce-script', 'myWooParams', array(...));`
'ajax_url' => admin_url( 'admin-ajax.php' ),
) );
}
add_action( 'wp_enqueue_scripts', 'my_theme_wc_scripts' );