Elementor is een krachtige page builder voor WordPress waarmee gebruikers op een intuïtieve manier aantrekkelijke webpagina’s kunnen maken. Een van de handige functies van Elementor is Display Conditions, waarmee je specifieke inhoud kunt tonen of verbergen op basis van bepaalde criteria. In dit artikel gaan we bespreken hoe je een aangepaste Display Condition toevoegt voor producttypes, specifiek voor WooCommerce, met behulp van aangepaste code.
Wat zijn Elementor Display Conditions?
Elementor Display Conditions stellen je in staat om de zichtbaarheid van secties, kolommen of widgets op je WordPress-pagina’s te beheren op basis van specifieke voorwaarden. Hiermee kun je inhoud tonen of verbergen op basis van contextuele regels, zoals de URL van de pagina, de gebruikersrol, de datum, enzovoort.
Wat zijn Producttypes?
Producttypes zijn een belangrijk concept in WooCommerce, een populaire e-commerce plugin voor WordPress. Producttypes definiëren de aard van een product, bijvoorbeeld of het een eenvoudig product, een variabel product, een groepsproduct, enzovoort is. Het is essentieel om producttypes te begrijpen, omdat ze bepalen hoe producten worden weergegeven en hoe klanten ze kunnen kopen.
Aangepaste Code voor Elementor Display Conditions
Hieronder vind je aangepaste code waarmee je een aangepaste Display Condition kunt toevoegen voor producttypes in WooCommerce. Deze code moet worden toegevoegd aan het functions.php-bestand van je WordPress-thema of in een aangepaste plugin.
function is_elementor_loaded_and_active() {
// Controleer of Elementor is geïnstalleerd en geactiveerd
if ( ! did_action( 'elementor/loaded' ) ) {
return false;
}
return true;
}
function elementor_init() {
add_action( 'elementor/theme/register_conditions', 'add_new_product_type_condition', 900 );
}
function add_new_product_type_condition( $conditions_manager ) {
$taxonomies = get_object_taxonomies( 'product', 'objects' );
$object = isset( $taxonomies['product_type'] ) ? $taxonomies['product_type'] : null;
if( $object !== null ) {
$condition = new \ElementorPro\Modules\ThemeBuilder\Conditions\In_Taxonomy( [
'object' => $object,
] );
$conditions_manager->get_condition( 'product' )->register_sub_condition( $condition );
}
}
function on_plugins_loaded() {
$elementor_is_active = is_elementor_loaded_and_active();
if ( $elementor_is_active === true ) {
add_action( 'elementor/init', 'elementor_init' );
}
}
add_action( 'plugins_loaded', 'on_plugins_loaded' );
De bovenstaande code voegt een nieuwe Display Condition toe die controleert of een product behoort tot een bepaald producttype. Hierbij wordt gebruikgemaakt van de WooCommerce-taxonomie ‘product_type’. De code wordt alleen geactiveerd als Elementor is geladen en actief is op de website.
Door deze code aan je WordPress-site toe te voegen, kun je in Elementor Display Conditions de nieuwe voorwaarde ‘In Producttype’ selecteren en specifieke inhoud tonen of verbergen op basis van het producttype in WooCommerce.
Let op: Het is altijd een goede praktijk om wijzigingen in de code door te voeren via een child theme of een aangepaste plugin om problemen bij thema-updates te voorkomen.
Met deze aanpassing kun je je Elementor-pagina’s nog verder personaliseren op basis van de producttypes die je in WooCommerce gebruikt.
