Wanneer je het Storefront thema van WooCommerce gebruikt zal je misschien wel opgevallen zijn dat je de sidebar die standaard op de WooCommerce pagina’s niet zomaar weg kan halen. Er is hier standaard in de customizer namelijk geen mogelijkheid voor, tenzij je de extensie Storefront Powerpack gebruikt.

In dit artikel laat ik je zien hoe je aan de hand van een twee code snippets de sidebar handmatig weg kan halen. Gebruik hiervoor wel bij voorkeur het Storefront child-theme, of je eigen child theme.

De Storefront sidebar verwijderen op WooCommerce pagina's
De standaard weergave van Storefront shop pagina’s mét sidebar

De eerste code snippet is een PHP-functie waarmee je de functie overschrijft die Storefront gebruikt om de sidebar te tonen. Plak onderstaande code in het functions.php bestand van je child theme en sla het bestand op.

/**
 * Remove the Storefront sidebar from WooCommerce pages.
 */
add_action( 'get_header', 'wpsimpel_remove_storefront_sidebar' );

function wpsimpel_remove_storefront_sidebar() {

	if ( is_woocommerce() ) {

		remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
	}
}
De Storefront sidebar verwijderen op WooCommerce pagina's

Nu is de sidebar weg, maar worden de productkolommen en de producten op de product-detailpagina’s nog niet in de volledige breedte van de pagina weergegeven. Dit los je eenvoudig op met een stukje CSS-code.

Open het style.css bestand van je child theme, plak daar onderstaande CSS code in en sla het bestand op.

body.woocommerce #primary {
	float: none;
	width: 100%;
}

Als je de pagina ververst zal je zien dat de kolommen op de pagina nu in de volledige breedte worden getoond.

De Storefront sidebar verwijderen op WooCommerce pagina's
De weergave van Storefront shop pagina’s zonder sidebar

Aan het begin van het artikel werd de WooCommerce Storefront extensie Storefront Powerpack al een keer genoemd. Hiermee kan je, naast de sidebar verwijderen, je Storefront thema nóg meer naar eigen wens aanpassen. Hier kan je er meer over lezen en de extensie eventueel aanschaffen.

Beoordeel deze post:

Gemiddeld: 5 / 5. Aantal beoordelingen: 1

Nog geen beoordelingen

Whoops! 😔

Zou je ons willen laten weten hoe we (deze post) kunnen verbeteren?

Reacties

0 reacties op "De sidebar verwijderen van WooCommerce pagina’s in Storefront".

Geef een reactie

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

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.