Dans ce tuto vidéo, nous allons voir comment créer un mini site ecommerce pour vendre vos objets et ceci à l'aide de 2 outils : WordPress & Paypal.

Nous partirons ensemble de zéro pour intégrer un petit thème en HTML/CSS grâce au Bootstrap de Twitter qui nous permettra d'aller vite et de gagner du temps. Ensuite, nous installerons une extension à WordPress pour ajouter un système de panier que nous couplerons à un Custom Post Type pour faciliter l'ajout de nouveaux produits à la boutique. Enfin, nous ferons la liaison avec Paypal Sandbox pour effectuer un paiement et renvoyer l’utilisateur sur une page de remerciements que nous personnaliserons ensemble.

Sommaire de la formation :

  • Partie 1 : Intégration du thème WordPress
  • Partie 2 : Installation d'une extension, configuration & ajout du système de panier
  • Partie 3 : Paiement via Paypal sandbox & création d'un formulaire de contact

Pour plus de précisions, je vous invite à regarder l'extrait vidéo que j'ai réalisé. Toutes les sources sont fournies avec la formation.

Bon tuto !

Jetez un oeil à ces autres tuto Wordpress 3.4

Créer son premier site Portfolio avec WordPressCréer son premier site Portfolio…
Présentez vos créations, services et projets sous leur meilleur…

Tutoriel WordPressTutoriel WordPress
Voici une formation Wordpress de 3h découpée en 50 vidéos.…

Présentation de WordPressPrésentation de WordPress
Qu'est ce que WordPress et que puis je faire avec ?

À propos de l'auteurÀ propos de l'auteur
Présentation de l'auteur.

Créer votre site Web dans Wordpress sans programmation !Créer votre site Web dans…
Nous allons à travers ce tuto Wordpress en vidéo, apprendre…

Configurer Google Analytics et vos sitemaps dans WordpressConfigurer Google Analytics…
Cette formation en vidéo vous expliquera comment installer…

Les extensions de WordPressLes extensions de WordPress…
Voici une formation entièrement consacrée aux Extensions Wordpress.…

Planifier une sauvegarde des fichiers d'un site WordPressPlanifier une sauvegarde des…
Ce tuto WordPress en vidéo, est l'occasion de découvrir pas…

Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto Wordpress 3.4 de 1 heure 47 minutes est proposée dans une résolution plus grande que l’extrait suivant :

Partagez cet extrait

Lien vers cet extrait : Embed code :

spykrew07 , formateur certifié

Salut à tous ! Je m'apelle Adrien j’ai 29 ans et je suis Webdesigner spécialiste WordPress depuis 7 ans. Ancien élève de l'ESMA à Montpellier, j’ai travaillé en agence de communication pendant 4 ans et depuis 3 ans je me suis lancé en freelance. Formateur certifié sur tuto.com, je partage mes connaissances et mes découvertes dans différents domaines : web design, logo, html, wordpress, php, css jquery ... Ma devise : Webdesign is not a job, it’s a passion !

Toutes les formations de Spykrew07


Témoignage des clients de spykrew07

Un super pro dans le domaine du web et une grande connaissance de WordPress. Un grand merci.

Très belle vidéo, et la voix donne envie d'écouter, ce n'est pas le cas avec d'autres personnes ... Merci de m'avoir aidé :)

Je trouve que Spykrew07 est un très bon formateur !

Très bon formateur !!!

tutos clair et précis!

Lire les autres témoignages

 

D'autres tuto de spykrew07

Créer un portfolio filtrable avec historique de navigationCréer un portfolio filtrable avec historique de navigation
Dans ce tuto vidéo PHOTOSHOP, HTML5, CSS3 et JQUERY nous allons voir comment créer…

Créer un badge simplementCréer un badge simplement
Dans ce tuto Illustrator, en vidéo, nous allons voir ensemble, pas à pas, comment créer…

Designer un site one page moderneDesigner un site one page moderne
Dans cette formation Photoshop en vidéo de 10 chapitres, nous allons voir, pas à pas,…

Scindez vos textes en colonnes pour faciliter la lectureScindez vos textes en colonnes pour faciliter la lecture
Dans ce tuto CSS3, en vidéo, nous allons voir comment il est simple avec de nouvelles…

voir tous les tuto de spykrew07

Notes attribuées par les utilisateurs (14 votes)

Note moyenne des utilisateurs  

Votez pour ce tuto


 

Les avis / Questions des utilisateurs (43)

par karba voté :
(a acheté ce tuto - 11 mai 2014)

" Très bon tuto, bien expliqué.
Simplement à recommander .
kb "

par galaxiana voté :
(a acheté ce tuto - 25 février 2014)

" Un tuto assez dense pour les néophites mais parfaitement clair et réalisable "

par all4you2a voté :
(a acheté ce tuto - 30 décembre 2013)

" Très instructif comme toujours avec Adrien :) "

par spykrew07
(auteur de ce tuto - 07 novembre 2013)

" @cabon.contact Tu dois pouvoir faire un "update_post_meta()" en précisant l'ID du produit, le nom de la metakey, et enlever 1 à sur la metavalue au retour sur la page de confirmation.

Mais si tu souhaites faire une boutique plus évoluée je te suggère d'utiliser WooCommerce ;)

Bonne continuation ! "

par cabon.contact
(a acheté ce tuto - 06 novembre 2013)

" Merci beaucoup pour ce tutoriel !
J'aimerais savoir par contre si je peut gérer le stock en créant par exemple un champ stock via Advanced Custom Fields, et une fois la commande passer mettre la valeur de ce champ via une requête SQL ? "

par iassea voté :
(a acheté ce tuto - 04 avril 2013)

" Un tuto qui frôle la perfection.
Ie grand point fort c'est la simplicité du résultat.
J'ai une question, j'aimerai en insérant un nouveau produit, lui attribuer une cathégorie pour que je puis l'ajouter au menu principale.
( Ex: Menu fruit, menu légume, menu plat )
Espérant avoir une réponse rapide à ma question, merci d'avance "

par funkyjeff
(a acheté ce tuto - 16 mars 2013)

" " tip top
besoin d'un petit plus : si dans mon panier j'ai 3 pommes et 2 bananes, comment y avoir la valeur (5) plutot que (2) correspondant à pomme + banane.
merci " "

par tichon
(a acheté ce tuto - 12 mars 2013)

" Bonjour,

Dernier soucis : dans votre 3ème vidéo, quand je teste le paiement "PayPal" avec "Sandbox", à mon retour sur la boutique mon panier est toujours plein.
Pourtant, j’ai bien coché la case " Vider le panier après une redirection vers la page de retour" dans les réglages de l’extension "Simple PayPal Shopping Cart Settings" (v. 3.5).

Merci d’avance.

PS : dans "style.css", plus besoin d’écrire "-webkit-border-radius" pour arrondir les coins du panneau "Ajouter au panier" ; seul "-border-radius" suffit.
"

par tichon
(a acheté ce tuto - 10 mars 2013)

" Merci! Bonne continuation à vous! "

par spykrew07
(auteur de ce tuto - 10 mars 2013)

" @tichon Oui j'ai vu que l'auteur à enlever temporairement le plugin ACF sur le site de WordPress. Mais pas de panique tu peux le télécharger à cette adresse : https://github.com/elliotcondon/acf/archive/master.zip et tu le mets dans ton dossier Plugins. Tu n'as plus qu'à l'activer dans l'admin ;) Bonne continuation et merci pour ton retour ! "

par tichon
(a acheté ce tuto - 09 mars 2013)

" Bonsoir,

Je rencontre un problème. En effet, l'extension "Advanced Custom Fields" n'est plus disponible dans sa version 3.3.9. mais seulement dans sa version 1.0.0. (version 4.0 en préparation pour wordpress). Et cette version antérieure n'apparaît pas dans wordpress une fois installée et activée. Je n'ai donc pas accès au plugin. Je ne sais donc que faire...
Merci d'avance pour votre aide!

PS: merci pour ce tuto de grande qualité!


Bonne soirée.
"

par cocoafujia voté :
(a acheté ce tuto - 01 mars 2013)

" Je dirai qu'une chose: Bonne formation. Claire et limpide! "

par funkyjeff
(a acheté ce tuto - 24 février 2013)

" la question du 03 decembre 2012 ;-) "

par spykrew07
(auteur de ce tuto - 15 février 2013)

" @funkyjeff Désolé mais je ne sais pas ce que tu attends comme réponse ? "

par funkyjeff
(a acheté ce tuto - 14 février 2013)

" pas de reponse ? "

par spykrew07
(auteur de ce tuto - 11 janvier 2013)

" @sibuno Je pense que ce ne sera pas assez poussé pour ce que tu veut en faire. Si tu veux de la gestion clients, gestion des stocks, frais de port ... il vaut mieux passer par un autre plugin WordPress comme WPEcommerce ou Woocommerce. Ou a la rigueur passer sur Prestashop si la boutique prend de l'ampleur. Bonne continuation ;) "

par sibuno
(n'a pas acheté ce tuto - 10 janvier 2013)

" Bonsoir, je pense que c exactement le tuto que je cherche, je voudrais faire une petite boutique avec wp, par contre quand je regarde l'extrait vidéo il est question de créer un bouton panier, mais wp avec les plugin e-commerce a déjà beaucoup d'options, donc est-ce que avec ce tuto je pourrais avoir également la gestion des clients, les comptes utilisateurs, les frais de ports etc etc?

merci d'avance pour votre réponse. "

par Deniss
(n'a pas acheté ce tuto - 07 janvier 2013)

" Bonjour,

Débutant sur Wordpress, je souhaiterais créer une petite boutique de 20 à 30 articles, donc ton tuto correspondrait à ma recherche. Par contre, est-il difficile de rajouter un "Poste Port" selon quantité commandée? Merci Cordialement "

par funkyjeff
(a acheté ce tuto - 13 décembre 2012)

" up up up "

par funkyjeff
(a acheté ce tuto - 03 décembre 2012)

" tip top
besoin d'un petit plus : si dans mon panier j'ai 3 pommes et 2 bananes, comment y avoir la valeur (5) plutot que (2) correspondant à pomme + banane.
merci "

par thesdumarchea voté :
(a acheté ce tuto - 07 novembre 2012)

" Tuto complet et très bien présenté. Très pratique pour la création de petit site et très simple pour un utilisateur "

par spykrew07
(auteur de ce tuto - 23 octobre 2012)

" @funkyjeff Souvent les erreurs ne sont pas difficiles à trouver, content que tu es pu de te débrouiller seul ;) "

par funkyjeff
(a acheté ce tuto - 22 octobre 2012)

" jai trouvé le souci, en prenant la version bootstrap.min.css je l'ai laissé ainsi.
il faut le renommer en bootstrap.css "

par funkyjeff
(a acheté ce tuto - 22 octobre 2012)

" hello, merci pour ce retour rapide


je suis parti des fichiers sources et mis le dossier "theme de depart" avec ses copains "twentyeleven" et "twentyten"
ainsi
C: wamp www wordpress wp-content themes theme_de_depart

dans le dossier theme de depart jai : header, index, bootsrap.min, style et le screenshot "

par spykrew07
(auteur de ce tuto - 22 octobre 2012)

" @funkyjeff Est ce que tes fichiers CSS sont existants et placés à la racine de ton thème ? "

par funkyjeff
(a acheté ce tuto - 21 octobre 2012)

" bonsoir

petit souci à 9 min :

après avoir inséré ce bout de code :

&lt;link href="&lt;?php bloginfo('template_directory'); ?</bootstrap.css" rel="stylesheet"&gt;
&lt;link href="&lt;?php bloginfo('template_directory'); ?</style.css" rel="stylesheet"&gt;

et avoir actualisé je n'ai pas de changement sur mon header.

je suis totalement debutant.
est ce parce que je suis en local ?

merci d'avance


"

par spykrew07
(auteur de ce tuto - 03 octobre 2012)

" @Rocca0909 Si tu veux faire une grosse boutique avec des centaines d'articles tournes toi vers Prestashop qui est bien plus évolué & complet.

Sinon pour des boutiques un peu plus simple il y a des plugins comme WPEcommerce ou Woocommerce qui permettent de créer un ecommerce simplement sur WordPress.

Je pense faire un tuto sur comment créer un thème ecommerce pour WordPress, mais pour le moment je n'envisage pas de le faire sur Prestashop qui assez pénible à comprendre pour intégrer un thème comme on le veut.

Bonne continuation, et merci de ton retour ;) "

par Rocca0909
(a acheté ce tuto - 02 octobre 2012)

" Salut spykrew,

il faut que je fasse un site e-commerce mais j'hesites entre wordpress et prestashop.

Quel est le plus complet d'après toi ?
as tu prévu de faire un tuto prestashop ?

Merci d'avance pour tes réponses,

R.
"

par spykrew07
(auteur de ce tuto - 01 octobre 2012)

" @sampabs Oui c'est possible. Regardes dans les options du plugin tu peux mettre un port global. Ou sinon tu peux spécifier un port individuel par produit dans le shortcode, jette un oeil sur le site officiel tu devrais trouver ça facilement. A la rigueur, tu pourrai même rajouter une metabox ou on peut entrer le port (comme le prix), et du coup tu peux l'inscrire dans ton template en 3ème argument (après le titre et le prix). Bon courage ;) "

par sampabsa voté :
(a acheté ce tuto - 30 septembre 2012)

" Bravo pour ce tuto.
Est-il possible de gérer le port avec WP Paypal ? "

par maissouma voté :
(a acheté ce tuto - 27 septembre 2012)

" Superbe tuto de boutique en ligne, j'attends avec impatience le prochain plus complet. Encore merci pour ce partage de connaissance. "

par NectArta voté :
(a acheté ce tuto - 17 septembre 2012)

" Un second commentaire afin de pouvoir te noter, +5 bien évidement ! "

par NectArta voté :
(a acheté ce tuto - 16 septembre 2012)

" Hello,

Pour ton prochain tuto, Woocomerce serait top, A bientôt Professeur ! "

par SOMEWAYa voté :
(a acheté ce tuto - 10 septembre 2012)

" super ! merci beaucoup pour cette formation, avec toujours la même qualité pédagogique ! "

par SOMEWAYa voté :
(a acheté ce tuto - 07 septembre 2012)

" super, trois vidéos simples, et pourtant si complètes !!! Je suis fan ! Merci ! Concernant le plug-in e-commerce, je préférerias wp e-commerce ! ;-) "

par Shade146a voté :
(a acheté ce tuto - 05 septembre 2012)

" Super tuto, simple à comprendre.
J'ai tout réussi même si mais connaissance en WordPress sont faibles... "

par spykrew07
(auteur de ce tuto - 04 septembre 2012)

" @demonard Je te renvoi vers mes cours de HTML et sur les bases du CSS pour savoir comment ajouter ton logo ;) "

par demonarda voté :
(a acheté ce tuto - 03 septembre 2012)

" Tuto impeccable, même pour les novices comme moi! Super explication. Seul bémol, comment mettre une image avec le logo de la boutique (sur la page d'accueil par exple), indispensable pour une marque?
Merci! "

par NectArta voté :
(a acheté ce tuto - 02 septembre 2012)

" Hello,
Tuto qui semble vraiment sympa.

Il serait bien d'y ajouter une gestion de compte utilisateur afin que les clients puissent avoir un aperçu de leurs commandes.

Le fait d'avoir une gestion de compte rassure les clients.

Mais le tuto a l'air clair. "

par spykrew07
(auteur de ce tuto - 02 septembre 2012)

" @Sylphide Non pas dans celle la, j'ai fait une petit formation exprès pour ça. Regardes mes autres tutos tu va le trouver, c'est : "Mettre en ligne un site créé avec WordPress" ;) "

par Sylphide
(a acheté ce tuto - 02 septembre 2012)

" esque tu explique dans se tuto comment mettre le site sur internet? "

par tailivana voté :
(a acheté ce tuto - 01 septembre 2012)

" Super Tuto sur une mini boutique,
mais espere prochain tuto ou sera traitee
egalement la partie admin...
Encore bravo et merci
José "

par doctor-pixela voté :
(a acheté ce tuto - 31 août 2012)

" Excellent ! vraiment , avec toi Adrien , la programmation de Wordpress est claire comme de l'eau de roche! En plus tu as eu ici l'intelligence de ne pas rabbacher les points récurrents qui ont été abordés dans tes autres tutoriels. encore bravo, très bon tuto! "

 

Donnez votre avis ou posez une question au formateur.

Vous souhaitez commenter ce tuto vidéo ? Créez un compte gratuit. Déjà membre ? Identifiez-vous

Ce tuto en résumé ...

Ce tuto Wordpress 3.4 d’une durée de 1 heure 47 minutes a été acheté 393 fois et a reçu une note moyenne de 5/5.

Ce tuto a été publié le 31 août 2012 par spykrew07, formateur certifié par Tuto.com, ayant reçu une note moyenne de 4,8/5 pour l’ensemble de ses vidéos.

Tous les fichiers sources sont fournis avec cette formation. Ces derniers vous permettront de reproduire les manipulations expliquées dans cette formation.

Ce tuto video vous expliquera étape par étape, toutes les manipulations présentées par le formateur.

Toutes nos vidéos sont visionnées par notre équipe, avant d’être mises en ligne, garantissant ainsi la qualité des produits téléchargés.

N'hésitez pas à nous contacter si vous avez la moindre question !