Personnalisation du thème woocommerce strorefront

14Nov, 2017

Toutes les personnalisations que j’utilise, et que j’ai cherché à propos du thème passe partout Storefront réalisé par les développeurs de et pour Woocommerce.

Qu’est ce que le thème Storefront ?

Si vous cherchez des modifications pour ce thème, vous devez déjà savoir ce qu’il est, ce qu’il représente. Pour tous les autres lecteurs, voici une courte présentation.

Storefront est le thème Woocommerce utilisé majoritairement dans tous les pays du monde.

Toutes les langues sont disponibles, toutes les déclinaisons sont possibles et envisageables, merveilleux.

Pour lancer un e-commerce avec WordPress, il n’y a pas mieux, ou pas.

En fait, il y a toujours mieux, parfois c’est plus cher…

Là, non seulement le thème de base est entièrement gratuit mais en plus, il y a une grande communauté autour, sans oublier qu’il est possible de faire appel au support de woocommerce pour trouver l’aiguille dans la botte de foin.

Encore une fois, wordpress peut tout faire, et pour cette raison, il peut être une véritable usine à gaz.

Woocommerce, c’est la même chose !

C’est super, mais ça peut vite devenir très agaçant.

Pour vous simplifier les recherches car presque tout est en anglais et pour soulager ma mémoire, je vais lister les différentes modifications ici même. Ce ne sera pas sur 36 articles ni même avec des caractères spéciaux html.

Supprimer le fil d’ariane sur Storefront

Ou plutôt cacher le fil d’ariane, le breadcrumbs.

Facile et en deux secondes.

Dans vos style.css du thème enfant il faut ajouter
.woocommerce .x-breadcrumbs a:nth-child(3) {
display: none;
}
.woocommerce .x-breadcrumbs .delimiter:nth-child(3n-1) {
display: none;
}.woocommerce .x-breadcrumbs a:nth-child(2) {
display: none;
}
.woocommerce .x-breadcrumbs .delimiter:nth-child(2n-1) {
display: none;
}

 

Supprimer la sidebar de storefront

Pour le visuel ou pour améliorer l’expérience utilisateur, il peut être bon de supprimer la sidebar de votre e-commerce. Pour cela, dans functions.php de votre thème enfant, ajoutez :
function remove_storefront_sidebar() {
if ( is_product() ||  is_product_tag() || is_category() ) {
remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
}
}
add_action( 'get_header', 'remove_storefront_sidebar' );

Attention, dans mon cas, la sidebar de storefront est supprimé pour la page produit, la page étiquette produit et les pages catégories du blog.

Supprimer le lien de l’auteur dans storefront

Lorsque l’on est sur un magazine, il peut être intéressant de laisser le lien sur l’auteur, mais pour un blog, pour un e-commerce, quel est l’intérêt ? Se créer du contenu dupliqué ? Pas bon !

Pour supprimer le lien auteur dans storefront-post-meta, ajoutez ce code dans functions.php

Supprimer les meta en début d’article de blog storefront

Rappeler que l’article se trouve dans telle catégorie n’est peut être pas très utile. Rappeler la date etc. non plus. J’ai eu besoin de modifier cela et même de supprimer la post-meta.

Pour cela il faut ajouter dans functions.php le code suivant :
add_action( 'init', 'ltg_remove_meta' );
function ltg_remove_meta() {
remove_action( 'storefront_single_post', 'storefront_post_meta', 20 );
}

 

Supprimer le logo et le lien dans le header de votre e-commerce storefront et le blog

Vous cherchez à améliorer l’expérience utilisateur, à faire quelque chose de différent et utile, pour toute autre raison, voici une solution, un peu plus longue à mettre en place.

Il faut compter une grosse minute…

Dans functions.php ajouter :

Supprimer les meta en début d’article de blog storefront

Rappeler que l’article se trouve dans telle catégorie n’est peut être pas très utile. Rappeler la date etc. non plus. J’ai eu besoin de modifier cela et même de supprimer la post-meta.

Pour cela il faut ajouter dans functions.php le code suivant :
function ltg_remove_meta() {
remove_action( 'storefront_single_post', 'storefront_post_meta', 20 );
}

Supprimer le logo et le lien dans le header de votre e-commerce storefront et le blog

Vous cherchez à améliorer l’expérience utilisateur, à faire quelque chose de différent et utile, pour toute autre raison, voici une solution, un peu plus longue à mettre en place.

Il faut compter une grosse minute…

Dans functions.php ajouter :
function storefront_custom_logo() {
remove_action( 'storefront_header', 'storefront_site_branding', 20 );
//add_action( 'storefront_header', 'storefront_display_custom_logo', 20 );
}
add_action( 'init', 'storefront_header' );
function storefront_header() {
remove_action( 'storefront_header', 'storefront_product_search', 40 );
}

puis dans header.php :
<?php if ( is_product() ) { $terms = get_the_terms( $post->ID, 'product_cat' );
foreach ($terms as $term) {
$product_cat_id = $term->term_id;
$urlcatproduct =get_term_link( (int)$product_cat_id, 'product_cat' );;
//echo get_term_link( (int)$product_cat_id, 'product_cat' ); ?><a href="<?php echo $urlcatproduct; ?>" class="site-logo-link" rel="home">
<img src="https://www.monndd.com/wp-content/uploads/logoF.png" alt="Ma super boutique" title="Ma super boutique"/></a>
<?php break; } } elseif ( is_product_category() ) { ?>
<a href="https://www.monndd.com/" class="site-logo-link" rel="home">
<img src="https://www.monndd.com/wp-content/uploads/logoF.png" alt="Ma super boutique categorie produit" title="Ma super boutique categorie produit"/></a>
<?php } elseif ( is_single() ) {
$categories = get_the_category();
if ( ! empty( $categories ) ) { echo '<a href="' . esc_url( get_category_link( $categories[0]->term_id ) ) . '" class="site-logo-link" rel="home">
<img src="https://www.monndd.com/wp-content/uploads/logoF.png" alt="' . esc_html( $categories[0]->name ) . '" title="' . esc_html( $categories[0]->name ) . '"/></a>'; } }
elseif ( is_category() ) { ?>
<a href="https://www.monndd.com/" class="site-logo-link" rel="home">
<img src="https://www.monndd.com/wp-content/uploads/logoF.png" alt="Ma super boutique categorie blog" title="Ma super boutique categorie blog"/></a>
<?php } else { ?>< a href="https://www.monndd.com/" class="site-logo-link" rel="home">
<img src="https://www.monndd.com/wp-content/uploads/logoF.png" alt="Ma super boutique" title="Ma super boutique"/></a>
<?php }; ?>

Je vous explique ce qui se passe avec le code ci-dessus ?

 

Si vous êtes dans une page, un article, un produit, une catégorie du blog, une catégorie de produit, vous renvoyez l’utilisateur vers le parent au lieu de lui proposer l’accueil du site quoi qu’il arrive.

Désactiver les avis woocommerce

La partie avis review en anglais sur un e-commerce et plus particulièrement sous wordpress et woocommerce dans notre cas est très importante…quand il y a des avis et que ceux-ci sont activés.

Il arrive parfois de vouloir désactiver les avis sur le e-commerce.

Dans ce cas il faut désactiver les commentaires dans la partie discussion.

Il est également possible de passer par le fichier functions.php c’est une solution que je préfère.

Avec cette modification du fichier wordpress, du thème enfant de votre boutique en ligne, vous pouvez laisser les commentaires sur le blog mais désactiver les avis sur les produits et d’autres choses par la même occasion. Regardez :
// Disable product review (tab)
function woo_remove_product_tabs($tabs)
{ unset($tabs['description']);
// Remove Description tab unset($tabs['additional_information']);
// Remove Additional Information tab unset($tabs['reviews']);
// Remove Reviews tab return $tabs; }
add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );

Désactiver les informations supplémentaires sur woocommerce

Pour votre boutique, vous avez peut être mis en place des produits variables, par poids, couleurs, quantité, que sais je encore.

Il n’est d’aucune utilité pour l’utilisateur et futur client de voir ces informations, elles sont déjà dans le choix à commander.

Là encore il convient de désactiver cette option additionnal_information woocommerce de base.

Elle est indiquée dans le code juste au dessus.

La suite, plus tard.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

X