Make A WordPress Online Store - Full Tutorial (For Beginners)

This is the best way to make an amazing eCommerce website (online store or shop) using WordPress. A simple step by step process that anyone can follow.
Update 2024 - in this video we've used Hostgator for our hosting, but in the meantime they've raised their prices and no longer offer discount codes like the one used in the video. I've moved my sites over to Chemicloud, which I highly recommend - you can see why in my latest tutorial: • Make An Amazing WordPr...
Hostgator is still a decent option, but an inferior host to Chemicloud while also being more expensive. Chemicloud is super fast and has amazing customer support. The decision is yours, best of luck with your new site!
You can see the finished website live at: shop.learntomakeyourwebsite.com/
Download the files needed for this design: wpmkr.com/wp-content/uploads/...
Get Started
00:00:00 eCommerce Website Tour
00:02:30 Things We Need
00:03:05 Hosting Discount & Free Domain
Update 2024 - in this video we've used Hostgator, but in the meantime they've raised their prices and no longer offer discount codes like the one used in the video. I've moved my sites over to Chemicloud, which I highly recommend - you can see why in my latest tutorial: • Make An Amazing WordPr...
00:06:47 Install & Configure WordPress
00:10:07 Change Title & Description
00:11:36 Import Starting Design
00:15:54 Global Design Settings
Homepage Design
00:18:36 How To Make Your Design
00:21:23 Edit Images, Text, Buttons
00:26:10 Edit Product Categories & Store Features
00:28:42 Display Products
00:31:28 Mobile Friendly Homepage
00:33:34 Header & Footer (Make Your Logo)
00:36:55 Design Footer (Instagram Content)
00:42:50 Design Header
Store Design & Managing Products
00:52:26 Products & Product Categories
00:54:31 Add, Edit & Manage Products
01:04:29 Design Store Catalog
01:08:06 Design Product Page
01:10:05 Add New Page (Sale)
01:15:33 Change Website Menus
01:17:50 Design About Page
01:19:23 Design Contact Page
The Checkout Experience (Make More Sales)
01:23:35 Checkout Process
01:24:28 Design One-step Checkout
01:29:46 Setup WooCommerce & Shipping
01:33:15 Setup Payments (Stripe)
Making A Real Payment
01:39:09 Create Coupon Codes
01:39:50 We Make A Real Order (Receiving Your First Payment)
01:41:27 Managing Your Orders
01:43:06 Sales & Revenue Reports
01:43:29 Set A Special Offer (Store Notice)
01:44:44 Final Design - Congratulations!
#ecommerce #store #shop #wordpress #tutorial
Also check out our WordPress for beginners tutorial: • Make An Amazing WordPr...
Or learn how to make a blog using WordPress here: • Make An Amazing WordPr...
Please like the video if you liked it, and don't forget to subscribe for more high quality WordPress content! :)
If you have any kind of question or get stuck anywhere, please ask in a comment below. We reply to every single comment and will be super happy to help!

[@wpmaker]

Update 2024 - unfortunately Hostgator does not offer discount codes anymore, and have increased their prices. I've moved my sites over to Chemicloud, which I highly recommend - you can see why in my latest tutorial: kzbin.info/www/bejne/bqukk5KLqdV2rrs (hosting part is at minute 4:53) You can check out their offer here: wpmkr.com/chemicloud Hostgator is still a decent option, but an inferior host to Chemicloud while also being more expensive. Chemicloud is super fast and has amazing customer support. The decision is yours, just wanted to give you a heads up about the changes since filming this video :) thank you so much for watching, and best of luck with your new site!

[@nicklucio6688]

I wish I could express to you have helpful this video was I really appreciate you. You just jump started my web development journey.

[@mohamedhammoud5435]

One of the best videos around

[@vertimaron]

the way you explain things is fantastic, hats off to you and thank you very much.

[@wpmaker]

Thank you so much! 🙏

[@varning1202]

Great Job, thanks! Pls make similar video for intermediate and advanced Wordpress Store.

[@mansoornasir8750]

Awesome work man. God bless you

[@mihailsalari]

Good job, Andrei! Foarte bravo!

[@CosmicHerbology]

Thank you. I love your content. Thank you for taking the time to create these videos.

[@wpmaker]

Thank you so much!

[@antardhwani6446]

Yes, very informative. You are the best explainer

[@wpmaker]

Thank you so much! Glad you like it 🙏

[@arnauduu3765]

Thank you very much, you did a great job!

[@wpmaker]

Glad you liked it Arnaud, thank you!

[@thesleepykoala]

Great Tutorial!

[@Gabe007vasquez]

Thank you very much. Your content is superb!

[@wpmaker]

Thank you so much!

[@ptbsolutions]

faster explain very technical person nice video thanks

[@nuelukairo]

I love your tutorials

[@wpmaker]

Thank you so much 🙏

[@KhalilCh]

Yes, i was very useful, many thanks

[@wpmaker]

Glad to hear, thank you for the comment!

[@PardesiMoin]

Excellent Boss

[@piyushrajbhar5610]

Thank you..

[@cervantesstore]

Bro I like Youre content, can you please make more videos about speed optimization

[@alexmwaki3744]

This video is worth 10X value than some of the sold courses. Great work brother.

[@wpmaker]

Thank you so much Alex!

[@issamhousni4180]

This is The Best Wordpress Ecom Video Fast & informative Just Thank You ♥♥

[@wpmaker]

Glad you liked it Issam!

[@issamhousni4180]

@@wpmaker When I Want To Activate WPM Product I have This Warning [Warning: Trying to access array offset on value of type bool in C:\xampp\htdocs\Wordpress iya\wp-content\plugins\wpm-products\class-wpm-product-options.php on line 340] I can't Acess To Elementor & Product List On Home Page have A Weird CSS Styling

[@wpmaker]

That's weird, can you access Elementor if you disable the WPM Products plugin?

[@saifulahmedhridoy]

You are great brother ❤

[@wpmaker]

You too!

[@eddievantuber]

I need a plugin that will feature shoes but I should be able to rotate them with a mouse. Does a plugin like that exist?

[@bluevibemonkeys]

Perfect..:)

[@naijagamerxtv]

the wpm plugin widget didnt show up on my side panel

[@patinacollector]

Hi. Can this store be implemented in a blog? Like an added page?

[@bnofox7041]

my "add to cart" button isn't working. why is that?

[@lynnedonald3261]

Good morning. Great video again. I’ve set up the shop and it’s looking great. I’m just customising it now with our products. The only issue I have is that although I’ve changed the currency to British pounds GBR, the products are showing as US dollars on the front end. Is there a plug-in I need to add or have I missed a step?? Thanks in advance

[@wpmaker]

Thank you! You definitely don't need a plugin, I've just tried changing the currency for my store and it works. Just go to WooCommerce > Settings and change the currency there. The name for GBP is "Pound sterling" (weirdly enough, you can't find it if you just search GBP). So select Pound sterling there. Give it a few seconds, and refresh your site. All prices should be in GBP now. I hope this helps!

[@BlackdropFiliper]

As always it's a great video that explains everything correctly as it should be done right now I am putting my products and I have one problem images are not sharp they look like they are blurred i don't know maybe this question was below in comments but i cant find it :/

[@BlackdropFiliper]

Ok Fixed :D :D :D under customizer and woocomerce product image size

[@wpmaker]

Indeed, glad you've found the solution and thanks for posting it :)

[@teendoak]

I highly recommend watching the video content, but I had trouble accessing the mobile instant cart page because it wasn't displaying correctly. Need your help.

[@wpmaker]

Could you give me more details? What does "not displaying correctly" mean, what is the problem with it? If you follow the exact same steps as me, you should get the same result.

[@laurabodnariu5355]

hello, thanks for the great video. I want to have also the menu section on the checkout page. How can I do this?

[@wpmaker]

Glad you liked it Laura! I wouldn't recommend having a menu on the Checkout page. That page should be as distraction-free as possible for maximum conversions, and this is why the biggest stores in the world avoid having a menu on the checkout page. Users can always click "back" in their browsers if they want to be able to access the menu again. If you still want to have a menu though, you can create anything you want on that page with Elementor by editing the checkout page template. So you could add a section at the top and build up the menu there. See at around 1:25:49 in the video. Good luck!

[@laurabodnariu5355]

@@wpmaker thank you a lot!

[@programmingwithsarthak]

I want to add a sequrity option by using ph no. verification can you make a video on that

[@wpmaker]

I don't have experience with that, but my guess is you'd need a specialised service for something like this. If you search things like "phone number verification for ecommerce" you should find some useful companies offering this. Good luck!

[@RazvanAlixandru]

Buna Andrei, Dupa instalarea si activarea modulului Starter Templates cand fac pasul urmator si trebuie sa selectez page bilder-ul, imi lipseste elementor. Nu reusesc sa gasesc pron-blema. Multumesc!

[@wpmaker]

Salut Razvan, nu-mi dau seama nici eu de ce nu-ti apare Elementor acolo. Poate ai un alt page builder deja instalat? Sau vreun alt plugin care ar putea intra in conflict cu Starter Templates (sau cu Elementor)? Inafara de asta, restul pasilor ai reusit sa-i urmezi exact ca mine in video pana in acel punct?

[@learnwithjoy3869]

where to find store options (wp maker). i can not find it in the appearance menu.

[@wpmaker]

You need the plugin from the description of the video first :)

[@sororbudwiser]

can you do this without using Elementor? I want to create it only using WordPress full site editing

[@wpmaker]

It would be significantly harder to achieve this design with WordPress FSE. To be honest, I don't think FSE is truly ready to be used yet if you want to make a beautiful design like this. Especially if you don't have any coding knowledge. You're probably better off buying a premium WP theme that looks somewhat like this and is readily made. But of course, it will be much less customizable than this Elementor example. Maybe one day Full Site Editing will be much better. Thank you for the comment!

[@Maria-xs4ns]

can u teach how to create a megamenu with categories and mobile friendly? please

[@wpmaker]

I will keep it in mind for a future video, thank you for the suggestion! ❤️

[@florinRS11]

Thank you!

[@shalinbhatt4493]

Hey bro what if i have to make website on different field rather than this so what plugin should i have to install for the products?

[@wpmaker]

I would start with this template and then adapt the design / categories / products to that field. This template is a great starting point for any field. If what you mean is that you have a different setup than this (different theme etc.), the plugin responsible for products and eCommerce functionality in general, is called WooCommerce. I hope I didn't misunderstand your question :) thanks for watching!

[@shalinbhatt4493]

@@wpmaker Thank you so much brother and also kindly tell if i have to build website on for eg supplements and you have created a plugin so i have to insert my new products so how can i do that kindly help me with that. Thank you

[@wpmaker]

There is no specific plugin, I would just build it using the same plugins as in the video :)

[@r0b3rtlacatus52]

Salut Andrei, cum pot da accesul la pagina ( politica de confidențialitate) în secțiunea footer adică in loc sa fie in meniu principal aș vrea sa fie in footer

[@wpmaker]

Salut din nou Robert, scuze ca raspund tarziu. Va trebui sa creezi 2 meniuri diferite din Aspect > Meniuri. Apoi tot de acolo poti adauga unul din meniuri (fara politica de confidentialitate) in Header, si celelalt meniu (cu politica) in Footer. Succes!

[@florinRS11]

Salut! Am adaugat widget-ul tau si din pacate cand ies din pagina de editare si intru normal, dipar butoanele albastre iar titlurile produselor nu sunt pe aceeasi linie (unele mai sus, altele mai jos). Oare ma poti ajuta, te rog, cu un sfat? Multumesc!

[@wpmaker]

Salut Florin, butoanele albastre dispar si la mine (eu am ales sa nu le folosesc in design-ul meu). Faptul ca ele apar in preview-ul Elementor e un bug. Daca vrei sa le incluzi, cred ca pot fi activate din setarile WooCommerce (cel mai probabil sub Appearance > Customize, sau in setarile WooCommerce din sidebar, nu stiu sa-ti zic sigur in momentul asta). Legat de titluri, pot fi mai multe motive pentru care iti apar in pozitii diferite. Primul lucru pe care l-as verifica ar fi in setari, la WooCommerce > Variation Swatches. Asigura-te ca ai debifat "Enable for Shop page."

[@florinRS11]

@@wpmaker Salut! Mulțumesc frumos pentru răspuns 😊 O duminică frumoasă!

[@r0b3rtlacatus52]

salut din greseala am scos toggle button din header cum as putea sa il bag inapoi

[@wpmaker]

Salut, poti merge inapoi la Appearance > Customize > Header Builder. Apoi in stanga jos, mergi la iconita de mobil ca sa deschizi design-ul de mobil. Apoi mergi cu mouse-ul in dreapta-jos unde ai sters din greseala toggle button-ul. Iti va aparea un "+" cand treci cu mouse-ul acolo - dai click pe el, si selectezi Toggle Button ca sa il adaugi inapoi cum era. Succes!

[@NarfHustle]

hi how can i change it from USD to Pound on product price

[@wpmaker]

Hey! You can change the store's currency from the WooCommerce Settings. Can see here: woocommerce.com/document/shop-currency/ Sorry for the late reply, hope you've figured it out!

[@Redditinsights76]

I am experiencing this while trying to install the brand store.... Importing Widgets failed due to parse JSON error.

[@wpmaker]

Hey, I would go to your Dashboard, then on the left go to Elementor > Settings. Go to the Advanced tab, and make sure "Unfiltered File Uploads" is enabled. This should fix it, good luck!

[@Redditinsights76]

@@wpmaker ok thanks so much

[@waynepillay2160]

Hi, I am getting the error 403 forbidden when trying to upload the wpm-products.php plugin

[@wpmaker]

It seems like your hosting or setup forbids you from uploading a plugin. What host are you using? Could you get in touch with them and ask why this is happening? Most likely you're getting this error regardless of what plugin you're trying to upload.

[@wpmaker]

PS: you need to upload the wpm-products ZIP, not .php file. Double-check that you're trying to upload the correct file :)

[@waynepillay2160]

I'm from South Africa

[@danadaniela9372]

Thank you. I cannot download your WPM Products, butonul este gri, nu ma last sa il incarc.cum sa procedez?

[@wpmaker]

Asigura-te ca descarci ultima versiune de aici (am facut un update recent): wpmkr.com/wp-content/uploads/2023/11/make-a-store-updated.zip Pe site, asigura-te ca selectezi corect arhiva wpm-products.zip dupa ce dai Upload Plugin. Apoi butonul de Install Now va deveni activ. Succes!

[@danadaniela9372]

Multumesc mult, Rezolvat 😀@@wpmaker

[@EmilVo]

Daca vreau sa instalez modulul WPM Products in local host imi da eroare. Se poate rezolva cumva?

[@wpmaker]

Ce eroare primesti?

[@EmilVo]

Pluginul vrea sa acceseze baza de date. Php nu il lasa. Cred ca daca sterg produsele se rezolva dar nu sunt sigur

[@wpmaker]

Nu cred ca are de-a face cu produsele. Probabil e o eroare de configurare in localhost-ul tau, care nu permite WordPress sa acceseze baza de date? Greu de zis, mai ales fara un copy/paste cu eroarea exacta. Ai incercat sa cauti eroarea pe Google sa vezi ce solutii gasesti?

[@r0b3rtlacatus52]

Salut, mai trimis aici de la videoclipul:cum să îți faci un web site. Nota 1000!! pentru ce faci, pentru persoanele care nu știu cu ce să înceapă, obiectivul meu e să încep un e-commerce. Aș avea o întrebare: Pentru România recomanzi să folosim tot stripe sau sunt alte opțiuni mai bune?

[@wpmaker]

Pe Romania eu mai folosesc si Netopia, dar sincer ti-as recomanda tot Stripe. E mai bun si mai usor de configurat, ca in video. Ma bucur ca-ti plac tutorialele!

[@r0b3rtlacatus52]

@@wpmaker și pe plan fiscal in legătură cu ANPC cum trebuie să procedezi ca site-ul tău să fie în regulă?

[@r0b3rtlacatus52]

Ca am observat ca multe site-uri e-commerce cu diferite produse au un logo cu scris ANPC, ce ar trebuii să fac să fie totul legal?

[@wpmaker]

Cred ca trebuie sa ai un link spre ANPC in footer, dar sincer nu cred ca e obligatoriu, sunt sigur ca multe magazine online nu il au. Nu sunt jurist, nu pot sa-ti spun exact legea. Dar daca esti la inceput si nu ai zeci de €10000 in vanzari lunare, personal nu mi-as face griji legat de asta inca :)

[@Denis5549]

please tell me after adding buttons "Enable instant Add to Cart". The add to cart button does not work

[@wpmaker]

Hey Denis, could you tell me at which exact time in the video you're referring to for the "enable instant" option? And what do you mean "does not work", does nothing at all happen when you click it? Or do you get an error?

[@Denis5549]

@@wpmaker 1:28:54, When I check the boxes in your plugin, the button in the product card add to cart does not work. Nothing just happens when you press it.

[@wpmaker]

@@Denis5549 It's still working on my test website, unfortunately it's super hard to tell why it might not work for you. Are you using the exact same setup as me (same steps, theme, plugins as in the video)? If not, it could be a plugin/theme that's conflicting with the plugin. Otherwise, it could be a recent WordPress update that broke the functionality. It would be useful if you could, in your browser, right click on the page and go to Inspect. Then open the Console tab on the right side. Refresh the page, and click Add to Cart. An error will likely show on the right side when you click Add to Cart. If you tell me what error you're getting, it would help me look into it more. Sorry that I can't help more or provide an easy solution.

[@Denis5549]

@@wpmaker wc_add_to_cart_params is not defined just tried it on another site that I did before. that is, there is a difference in topics, etc. But you are super, I’m shocked that there are people who make such videos. And he also answers such questions in the comments. Thank you very much for your work, you helped a lot.

[@Denis5549]

@@wpmaker I Enabled AJAX. Now it works. I enjoy of your Videos!

[@krzysztofjarzebinski5552]

Unfortunately an access to the uploading page is forbidden. It is a pity.

[@wpmaker]

I'm not sure what you mean, is this link not working for you? wpmkr.com/wp-content/uploads/2022/11/make-a-store.zip Or did you mean something else? If the link doesn't work, may I ask what country you're trying to access it from? Or if you're using a VPN? The link is working for me without problems. And I haven't restricted any countries. If it doesn't work for you I'd love to know what country so that I can ask my web host to make sure it works for you. Thank you!

[@krzysztofjarzebinski5552]

@@wpmaker Hi Andre, thank you for the link. Now I got it. I live in Berlin, Germany.

[@wpmaker]

@@krzysztofjarzebinski5552 Perfect, happy to hear it works!

[@r0b3rtlacatus52]

salut Andrei am o problema cu pagina de contactare.... nu îmi ajung e-mail-urile cum pot rezolva?

[@wpmaker]

Asigura-te ca ai urmat pasii de la minutul 1:18:30 de aici - kzbin.info/www/bejne/j3K9dmmHq9R_iZosi=Kn0Xa2wWzGoBiDtg Daca modifici campul "From E-mail" asa cum arat acolo ca sa rezolvi eroarea din chenarul galben, ar trebui sa primesti e-mailurile fara probleme. Asigura-te ca verifici inclusiv folderul spam, desi probabil vor ajunge direct in inbox. Daca nu ajung in inbox, poti da whitelist adresei ca sa le primesti in inbox pe viitor.

[@r0b3rtlacatus52]

@@wpmaker nu merge tot nu imi ajung :(

[@r0b3rtlacatus52]

salut Andrei cred ca am descoperit de ce nu funcționează pentru că mail SMTP trebuie sa îl plătești ce recomanzi sa fac?

[@r0b3rtlacatus52]

și mai am o întrebare cum pot schimba din engleză in română checkot-ul ( in loc de first name: nume) (in loc de last name: prenume) ecc

[@wpmaker]

Pentru mail, daca inca ai probleme, probabil ai domeniul configurat gresit (la mine a functionat doar cu setarile pe care ti le-am sugerat). Cel mai usor mod sa rezolvi problema, e sa instalezi WP Mail SMTP (e gratuit, nu trebuie sa platesti nimic) si sa-l configurezi asa cum e descris aici - wpforms.com/docs/how-to-set-up-smtp-using-the-wp-mail-smtp-plugin/ Checkout-ul ar trebui sa fie deja in romana, dar e posibil sa il vezi in engleza daca esti logat ca admin. Vezi cum este afisat cand intri pe Checkout in Incognito (nelogat ca admin). Daca nu e in romana, atunci urmeaza pasii de aici si asigura-te ca ai site-ul setat pe Romana - translatepress.com/change-woocommerce-language/ Daca e in engleza inclusiv cand nu esti logat (sau cand esti pe incognito), atunci poti folosi un modul precum TranslatePress ca sa-l traduci. Sau poti customiza orice text din checkout cu putin cod adaugat in functions.php (metoda putin mai complexa dar mai buna), asa cum e descris aici - www.businessbloomer.com/woocommerce-checkout-customization/

[@Roussille1]

Thanks for your video , great ..🖕

[@kkck1075]

How can i practice making a website first instead of going live

[@wpmaker]

Look up how to setup WordPress locally. It's a bit more complicated but you can do it.

[@arnauduu3765]

Merci !

[@wpmaker]

Wow, this is the first Super Thanks we ever got! Thank you so much Arnaud, it means a lot! 🙏

[@arnauduu3765]

@@wpmaker very well deserved ! My pleasure ;-)

[@MilesandMoneyMatters]

Excellent walkthrough. My website is showing" Not Secure". Do you have a video that shows how to make it secure . Thanks

[@wpmaker]

Hey, this didn't happen for me following the steps in the video so I'm not sure what caused it for you. But you can install the plugin Really Simple SSL and it will handle it all for you. Just install it and it should be fixed instantly. Hope this helps!

[@MilesandMoneyMatters]

@@wpmaker Thank you so much. It worked perfect.

[@gorkaurzelai5072]

Is not working. Warning: Trying to access array offset on value of type bool in C:\xampp\htdocs\pagolasnorias\wp-content\plugins\wpm-products\class-wpm-product-options.php on line 340 This is the code, exactly in the if: // Update gallery thumbnail size function update_gallery_thumbnail_size( $default ) { $wpm_product_options_options = get_option( 'wpm_product_options_option_name' ); if( $wpm_product_options_options['improve_layout_design_1'] ) { return array( 'width' => 250, 'height' => 250, 'crop' => 0, ); } return $default; }

[@thesleepykoala]

Change the if statement to use this second condition. if( isset( $wpm_product_options_options['improve_layout_design_1'] ) && $wpm_product_options_options['improve_layout_design_1'] ) { This will check whether the index exists and only access it if it does, preventing the error from occurring. You will find a ton of the same errors. You can repeat this change for each, exchanging the left-hand side's 'improve_layout_design_1' for the right-hand side.