Volledige tutorial: Verbeter de verkoopconversie met aangepaste productpaginasjablonen in WooCommerce.

Hoewel een gestandaardiseerde productpagina geen fout is, is het moeilijk om je producten te laten opvallen in de hevige concurrentie op de markt. Door aangepaste WooCommerce-producttemplates te gebruiken, krijg je volledige controle over de paginalay-out, de prioriteit van de informatiepresentatie en de gebruikerservaring, zodat je bezoekers kunt helpen een aankoop te doen en de conversiepercentages aanzienlijk kunt verhogen. Deze tutorial leert je stap voor stap hoe je op een veilige en efficiënte manier aangepaste templates kunt maken, van het begrijpen van de structuur van de template tot praktische ontwikkeling en geavanceerde optimalisatietechnieken.

Het WooCommerce-sjablonenysteem analyseren

Voordat je aanpassingen gaat doen, is het van cruciaal belang om de templatehiërarchie van WooCommerce te begrijpen. Op deze manier zorg je ervoor dat je aanpassingen effectief zijn en eenvoudig te onderhouden zijn.

WooCommerce maakt gebruik van een templatesysteem op basis van een themaniveau (Template Hierarchy). Wanneer de winkelpagina moet worden weergegeven, zoekt WooCommerce in een bepaalde volgorde naar de templatebestanden. Het belangrijkste zoekpad is:你的主题目录 -> 插件的模板目录。

Aanbevolen leesmateriaal Wat zijn WooCommerce-klantmetagegevens en waarom moet je deze beheren?。

Meer specifiek zoekt WooCommerce eerst in je huidige thema-map naar een bestand met de naam woocommerce De submap. Als er geen overeenkomstige sjabloonbestanden in het thema aanwezig zijn, wordt er teruggevallen op de sjabloonbestanden die bij de plug-in worden geleverd (geplaatst in de map <). wp-content/plugins/woocommerce/templates/Dit mechanisme betekent dat je veilig elke standaardsjabloon kunt overschrijven door een overeenkomstig bestand in je thema te maken, zonder de kernbestanden van de plug-in te wijzigen. Hierdoor gaan je aangepaste inhoud niet verloren als de plug-in wordt bijgewerkt.

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

Het belangrijkste sjabloonbestand lokaliseren

Voor de productdetailspagina is het belangrijkste sjabloonbestand single-product.phpDit bestand beheert het algemene kader van de volledige productpagina. Hierin wordt meestal gebruikgemaakt van wc_get_template_part() De functie laadt andere, meer gedetailleerde onderdelen van de template, zoals productafbeeldingen, titels, prijzen, samenvattingen, attributen, tabbladen en formulieren.

De belangrijkste sjabloonbestanden waar je op moet letten, bevinden zich meestal in de map 'Thema's'. woocommerce Deze worden onder de submap geplaatst of rechtstreeks uit de map met de plug-in templates gekopieerd. Zo wordt het gebied voor productafbeeldingen bijvoorbeeld gemaakt door single-product/product-image.php Deze controle wordt uitgevoerd door de server, terwijl het toevoegen aan het winkelwagenformulier door de gebruiker wordt gedaan. single-product/add-to-cart.php Beheer. Als je deze structuur begrijpt, kun je elk onderdeel van de pagina nauwkeurig lokaliseren en bewerken.

Drie manieren om een aangepaste producttemplate te maken

Afhankelijk van uw technische vaardigheden en maatwerkvereisten kunt u kiezen voor methoden met verschillende complexiteitsgraden om aangepaste sjablonen te maken.

Maak gebruik van subonderwerpen om veiligheid te garanderen

Dit is de meest aanbevolen en veiligste methode. Maak een subthema (Child Theme) en maak binnen de map van het subthema een mappenstructuur die overeenkomt met de templatehiërarchie van WooCommerce.
Om bijvoorbeeld het hoofdsjabloon van het product te overnemen, moet je in het subthema een pad maken:your-child-theme/woocommerce/single-product.phpEn vervolgens de originele code in de plug-in. single-product.php Kopieer de inhoud van het bestand en voer hierop wijzigingen door. Op deze manier blijven je WooCommerce-aanpassingen behouden, zelfs als het hoofdthema wordt bijgewerkt.

Aanbevolen leesmateriaal Van nul tot honderd: een stapsgewijze handleiding voor het opzetten van een veelzijdige WordPress-blog.。

Dit wordt gerealiseerd met behulp van de Page Builder-plug-in.

Als je niet bekend bent met coderen, kun je gebruikmaken van geavanceerde paginabouwers zoals Elementor Pro, Divi Builder of WPBakery. Deze bieden meestal de mogelijkheid om WooCommerce-producttemplates visueel te bewerken. Je kunt hierbij componenten (zoals titels, galerijen, prijzen en formulieren) rechtstreeks naar de tool slepen en deze vervolgens op alle producten of specifieke productcategorieën toepassen. Deze methode is snel en intuïtief, maar is mogelijk afhankelijk van specifieke plug-ins en kan de laadtijd van de pagina verlengen.

Maak een aangepast sjabloonbestand en wijs dit toe.

Voor complexere of unieke lay-outs kun je een geheel nieuw, onafhankelijk sjabloonbestand maken. Maak bijvoorbeeld een nieuw bestand in je thema-map. single-product-custom.phpAan de bovenkant van dit bestand moet je een specifieke templatekop-opmerking toevoegen om de naam ervan te declareren.

<?php
/**
 * Template Name: 自定义产品布局
 * Template Post Type: product
 */
get_header(); // 调用主题头部
?>
// ... 你的自定义HTML和PHP代码 ...
<?php get_footer(); // 调用主题底部 ?>

Na de creatie kun je, wanneer je een individueel product bewerkt in de WordPress-backend, de “Aangepaste productlay-out” die je zojuist hebt gemaakt, vinden en selecteren in het drop-downmenu “Pagina-eigenschappen” of “Sjabloon”.

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

Praktijk: Voorbeeld van een aangepaste productpagina-lay-out

Laten we dit aan de hand van een specifiek voorbeeld leren: hoe je de elementen op een productpagina opnieuw rangschikt en het formulier “Toevoegen aan winkelwagen” naast de productafbeeldingen plaatst, zodat de koopknop meer opvalt.

Allereerst, in je subthema's woocommerce Maak of kopieer in de map single-product.phpWe moeten de logica van dit bestand opnieuw structureren.

De originele sjabloon laadt de verschillende onderdelen meestal in de juiste volgorde. Wat we moeten doen, is de oproepen van deze onderdelen opnieuw ordenen. Hier volgt een versimpelde voorbeeldcode die laat zien hoe je een lay-out met twee kolommen maakt:

Aanbevolen leesmateriaal Wel, wel! De ultieme gids voor aangepaste artikeltypen in WordPress: van nul naar expert。

// 文件路径：your-child-theme/woocommerce/single-product.php
while ( have_posts() ) : the_post(); ?>
<div id="product-<?php the_ID(); ?>" no numeric noise key 1007>
    <div class="custom-product-container">

<!-- 左栏：主要放图片和摘要 -->
        <div class="product-left-column">
            <?php
            // 输出产品图片
            do_action( 'woocommerce_before_single_product_summary' );
            ?>
        </div>

<!-- 右栏：主要放标题、价格、表单和元信息 -->
        <div class="product-right-column">
            <?php
            // 输出产品摘要内容，但我们需要调整内部顺序
            ?>
            <div class="summary entry-summary">
                <?php
                // 1. 先输出标题
                woocommerce_template_single_title();
                // 2. 立即输出价格
                woocommerce_template_single_price();
                // 3. 紧接着输出“添加到购物车”表单
                woocommerce_template_single_add_to_cart();
                // 4. 再输出摘要描述
                woocommerce_template_single_excerpt();
                // 5. 输出元信息（如SKU、分类）
                woocommerce_template_single_meta();
                ?>
            </div>
        </div>

</div>

<div class="product-full-width">
        <?php
        // 产品详情选项卡（描述、额外信息、评论）仍放在底部全宽显示
        do_action( 'woocommerce_after_single_product_summary' );
        ?>
    </div>
</div>
<?php endwhile; // end of the loop. ?>

Vervolgens moet je de bijbehorende CSS toevoegen om een lay-out met twee kolommen te maken. Voeg de volgende CSS toe aan het subthema: style.css In het document:

.custom-product-container {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 60px;
}
.product-left-column {
    flex: 1;
    min-width: 300px;
}
.product-right-column {
    flex: 1;
    min-width: 300px;
}
.product-full-width {
    flex-basis: 100%;
}
.summary entry-summary .cart {
    margin: 25px 0; /* 给购物车表单增加上下边距 */
}

Geavanceerde optimalisatietechnieken en best practices

De basisaanpassingen van de lay-out zijn slechts het begin. De volgende tips kunnen het conversiepercentage van de pagina verder verbeteren.

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

Het toevoegen en verwijderen van content met behulp van actiehaken.

De WooCommerce-sjablonen bevatten veel actiehaken (Action Hooks), waarmee je op specifieke plekken inhoud kunt toevoegen of verwijderen zonder de sjabloonbestanden rechtstreeks te bewerken. Als je bijvoorbeeld een waarschuwing voor “uit voorraad” onder de productprijs wilt toevoegen, kun je dit in het subthema doen. functions.php Toevoegen aan de Chinese (vereenvoudigde) taal:

add_action( 'woocommerce_single_product_summary', 'custom_stock_notice', 15 );
function custom_stock_notice() {
    global $product;
    if ( $product-&gt;get_stock_quantity() < 10 && $product->get_stock_quantity() &gt; 0 ) {
        echo '<p class="low-stock" style="color:#d33;">🔥 库存紧张，仅剩 '. $product-&gt;get_stock_quantity() .' 件！</p>';
    }
}

Hier,woocommerce_single_product_summary Het is een bijnaam.15 Het is een prioriteit (hoe lager het getal, hoe eerder de uitvoering) en wordt gebruikt om de uitvoerpositie te regelen.

Voor verschillende producttypen moeten verschillende sjablonen worden gebruikt.

Je kunt gebruikmaken van de voorwaardelijke logica van WooCommerce om verschillende soorten producten te presenteren, zoals eenvoudige, variabele en gebundelde externe/gerelateerde producten. Bijvoorbeeld, in een aangepaste single-product.php In China kun je dit als volgt beoordelen:

global $product;
if ( $product->is_type( 'variable' ) ) {
    // 加载为可变产品优化的模板部分
    wc_get_template_part( 'single-product/add-to-cart', 'variable' );
} else if ( $product->is_type( 'grouped' ) ) {
    // 加载为分组产品优化的模板部分
    wc_get_template_part( 'single-product/add-to-cart', 'grouped' );
} else {
    // 加载简单产品的默认表单
    wc_get_template_part( 'single-product/add-to-cart', 'simple' );
}

Zorg voor een mobiel-responsieve ervaring.

Wanneer je een aangepaste lay-out maakt, moet je de mobiele weergave testen. De Flexbox-lay-out uit het bovenstaande voorbeeld is zelf al redelijk responsief. Als het scherm bijvoorbeeld op een mobiel apparaat te smal wordt, kun je de twee kolommen in één kolom laten samenvoegen. Dit kun je realiseren met behulp van mediaqueries:

@media (max-width: 768px) {
    .custom-product-container {
        flex-direction: column;
        gap: 20px;
    }
}

Samenvatting

Het aanpassen van de WooCommerce-productpaginasjablonen is een cruciale stap in de richting van personalisatie en conversie in plaats van standaardisatie. Door het begrijpen van de sjabloonhiërarchie van WooCommerce en het gebruik van de veilige strategie van subthema's, kunt u pagina-elementen vrijelijk herschikken en de belangrijkste informatie en oproepen tot actie benadrukken. Of u nu eenvoudige hook-functies gebruikt om tips toe te voegen of de sjabloonbestanden volledig herschrijft om een unieke lay-out te creëren, het uiteindelijke doel is altijd om de besluitvorming voor gebruikers te versoepelen en hen soepel door het aankoopproces te leiden. Vergeet niet om na elke wijziging tests op verschillende apparaten en browsers uit te voeren en gebruik te maken van data-analyses (zoals heatmaps) om de effecten van de wijzigingen te verifiëren en uw productpagina's voortdurend te optimaliseren.

Veelgestelde vragen (FAQ)

Als ik een aangepaste template heb, worden mijn wijzigingen dan overschreven door updates van de WooCommerce-plug-in?

Nee, mits je de juiste methode gebruikt. Als je dit doet via de (sub)thema's woocommerce Als je in de map een kopie van het bestand maakt om het standaardtemplate te overschrijven, heeft een update van de WooCommerce-plug-in geen enkele invloed op je aangepaste bestanden. Dit komt doordat WooCommerce bij het laden van het template eerst de versie in het thema gebruikt. Dit is de veiligste manier om dit te doen.

Hoe pas je een aangepast sjabloon alleen toe op een specifieke productcategorie?

Hiervoor is wat extra code-logica nodig. Een manier om dit te doen, is door je aangepaste sjabloonbestanden te bewerken (bijvoorbeeld single-product.phpHet gebruik van voorwaardelijke beoordelingen in Joomla!. Allereerst wordt de categorie van het huidige product bepaald en vervolgens worden er verschillende templateonderdelen weergegeven op basis van het resultaat. Bijvoorbeeld:if ( has_term( 't-shirts', 'product_cat' ) ) { ... }Een flexibele manier om dit te doen, is door meerdere sjabloonbestanden te maken met de methode “aangepaste sjabloontoewijzing” en vervolgens verschillende sjablonen te selecteren voor producten van verschillende categorieën met behulp van externe plug-ins of aangepaste velden.

Ik heb het sjabloon gewijzigd, maar er is niets veranderd op de voorpagina. Hoe kan ik dit probleem oplossen?

Volg de volgende stappen om dit te controleren: Zorg er eerst voor dat je het juiste bestand aanpast en dat het bestand zich op de juiste pad in het actieve (sub)thema bevindt (bijvoorbeeld your-theme/woocommerce/single-product.phpTen tweede, verwijder de cache van WordPress en je browser. Soms kunnen oude cachebestanden het laden van nieuwe code belemmeren. Vervolgens controleer je of er andere plug-ins (met name caching- of optimalisatieplug-ins) of themafuncties zijn die je wijzigingen overschrijven. Als laatste open je de ontwikkelaarstools van je browser (F12) om te kijken of er JavaScript-fouten in de console staan of om te controleren of de CSS-selectoren die je hebt toegevoegd correct worden toegepast.

Is het mogelijk om aangepaste velden te gebruiken om extra informatie weer te geven op de productpagina?

Natuurlijk kan dat, dit is een veel voorkomende behoefte. Allereerst moet je met een plug-in (zoals Advanced Custom Fields) of code een aangepast veld maken voor het artikeltype “product”, bijvoorbeeld “Producthoogtepunten”. Vervolgens voeg je in je aangepaste producttemplate op de gewenste plek (bijvoorbeeld na de productbeschrijving en voor de tabbladen) de volgende code toe: echo get_field('product_highlights'); De code wordt gebruikt om de waarde van dat veld weer te geven. Op deze manier wordt de extra informatie die tijdens de achtergrondbewerking is toegevoegd, dynamisch in de template weergegeven.