Suite de mon premier tutoriel (qui devenait long) pour l'ajout d'un panier sur un site WooCommerce (compatible avec WPML). Basé sur des propositions/aides d'utilisateurs du groupe Facebook anglais d'Oxygen.
La solution la plus simple est d'utiliser ce plugin https://wordpress.org/plugins/woocommerce-menu-bar-cart/ (ou un autre du genre). Pour rappel avec Oxygen, si vous voulez votre panier dans la barre de côté, il faudra utiliser WooSidebars.
Un utilisateur a expliqué qu'il est possible de récupérer la fonction du thème Storefront de WooCommerce et de l'intégrer dans notre site réalisé avec Oxygen. Voici son site en allemand https://wewiradirekt.de/ .
La première étape sera d'installer, si ce n'est déjà fait, Code Snippet pour mettre la fonction. https://wordpress.org/plugins/code-snippets/ et d'y insérer
<?php function wc_refresh_mini_cart_count($fragments){
ob_start();
?>
<div id="mini-cart-count">
<?php echo WC()->cart->get_cart_contents_count(); ?>
</div>
<?php
$fragments['#mini-cart-count'] = ob_get_clean();
return $fragments;
}
add_filter( 'woocommerce_add_to_cart_fragments', 'wc_refresh_mini_cart_count');
Ensuite nous allons aller placer notre panier dans le menu (mais cette version permet le placement là où vous le voulez) en allant dans le template Main (ou équivalent).
A l'endroit voulu dans votre menu :
1 Créer une div avec deux classes "custom-mini-cart" et "position-relative" (important pour la suite)
2 Placer votre icône représentant le panier
3 Mettre un module de bloc de code avec dans la partie PHP/HTML (Note : "Panier" est à traduire si le site n'est pas en français)
<a class="ct-link-button cart-button" href="/panier/" title="Panier">Panier</a> <div id="mini-cart-count"></div> <div id="mini-cart-wrapper"> <div class="widget_shopping_cart_content"><?php woocommerce_mini_cart(); ?></div> </div>
4 Mettre le CSS dans la feuille de style CSS (stylesheet) et le personnaliser à votre site.
/*-- CART --*/
#mini-cart-count {
display: inline-block;
color: white;
background: #0000ff;
width: 26px;
height: 26px;
border-radius: 50%;
padding-top: 4px;
text-align: center;
font-size: 12px;
font-weight: 800;
margin-left: 10px;
}
#mini-cart-wrapper {
position: absolute;
top: calc(100% + 1px);
left: 50%;
transform: translate(-50%,10%);
background-color: #d3ced2;
backdrop-filter: blur(20px) saturate(180%);
border-radius: 4px;
padding: 25px;
color: white;
pointer-events: none;
opacity: 0;
text-align: center;
transition: all 50ms linear;
z-index: 99;
}
.cart-button {
background-color: transparent;
border: 1px solid #0000ff;
color: #0000ff;
padding: 7px 15px;
font-weight: 600;
}
.position-relative {
position: relative!important;
}
.widget_shopping_cart_content {
width: 330px;
}
.custom-mini-cart:hover #mini-cart-wrapper {
pointer-events: all;
opacity: 1;
transform: translate(-50%,0%);
transition: all 240ms linear;
}
.cart-button.ct-link-button {
color: #0000ff;
padding: 2px 16px;
}
#mini-cart-wrapper a:not(.remove) {
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
width: 90%;
text-align: left;
align-items: center;
}
.custom-mini-cart .woocommerce-mini-cart.cart_list.product_list_widget {
margin: 0px;
}
.buttons.woocommerce-mini-cart__buttons {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
}
.custom-mini-cart .mini_cart_item, .woocommerce .custom-mini-cart ul.product_list_widget li {
display: flex;
flex-wrap: wrap;
margin-bottom: 8px;
background-color: rgba(255,255,255,0.04);
padding-top: 10px;
border: none;
}
.woocommerce ul.product_list_widget li {
border-bottom: 1px solid #d3ced2;
margin-bottom: 4px;
padding-bottom: 8px;
}
.widget_shopping_cart_content .woocommerce-mini-cart__total {
margin-bottom: 0px!important;
text-align: left;
}
REMARQUE : le contenu du panier est visible lors du survol du bouton. J'avais essayé de descendre le contenu du panier mais dans ce cas le passage du survol du bouton au contenu du panier fait que le "wrapper" se ferme. Pour la personnalisation vous devez avoir les notions nécessaires du code CSS.
Je ne suis pas développeur et je partage mon expérience. La demande de mon client (en sous-traitance) était d’avoir un site e-commerce qui soit mis à jour quotidiennement depuis la caisse enregistreuse d’un magasin. Le développeur envoie un fichier xml en FTP qui est lancé par une commande cron tous les soirs (jours ouvrables du magasin) avec WP All Import (plugin également de Soflyy). Vu la lenteur du site avec mon ancien thème, j’ai refait le site avec Oxygen et j’ai supprimé certains plugins (Ultimate Member notamment) et simplifié pour conserver de bonnes performances. Le client m’a donné les instructions du design qui est très simple (le client est Roi).
J’utilise la duplication de mes templates et pages après avoir réalisé mon site dans la première langue. Pour réaliser cette opération il faudra autoriser WPML à dupliquer les templates d’Oxygen (les pages et articles sont normalement configurés directement). Il faudra se rendre dans “WPML > Paramètres > Traduction des types de publication” et activer “Templates”
Note : ceci doit être également réalisé si vous travaillez avec des blocks à traduire ou d’autres éléments. Pour les Widgets, mettre le plugin WooSidebars et là je crée mes widgets pour les deux langues.
Ensuite, se rendre dans “WPML > Gestion des traductions” et sélectionner le contenu à traduire. Dans l’image ci-dessous j’ai rajouté uniquement une page Test pour l’exemple. Dans votre cas il faudra choisir toutes les pages voulues et ensuite répéter l’opération pour tous les templates. Cochez “Dupliquer le contenu” et ensuite validez avec “Duplication”.
À partir de là, vous pouvez vous rendre dans vos pages et templates et, en choisissant la seconde langue, vous avez toutes vos pages dupliquées mais identiques à la première langue. Il nous reste juste une opération à réaliser sur CHAQUE page/template de la seconde (ou plus) langue. En se rendant sur la page, il faut demander à WPML de traduire la "copie" à part de manière à garder deux différentes, ce qui est le but. Donc, cliquez sur "Traduire à part" et ensuite vous pouvez traduire/changer le contenu de la page/template dans l’autre langue.
Note : prendre en compte le fait qu’à intérieur des templates il faudra modifier certains paramètres pour les queries ainsi que les widgets insérés. C’est logique. Ne pas oublier qu’il faut, suivant les cas, traduire les attributs et catégories mais ce tutoriel est juste fait pour aider l’intégration avec Oxygen.
Certains doivent le savoir mais pour moi ce fut une petite surprise. Réaliser une page de connexion avec WooCommerce est très simple. Par défaut lorsque vois insérer le module "My account" d’Oxygen et que le client n’est pas connecté vous avez un bloc avec deux colonnes S’enregistrer et Se connecter. Personnellement je voulais avoir mes formulaires Se connecter et S’inscrire séparés. Un peu de CSS est suffisant.
Note : le module "My account" dans l’édition d’Oxygen ne montre pas le même résultat que sur le front-end (site), pas de panique. Le code block contient le CSS pour séparer les deux colonnes.
CSS pour conserver uniquement la colonne connexion (peut varier suivant votre personnalisation, c’est une base) :
.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {
display: none;
}
.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1 {
float: left;
width: 100%;
}
Pour une page S’inscrire :
.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1 {
display: none;
}
.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {
float: right;
width: 100%;
}
Et voilà 🙂 (le cadre peut être enlevé à votre convenance)
Oxygen permet avec les conditions l’accès aux pages selon que l’utilisateur est connecté ou pas (User logged in) mais je voulais dans mon menu que le client voit Se connecter s’il n’est pas connecté et Déconnexion s’il est connecté. Dans ce cas il faudra installer User menu (gratuit) qui va résoudre ce point. Après installation, rendez-vous dans votre menu et choisissez les pages à autoriser (dans mon cas Connexion/Déconnexion ainsi que Mon Compte) et changer les conditions. WooCommerce, dans la section menu, propose les Terminaisons WooCommerce (à activer éventuellement dans les options de l’écran) où vous trouverez la Déconnexion et où vous pourrez choisir la redirection après déconnexion.
Lien de User Menus https://fr.wordpress.org/plugins/user-menus/
Voilà, c’est mon premier tutoriel pour "J’oxygène mon WordPress" et j’espère qu’il vous a été utile et qu’il est clair. Bon travail et, comme on dit, "Y a plus qu’à ... "
Bruno Pirard (Freelancer passionné)
https://oxygen.bulgaweb.com/
Il peut être pratique de se déplacer dans une page de votre site en cliquant sur un bouton ou un lien, voire dans un menu, qui amène directement à un point donné de la page courante ou d’une autre page du site courant. C’est particulièrement intéressant si le contenu de votre page est long et que vous voulez éviter de pénibles scrolls à travers la page.
Pour ce faire, nous allons commencer par la fin : nous devons définir la cible que nous souhaitons atteindre en cliquant sur notre lien. Puis, vous l'avez deviné, nous terminerons par le commencement en créant le lien qui nous mènera vers la cible visée.
D’une façon générale, on place une ancre, soit par la définition d’un élément <i> (ou <span>) vide auquel on attribue un identifiant :
<i id="nom-de-l-ancre"></i> ou, si votre éthique vous interdit d’utiliser une ancre vide, vous pouvez placer le lien dans la balise, comme suit :
<p id="nom-de-l-ancre">Mon texte</p>Évidemment, perspicace comme vous l'êtes vous avez compris qu'il ne fallait pas recopier tels quels “nom-de-l-ancre” et “Mon texte”.
L’autre possibilité, la plus intéressante pour les utilisateurs inconditionnels d’Oxygen que nous sommes : en utilisant l’id de la section-cible. Pour cela, il faut cliquer dans l’éditeur Oxygen sur la section-cible, et relever l’id de la section que l’on trouve dans le panneau gauche, dans notre cas c’est :
div_block-59-241
Ce lien peut revêtir plusieurs formes : cela peut être un bouton, un lien texte classique ou même un lien de menu.
https://mon_site.com/#div_block-59-241Sauvegardez et ça marche.
Commencez par sélectionner le texte puis :
Pour un élément de menu, il faut sortir d’Oxygen et se rendre dans le menu de WordPress, rubrique “Apparence” puis “Menus”.
Là, il faut :
Voilà, ça y est, vous avez jeté l’ancre et elle est parfaitement fonctionnelle.
Mais quelque chose vous titille encore...
Comme vous êtes un être raffiné qui attache une importance primordiale à l’esthétique de son site web, vous aimeriez que la transition du lien à l’objectif d’icelui se fasse de façon progressive et agréable à l’œil.
Oxygen Builder a pensé à vous et a caché une option de “smooth scrolling” — “défilement fluide” pour les académiciens qui fréquenteraient ce blog — qui va vous faire rire de plaisir :
Et voilà, vos transitions se font par un défilement progressif du plus bel effet.
Vous voilà en possession d'une ancre qui ne partira pas à la dérive, mille sabords !
Pierre Maitre
https://www.infomaster.fr
Dans les thèmes que vous utilisiez avant de tout quitter pour Oxygen, il y avait "juste" une case à cocher ou une option à activer pour ajouter une petite icône "retour en haut" dans vos pages lorsqu'elles dépassaient une certaine longueur.
Vous aimeriez bien en faire autant avec Oxygen mais vous n'êtes pas un développeur. Barry Smith, membre du groupe officiel Oxygen en anglais, vous explique comment faire :
Et voilà, enregistrez et testez. L'icône que vous avez choisie devrait apparaître sur l'écran après un scroll de 150px.
Il ne vous reste plus qu'à configurer l'icône (taille, couleur etc.) pour l'assortir au reste de votre design.
Merci Barry !
Dans un article précédent nous avons partagé la découverte d'un plugin permettant de nettoyer la base de données d'un site de tous les shortcodes Divi. Une amie ayant un site bâti avec Visual Composer qu'elle envisage de me faire refaire avec Oxygen, je me suis dit qu'il me fallait un plugin équivalent à celui pour Divi.
Mais cette fois, pas besoin d'écumer le net. Bien que mon camarade Philippe trouve que le plugin bye-bye Divi est codé avec les pieds, il fait le boulot dont il est chargé et ma foi, ça me suffit bien. Une petite adaptation du code et voilà le plugin : bye-bye Visual Composer !
Vous l'installez comme un plugin classique : Extensions > Ajouter puis clic sur le bouton Téléversez une extension. Allez chercher le fichier zip sur votre disque dur et validez l'installation. Une fois installé, activez-le.
Après activation il apparaît la commande Bye Bye Visual Composer dans votre menu Réglages. Lancez-la :
Traduction :
Cliquez simplement sur le bouton ci-dessous et tous les shortcodess Visual Composer disparaîtront.
REMARQUE: Il s'agit d'une fonction à usage unique qui supprimera littéralement les données de votre base de données. Il n'y a pas de bouton Annuler. Assurez-vous de sauvegarder votre base de données AVANT de continuer. Cela n'affectera que le contenu publié : les brouillons et les révisions ne seront pas affectés. Si vous souhaitez revenir en arrière, vous pourrez donc toujours utiliser le système de révision pour le faire, mais il n’existe pas de processus automatisé pour le faire.
Notez également que ce plugin supprimera simplement les shortcodes et ne traitera pas leur contenu. Les modules de texte fonctionneront bien, mais des éléments tels que les modules d'image, etc. seront entièrement supprimés.
Donc vous sauvegardez votre base de données, par exemple à l'aide du très bon plugin gratuit Updraft Plus. Puis vous cliquez sur le bouton Bye Bye Visual Composer!
Une dernière alerte (avez-vous bien sauvegardé votre base de données ?) :
Vous avez tout bien sauvé donc vous cliquez sereinement sur "OK"... Et voilà le travail...
Enfin : n'oubliez pas de désactiver et supprimer l'extension après usage, elle ne vous sert plus à rien et n'a donc aucune raison de rester en place.
Voilà, vous êtes définitivement conquis ! Vous avez testé Oxygen en long, en large et en travers dans le bac à sable et vous êtes enthousiaste... c'est décidé, vous profitez de l'offre lifetime très intéressante et vous allez commencer par refaire votre site, tiens !
Vous aviez pris soin de conserver un thème WordPress standard sur votre site, en plus de Divi, pour pouvoir l'activer en secours en cas de problème avec Divi donc vous l'activez et regardez de quoi votre site a l'air. Eh bien, il est horrible : tous les shortcodes de Divi s'affichent en clair et vous ne retrouvez même plus votre texte dans ce fouillis !
Bref instant de découragement : vous avez publié des dizaines d'articles, votre site a de nombreuses pages, il est inenvisageable de supprimer ces shortcodes en éditant chacun des posts l'un après l'autre. Que faire ?
Une petite recherche Google vous amène sur un blog qui vous suggère une extension qui paraît vraiment bien. En regardant de près, vous vous rendez compte que l'extension enlève bien tous les shortcodes mais c'est "à la volée' à chaque affichage. Si vous désactivez l'extension tous les shortcodes sont bel et bien là, dans votre base de données et donc dans vos posts.
Il existe cependant une version premium de cette extension qui elle apparemment enlève bien les shortcodes de la base de données. C'est ça que vous cherchez.
À tout hasard, vous étendez un peu votre recherche en incluant les sites en anglais et vous tombez enfin sur la solution qui fonctionne, sur le site de Sean Barton.
Vous téléchargez son plugin et vous retrouvez avec ce fichier : bye_bye_divi.php_.zip. Il vous faut le renommer parce qu'en l'état vous ne pourrez pas l'installer. Renommez-le : bye_bye_divi.zip.
Maintenant, vous pouvez l'installer comme un plugin classique : Extensions > Ajouter puis clic sur le bouton Téléversez une extension. Allez chercher le fichier zip sur votre disque dur et validez l'installation. Une fois installé, activez-le.
Après activation il apparaît la commande Bye Bye Divi dans votre menu Réglages. Lancez-la :
Traduction :
Cliquez simplement sur le bouton ci-dessous et tous les shortcodess Divi disparaîtront.
REMARQUE: Il s'agit d'une fonction à usage unique qui supprimera littéralement les données de votre base de données. Il n'y a pas de bouton Annuler. Assurez-vous de sauvegarder votre base de données AVANT de continuer. Cela n'affectera que le contenu publié : les brouillons et les révisions ne seront pas affectés. Si vous souhaitez revenir en arrière, vous pourrez donc toujours utiliser le système de révision pour le faire, mais il n’existe pas de processus automatisé pour le faire.
Notez également que ce plugin supprimera simplement les shortcodes et ne traitera pas leur contenu. Les modules de texte fonctionneront bien, mais des éléments tels que les modules d'image, etc. seront entièrement supprimés. Notez enfin que les éléments de la bibliothèque Divi seront conservés, donc si vous souhaitez enregistrer votre bibliothèque pour une utilisation future, ne vous inquiétez pas !
Donc vous sauvegardez votre base de données, par exemple à l'aide du très bon plugin gratuit Updraft Plus. Puis vous cliquez sur le bouton Bye Bye Divi!
Une dernière alerte (avez-vous bien sauvegardé votre base de données ?) :
Vous avez tout bien sauvé donc vous cliquez sereinement sur "OK"... Et voilà le travail :
Et quand vous allez vous promener dans vos articles et vos pages, plus aucun shortcode ne traîne, c'est fantastique, vous allez pouvoir refaire votre site sans perdre des heures à le nettoyer avant...
Enfin : n'oubliez pas de désactiver et supprimer l'extension après usage, elle ne vous sert plus à rien et n'a donc aucune raison de rester en place.
Soflyy met à disposition la version Alpha 1 d'Oxygen 3.1. Cette prochaine version est axée sur les corrections de bugs et les améliorations plutôt que de nouvelles fonctionnalités, Les clients existants peuvent la télécharger depuis leur compte Oxygen.
Veuillez noter que les versions Alpha et Beta ne doivent pas être utilisées sur les sites en production. Vous n'obtiendrez ni assistance, ni support concernant ces versions.
Vous pouvez l'installer sur un site de test, en local ou en sous-domaine chez votre hébergeur, afin de la tester et de remonter les éventuels dysfonctionnement que vous rencontriez en les signalant sur GitHub.
La rumeur monte, s'amplifie : il existerait un constructeur de pages WordPress vraiment génial, "révolutionnaire" disent certains. Ses possibilités seraient quasi illimitées et en plus il génèrerait du code "propre", léger, pour des performances incomparables à celles de la concurrence .
— « Un de plus ! » penserez-vous peut-être.
Alors, quoi de mieux que de vous forger votre propre opinion en le testant gratuitement ?
Vous l'aurez compris, ce constructeur de pages WordPress “révolutionnaire”, c'est Oxygen. Il vous intrigue. Sur le papier, il a tout pour lui et en lisant ses caractéristiques, vous transposez sur vos projets passés ou à venir :
— « Si j'avais eu cette fonctionnalité, ça m'aurait bien aidé sur le projet ‘truc’… ».
— « Oh ! Avec ça, je vais pouvoir répondre à la problématique de mon client “X…” ».
etc.
Mais bon, “chat échaudé craint l’eau froide” dit le proverbe. Vous avez peut-être déjà succombé aux sirènes vous vantant tel ou tel builder, acheté une licence et vous êtes finalement resté sur votre faim.
Oxygen a pensé aux indécis ou aux simples curieux, en mettant à disposition une ‘sandbox’ (un bac à sable) où vous pourrez jouer avec Oxygen, l'essayer et tester toutes ses fonctionnalités :
Une fois arrivé sur le site de test, cliquez l’un des deux boutons afin de déclencher l’installation d’un site WordPress créé spécialement pour vous et sur lequel sont installés tous les modules d'Oxygen :
Mémorisez l'adresse du site dans les favoris de votre navigateur (l'adresse comporte votre mot de passe) afin d'y retourner à tout moment. Le site sera supprimé après 7 jours sans connexion mais vous pouvez en disposer aussi longtemps que vous le voulez tant que vous ne laissez pas s'écouler 7 jours sans connexion.
Libre à vous de personnaliser ce site de test comme bon vous semble :
Ce site est à vous, pendant le temps qu'il vous faudra, si vous ne le laissez pas sans vous connecter pendant 7 jours d'affilée !
S'agissant d’un nouveau concept, il est possible que vous soyez quelque peu dérouté. Probablement comme vous l'avez d'ailleurs été face à chaque nouveau constructeur ou thème.
Heureusement, vous pourrez vous appuyer sur les nombreux tutoriels vidéos, la documentation originale (en anglais) ou la documentation du site oxybuilderfrancais.com, traduite en français.
Si malgré tout un point vous échappe, le groupe Oxygen pour WordPress en français vous apportera les réponses à vos questions.
Oxygen 3.0.1 est une version mineure qui corrige les bogues ci-dessous, introduits dans Oxygen 3.0 :
Oxygen encourage tout un chacun à effectuer la mise à jour vers Oxygen 3.0.1 pour éviter les problèmes énumérés ci-dessus.
Oxygen 3.0.1 peut être mis à jour depuis le gestionnaire des Extensions de WordPress, ou en le téléchargeant directement depuis le portail client.
Si le gestionnaire des extensions WordPress ne vous signale pas la mise à jour 3.0.1, c'est probablement que vous avez installé la version Release Candidate. Ces versions 'non officielles', ne peuvent pas être mise à jour automatiquement.
Si c'est le cas, désactivez puis supprimez la version Release Candidate (n'ayez crainte, vos réglages, feuilles de styles, templates, etc. seront conservés).
Connectez-vous à votre compte Oxygen https://oxygenbuilder.com/portal/ afin de télécharger la dernière version et installez-la comme à l'accoutumée.
Si vous utilisiez la version 3.0.1 RC2, vous ne verrez strictement aucune différence : de 'Candidate' elle est devenue la version officielle.
