Inhoud van dit artikel:
Leestijd: 2 minuten

Yogibag verkoopt yogatassen en heeft daarvoor een webshop. Deze heb ik gemaakt en ik vertel in dit artikel hoe dat gegaan is.

Dit is het resultaat van de landingspagina:

Landingspagina YogiBag.nl

Zoals je ziet zijn hier de twee tassen in al haar soorten en maten direct toonbaar op de eerste pagina. Dit is gedaan om zo direct te kunnen kiezen voor het product naar keuze.

Om dit gedaan te krijgen werk ik met WooCommerce en Elementor om te ontwerpen.

Producten invoegen

Allereerst heb ik de widget toegevoegd van WooCommerce Pages:

Daarmee kan ik het product kiezen:

In dit geval het gekozen product: “Explorer”

Uiterlijk aanpassen

Als je dit product inlaad krijg de volledige pagina van het product. Om dat te voorkomen moeten er een aantal codes worden toegevoegd om bepaalde informatie niet te laten zien.

Product data tabs

Om de product data tabjes te verwijderen heb ik onder weergave > thema editor > functions.php de volgende code toegevoegd:

/**
 * Remove product data tabs
 */
add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );

function woo_remove_product_tabs( $tabs ) {

    unset( $tabs['description'] );      	// Remove the description tab
    unset( $tabs['reviews'] ); 			// Remove the reviews tab
    unset( $tabs['additional_information'] );  	// Remove the additional information tab

    return $tabs;
}

Bron: https://docs.woocommerce.com/document/editing-product-data-tabs/

Het SKU nummer verwijderen

Om het SKU nummer te verwijderen heb ik de volgende code toegevoegd aan functions.php:

add_filter( 'wc_product_sku_enabled', 'bbloomer_remove_product_page_sku' );
  
function bbloomer_remove_product_page_sku( $enabled ) {
    if ( ! is_admin() && is_product() ) {
        return false;
    }
    return $enabled;
}

Categorie verwijderen

Om de categorie te verwijderen heb ik de volgende code toegevoegd aan functions.php:

/* Remove Categories from Single Products */
remove_action( 'woocommerce_single_product_summary',
'woocommerce_template_single_meta', 40 );

Met bovenstaande codes heb je dus een clean product zonder alles eromheen.

Font aanpassen

Tot slot pas je het font aan de titel van het product door onder customizer > Custom CSS de volgende code toe te voegen:

h1.product_title.entry-title {font-family: 'Annie Use Your Telescope'!important; 
}

In bovenstaand geval is de font-family Annie Use Your Telescope.

  • Als

  • Met

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Gedesignd door

Devoked

Gedesignd door

Devoked

Gedesignd door

Devoked

Probleem oplossen

Gebruikers binnenwereld

Devoked achter de schermen

Gebruiker ervaart een probleem

Er ontstaat een behoefte

Doelgroep analyse
Bedrijfsanalyse

Drukt op link

Gebruikers binnenwereld

Devoked achter de schermen