Le blog Dr Tech

Tutoriels Dr Tech, bienvenue!

par | 3 Avr, 2021 | Démarrer

Questions Fréquentes

Supprimer le pixel FB de Shopify avant de l’installer sur Dr Tech.

Si vous avez déjà lié votre compte FB a votre ancien site Shopify, et que ce lien avait été créé par une appli Shopify, vous devez d'abord supprimer l'appli Shopify (sur le compte Shopify), puis supprimer le compte marchand créé par Shopify sur FB. Ensuite, vous pourrez utiliser l'application "Facebook pour woocommerce" pour connecter votre pixel et tout sera ok!

Supprimer le corps global

Si toutes les pages de votre boutique sont identiques, c'est parce que vous avez mis un élément dans le "corps global" de votre site, dans le thème builder. Voici comment l'enlever sans perdre le contenu que vous avez créé.

- Allez dans votre thème builder -> corps global -> personnalisez le et une fois que vous êtes dans le visual builder, téléchargez le modèle (icône des 2 flèches à droite du menu qui s'ouvre via les 3 petits points en bas de l'écran)
- Retournez dans le dashboard -> pages -> créez une nouvelle page, donnez lui un nom, puis une fois dans le visual builder importez le modèle précédemment téléchargé (même icône), puis publiez la page.
- Si cette page était la page d'accueil de votre site, RDV dans ma boutique -> réglages -> avancé et mettez cette page en "Home"
- Pour finir, retournez dans le theme builder et supprimez le corps global
Et tout sera ok 🙂
Puis-je ajouter d’autres plugins wordpress moi même ?
Ce n'est pas possible d'ajouter des plugins wordpress de votre coté. Ceci vient du fait que Dr Tech gère la partie technique de votre boutique ainsi que le support pour chaque plugin, ce qui inclut par exemple l'intégration avec les autres applications, les mises à jours, l'optimisation des performances, la compatibilité avec le système complet ... entre autre, afin que votre boutique Dr Tech soit prête à l'emploi.
Tous les plugins ne sont pas bons sur wordpress, beaucoup ne marchent pas, s'intègrent mal, ne sont plus maintenus ... Voir pire! Dr Tech agit comme un filtre pour vous, afin d'être sûr que ce qu'on intègre sur votre boutique fonctionne et ne vous posera pas de soucis. De plus, s'il y a quelconque soucis, on s'en occupe pour vous.
Ceci étant dit, nous cherchons toujours à être le plus complet possible, donc n'hésitez pas à nous proposer de nouvelles fonctionnalités que vous trouvez intéressante, et nous regarderons pour les ajouter 🙂
Flow de panier abandonné par email : l’email client est-il récupéré avec un checkout 1 page ?
La réponse est oui, l'email est bien récupéré même si le checkout est en une seule page : pas besoin de bouton ou d'action spéciale, la fonction se déclenche au moment ou votre visiteur met son email dans le champs correspondant.
Pensez tout de même à vérifier avec la solution de panier abandonné que vous utilisez s'ils supportent bien le checkout 1 page. Avec Klaviyo et Send In blue, ils le font tout les 2, aucun soucis.
Si vous utilisez l'application Cartflows pour modifier votre checkout, c'est un peu plus tricky, car les plugins de panier abandonnés n'ont pas forcément pris le checkout cartflows en compte.
Du coup, les équipes de Klaviyo nous ont fourni un code à ajouter dans le script de la page checkout de cartflows (présent dans le tutoriel) pour que ça fonctionne de la même manière.
Pour Send In Blue, nous n'avons pas de code actuellement, donc je pense que ça ne marche pas avec Cartflows. Si vous utilisez Send In blue + Cartflows, n'hésitez pas à nous écrire sur le chat du site afin que l'on puisse voir comment mettre en place une solution 🙂
Sous menu cliquable sur mobile

Ajouter simplement un module "code" dans votre header (via theme -> theme builder -> header) puis coller le code suivant à l'intérieur :

<style>
/* START: Collapse Divi Menu Module Submenus and Keep Parent Items Clickable on Mobile */
/* Parent menu item */
.et_pb_module .et_mobile_menu .menu-item-has-children.clickable,
.et_pb_module .et_mobile_menu .menu-item-has-children > a {
position: relative;
}
/* Parent menu item icon */
.et_pb_module .et_mobile_menu .menu-item-has-children:not(.clickable) > a:after,
.et_pb_module .et_mobile_menu .menu-item-has-children.clickable > span.parent_icon:after {
font-family: "ETmodules";
text-align: center;
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
font-size: 16px;
}
/* Disabled parent menu item icon positioning */
.et_pb_module .et_mobile_menu .menu-item-has-children:not(.clickable) > a:after {
position: absolute;
top: 13px;
right: 10px;
}
/* Clickable parent menu item icon */
.et_pb_module .et_mobile_menu .menu-item-has-children.clickable > span.parent_icon {
display: grid;
align-items: center;
position: absolute;
width: 46px;
height: 46px;
background: rgba(0, 0, 0, 0);
border-left: 1px solid #dcdcdc;
right: 0;
top: 0;
z-index: 9;
}
/* Collapsed submenu parent menu item icon */
.et_pb_module .et_mobile_menu .menu-item-has-children:not(.clickable) > a:after,
.et_pb_module .et_mobile_menu .menu-item-has-children.clickable > span.parent_icon:after {
content: "\33";
}
/* Expanded submenu parent menu item icon */
.et_pb_module .et_mobile_menu .menu-item-has-children:not(.clickable).visible > a:after,
.et_pb_module .et_mobile_menu .menu-item-has-children.clickable.visible > span.parent_icon:after {
content: "\32";
}
/* Hide submenu by default */
.et_pb_module .et_mobile_menu ul.sub-menu,
.et-db #et-boc .et-l .et_pb_menu .et_mobile_menu > ul.sub-menu,
.et-db #et-boc .et-l .et_pb_fullwidth_menu .et_mobile_menu > ul.sub-menu {
display: none !important;
visibility: hidden !important;
}
/* Show submenu */
.et_pb_module .et_mobile_menu .visible > ul.sub-menu,
.et-db #et-boc .et-l .et_pb_menu .et_mobile_menu .visible > ul.sub-menu,
.et-db #et-boc .et-l .et_pb_fullwidth_menu .et_mobile_menu .visible > ul.sub-menu {
display: block !important;
visibility: visible !important;
}
/* END: Collapse Divi Menu Module Submenus and Keep Parent Items Clickable on Mobile */
</style>

 

<script type="text/javascript">
(function($) {
/**
* Collapse Divi mobile menu submenus.
*
* Works for both the Menu and the Fullwidth Menu modules.
* The parent item links can be either disabled or clickable.
*
* @site https://www.divicio.us/
*
* @param bool parentClickable Pass true to keep the parent menu item links clickable. Default: false.
*/
function dvcs_collapse_menu_module_submenus_on_mobile(parentClickable = false) {
// Mobile menu
let $menu = $('.et_pb_module .et_mobile_menu');
// Iterate the mobile menu links
$menu.find('a').each(function() {

// Menu hamburger icon
let $menu_icon = $(this).parents('.mobile_nav').find('.mobile_menu_bar');
// Remove click event handlers from the link
$(this).off('click');
// If the menu item DOESN'T HAVE submenus
if( ! $(this).siblings('.sub-menu').length ) {
// Close the mobile menu on link click
$(this).on('click', (e) => $menu_icon.trigger('click'));
} else {
// If parent items links are DISABLED
if( ! parentClickable ){
// Replace the URL with the # symbol
$(this).attr('href', '#');
// Open/close the submenu on link click
$(this).on('click', (e) => toggle_visible(e, $(this).parent()));
} else {
// Add the "clickable" class to the parent(<li> tag)
$(this).parent().addClass('clickable')
// Prepend the icon to parent
.prepend('<span class="parent_icon"></span>')
// Open/close the submenu on icon click
.find('.parent_icon').on('click', (e) => toggle_visible(e, $(this).parent()));
// Link click
$(this).on('click', function(e){
// Toggle the submenu if the link doesn't have a URL or anchor
if ( $(this).attr('href') === '#' ) {
toggle_visible(e, $(this).parent());
} else {
// Close the mobile menu
$menu_icon.trigger('click');
}
});
}
}
});

/**
* Toggles the 'visible' class on passed element.
*/
const toggle_visible = (e, elem) => {
e.preventDefault();
elem.toggleClass('visible');
}
}
$(function() {
/**
* Call the function with a delay to allow
* the mobile menu(s) be ready first.
*
* To keep parent links clickable pass true (boolean) as argument.
*/
setTimeout(function() {
dvcs_collapse_menu_module_submenus_on_mobile(false);
}, 700);
});
})(jQuery);
</script>

 

Scroll du menu sur mobile

Si votre menu est trop grand, il est possible qu'il soit plus grand que votre écran sur mobile et que vous ne puissiez pas scroller. Pour résoudre ce soucis, il vous suffit d'ajouter le code suivant dans les CSS personnalisé, dans votre dashboard -> ma boutique -> réglages -> apparence -> CSS personnalisé.

/*modifier la taille de la fenetre du menu sur mobile*/
#mobile_menu3{
height: 80vh;
overflow-y: scroll;
}
Changer sa page home

Pour changer la page que vous voulez afficher en page d'accueil de votre boutique, il vous suffit de vous rendre dans votre Dashboard, puis ma boutique -> réglages -> avancé et ici vous pourrez changer la page que vous souhaitez afficher.

Utiliser votre propre icônes facilement : remplacer les icônes du module réseaux sociaux!

Un moyen simple d'avoir de jolies icônes sur votre site est d'utiliser le module "Réseaux sociaux" et de remplacer les icônes présent initialement par ceux que vous souhaitez.

L'idée est d'utiliser ce module pour ajouter un icône que vous n'utiliserais pas, comme Google + par exemple, puis de remplacer l'image de l'icône Google + par votre image. Ainsi, c'est votre icône qui est affiché 🙂

Pour ce faire :

  1. Ajoutez votre l'image de votre icône dans votre bibliothèque de media (dashboard -> theme -> media) au format 32x32 px.
  2. Ajouter le module Réseaux sociaux là vous souhaitez ajouter un icône, et ajoutez un icône aléatoire
  3. Ajouter le code ci dessous dans les CSS personnalisé de votre page :

.custom_socials .et-social-rss a.icon:before {
content: url(https://ecommerceundercover.com/wp-content/uploads/sites/211/2021/05/spotify-brands-e1621062255797.png);
top: 10px;
}

4. Ajouter la classe custom_socials dans la classe CSS de votre module réseaux sociaux.

Si vous ne savez pas comment ajouter un code dans le CSS personnalisé ou ajouter une classe CSS, cliquez ici pour accéder au tutoriel

Note : cette démarche va modifier le logo du flux RSS, donc vous ne pourrez pas utiliser le logo du flux RSS. Si vous souhaitez tout de même l'utiliser, ajouter un autre logo (que vous n'utiliserez pas) et remplacer .et-social-rss dans le code ci dessus par :

Google + : .et-social-google-plus

Tumblr : .et-social-tumblr

MySpace : .et-social-myspace

Shortcode Woocommerce

Voici les différents Shortcode dont vous aurez besoin sur votre boutique, si jamais vous les avez supprimés par mégarde.

[woocommerce_cart] – Affiche le panier
[woocommerce_checkout] – Affiche le checkout
[woocommerce_my_account] – Affiche le formulaire pour se connecter
[woocommerce_order_tracking] – Affiche le formulaire pour tracker sa commande

Pour ajouter ces shortcodes, suivez ce tutoriel : https://hellodr.tech/informations-utiles/ajouter-un-shortcode/

Enlever les mots /produit/ et /categorie-produit des URLs de vos pages produits et catégories de produits

Pour ce faire, il vous suffit d'activer l'application "Permalink Manager Pro", puis ensuite dans les options :

1. Dans permastructure : spécifiez ce que vous voulez. Vous pouvez juste laisser "%product%" pour les produits, et "%product_cat%" pour n'avoir que le nom du produit ou le nom de la catégorie de produit.

Exemple :
votreboutique.com/nom-du-produit pour un produit
votreboutique.com/nom-de-la-catégorie pour une catégorie de produit


-> Une fois choisis, allez dans tools -> regenerate/reset -> mettez à jours les produits et catégories existantes

Et voilà, bravo!

Vous ne trouvez pas la réponse à votre question ?

Vous pouvez regarder dans les tutoriels sur la gauche de votre écran, ou nous écrire sur le live chat en bas à droite, nos équipes sont présentes pour vous aider!

De nouvelles réponses sont ajoutées au fur et à mesure!

Article et images créés avec Dr Tech IA.

Derniers articles :

Inscrivez-vous à notre newsletter

Recevez nos prochains guides et tous nos conseils pour développer votre activité eCommerce !

Créer votre boutique avec Dr Tech

Z

+100 Applications & +200 thèmes gratuits

Z

0% Commission sur vos ventes

Z

Thème 100% personnalisable

Z

14 jours d’essai gratuit

Aller plus loin

Optimiser sa page d’accueil eCommerce : 9 éléments clés

Optimiser sa page d’accueil eCommerce : 9 éléments clés

La page d'accueil de votre boutique eCommerce est la porte d'entrée de votre boutique en ligne, il est donc important de la soigner pour attirer et retenir vos visiteurs. Dans cet article, nous vous partageons 9 conseils pour optimiser votre page d'accueil eCommerce...

Rejoignez notre Newsletter

Recevez nos prochains guides et tous nos conseils pour développer votre activité eCommerce !