Willekeurige Elementor template toevoegen aan een WooCommerce productpagina

Vraag:

Ik heb een WordPress website met WooCommerce webshop. Voor de WooCommerce productpagina heb ik gebruik gemaakt van de Elementor Pro template functionaliteit.

Hoe kan ik per product content toevoegen die ik op een centrale plek kan beheren en vormgeven met Elementor?

Sommige content zal bij meerdere producten getoond moeten worden. Andere content wordt maar een keer getoond. De content toevoegen aan het product is geen optie.

Antwoord:

Het beste kan je hiervoor gebruik maken van de template mogelijkheden van Elementor. Deze kan je via onderstaand stappenplan aan een product koppelen. Je bepaald zelf of je een template een keer of juist vaker gebruikt.

Stap 1:
Voeg in Elementor > Templates een nieuwe template toe van het type “section”. Vul deze template met de content en opmaak die getoond moet worden bij het product.

Ga nu naar het overzicht van Elementor templates. In de laatste kolom vind je de shortcodes staan die je herkend aan de [ ] tekens. Onthoud het id, dat bestaat uit getallen, van de template die je zojuist hebt aangemaakt.

Stap 2:

Kopieer onderstaande PHP code naar een nieuw .php bestand en noem dit bijvoorbeeld “load_elementor_template_perproduct.php”. Onderstaande PHP code is een WordPress dropin plugin die standaard bestaat uit maximaal 1 PHP bestand.

Upload dit bestand in de map wp-content/plugins. Ga vervolgens in jouw WordPress website naar het overzicht van plugins en activeer de zojuist geuploadded plugin.

<?php
/**
Plugin Name: Laad Elementor template per product
Plugin URI:
Description: Laad per product een extra Elementor template in.
Author: Tim de Hoog
Version: 1.0
Author URI: https://www.timdehoog.nl
 */

function custom_product_info_func( $atts ){
    global $product;

    $idTemplate = (int) $product->get_attribute( 'elementor_product_info' );

    if (is_numeric($idTemplate)) {
        return do_shortcode( '[elementor-template id="' . $idTemplate . '"]' );
    } else {
        return '';
    }
}
add_shortcode( 'custom_product_info', 'custom_product_info_func' );

Stap 3:

Ga naar de Elementor template voor de WooCommerce productpagina. Voeg aan deze pagina een Shortcode widget toe en voer in het vak de volgende shortcode toe:

[custom_product_info]

Klik op Bijwerken om de wijzigingen definitief te maken. Bovenstaande shortcode zal ervoor zorgen dat WordPress de plugin uit stap 2 gaat uitvoeren als de pagina wordt geladen.

Je kan de shortcode ook op meerdere plekken gebruiken.

Stap 4:

Als je nu een willekeurig product bezoekt zal je zien dat er nog niet heel veel gebeurt. De PHP code uit stap 2 verwacht een product eigenschap met de naam “elementor_product_info” die het id bevat van de template uit stap 1.

1. Open een WooCommerce product in de wp-admin omgeving.
2. Scroll naar “Productgegevens” en klik in de linkerlijst op “Eigenschappen”.
3. Voeg een “Custom producteigenschap” toe in het midden van het scherm.
4. Geef deze als naam “elementor_product_info” en als waarde het id uit stap 1
5. Klik rechts bovenin op “Bijwerken”
6. Bezoek het product, je zal zien dat de template uit stap 1 nu ingeladen wordt

Conclusie:

Met deze oplossing kan je dus efficiënt mooie Elementor templates gemakkelijk koppelen aan een of meerdere producten. Dit voorkomt ook dat je dubbele content hebt. Stap 1 kan je natuurlijk een aantal keren herhalen zodat je in stap 4 per product verschillende id’s in kan voeren.

> Bekijk meer Elementor blogs