WooCommerce: Useful codes and tips for eCommerce websites (WordPress using WooCommerce) | Saujan Man Pradhan | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

WooCommerce: Useful codes and tips for eCommerce websites (WordPress using WooCommerce)

teacher avatar Saujan Man Pradhan, WordPress Designer and Graphic Designer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

5 Lessons (25m)
    • 1. Introduction: WooCommerce

      2:18
    • 2. Shortcodes: Price Shortcode and Add to Cart Link

      4:37
    • 3. Customizing WooCommerce Website

      8:59
    • 4. How to Add terms and conditions to the Checkout page?

      3:05
    • 5. How to add Crypto Currency gateway - WooCommerce?

      5:36
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

37

Students

--

Projects

About This Class

Greetings Everyone!

In this course, you will learn some useful codes and tips for WooCommerce websites. This course will help you customize many elements on your Woocommerce website and these changes might also contribute to a better customer experience as we can shorten checkout procedures and also offer more payment terms.  

Here's what included:

1. Price Shortcodes & Add to Cart link: Using simple codes, you can take out the price of a product and use it on any pages of your website with a shortcode. You will also learn to enable the Add to Cart link on any text or button for a single product.

2. Change the default texts & Links: As there are some default texts (like Add to Card, Return to Store, Place Order, etc) & Links we will customize it. We will learn how you can directly send your customers to the cart page or checkout page.

3. Remove fields from Checkout Page: There might be many elements on the checkout page that you may not need, so we will learn how you can remove them.

4. Terms and Conditions page: Learn how you can add the Terms and conditions page on the checkout page of your WooCommerce Website.

5. Add a Payment gateway using Bitcoin and other cryptocurrencies: We will add a crypto payment gateway to your WooCommerce website.


Thus after this course, you should be able to customize your WooCommerce website.

So let's get started.

Meet Your Teacher

Teacher Profile Image

Saujan Man Pradhan

WordPress Designer and Graphic Designer

Teacher

Greetings everyone!

I am a WordPress Developer, Graphic Designer and a Social Media Marketing Expert with a Master Degree (MBA) from Nepal and more than 8 years of experiences in Designing & Marketing.

I have been working as a WordPress Developer for more than 5 years now. I have worked for both back-end and front –end development including WordPress themes and plugins. I do themes customization, designs and many more. Being a Graphic Designer helps me to play with color choices and as well better communicate with the clients as sometimes I use the image form to showcase the actual design before it is made.

For Graphics I mostly use Adobe Photoshop to implement my concepts to reality and also use Microsoft PowerPoint to present the ideas through presentat... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction: WooCommerce: Greetings everyone. I am Susan for them. And today we will learn some useful codes and tips for WooCommerce websites. So here's what's included. We will learn about SARC codes to take out the price of the product. And as will enable add to cart link on any text or button for a single product. This can be extremely useful if you want to customize your product base. Then we will change the default takes the WooCommerce uses like add to guard, returned to solve Bayes, et cetera, and also edit some fields from Ditech out Bea's. Additionally, we will also learn how you can directly send your customers to the card pays our checkout Bayes. Also learn how you can add terms and conditions on the checkout bays or feel WooCommerce website. And also add Bitcoin and other cryptocurrencies as a payment gateway. Thus, the only objective of this course is to share some essential codes that can be used on WooCommerce websites. What will you learn in this course? This course aims to offer useful tips and tricks to customize your WooCommerce website using the coast provided, you can design your own custom basis for products, customize, checkout pages, and many more. What are the requirements for this lesson? You will need to have a WordPress website using WooCommerce. You do not need to know Codes as the video lesson clearly explains how you can use them all you have to do copy and paste. However, having a basic knowledge and WordPress will be very beneficial. Conclusion, after this course, you should be able to customize many elements are new commerce website. These changes might also contribute for better customer experience as weekend certain checkout bears procedures and also offer more payment gateways. So let's get started. 2. Shortcodes: Price Shortcode and Add to Cart Link: Greetings everyone. Today's tutorial is all about WooCommerce website. We will learn a soft code to take out the price of the product and enable add to God link on any text or button for a single product, this can be very useful if you plan to design your default product bays and showcase the price and use any button objects to add the items to Descartes. To get started, let's open our sample website, which is elites learn something dark homes last demo. So this is our sample website, which is a default WordPress theme. Let's go to its back-end. That is WP admin. Enter your credentials. Now for these two Tyrion, I have already installed the WooCommerce plug-in. I've also added a dish per dark. Now instead of using this default product-based, let's take out the price and add to God so we can design the product-based as B1 for that, let's go to Pages and add new Altai delete as a desk. Whatever B's builder you are using, you can design your pages as you wish. For now, I will just write some text. Now first let's take out the product price for that. Again, go to the dashboard, go to Appearance and Theme Editor and functions.php. Scroll down. Now copy this code which will be provided and based it on the functions.php update file. Now go to product and find its ID, which is Dean for this one. Now you can add a short code to display the price of the product. Let's again go to the day space and use the salt code. But duck underscore price ID is equal to inverted commas. In between commas, add the product ID for us, it is thin. Now again, let's add the add to cart link to buy the product. So I want the link here. Simply add question mark. Add to Cart is equal to the product ID, which is d1, our case. Now on this side we have slash demo. Does need to add this last demo in front. You can also add a holding like your website.com slash question mark at Dhaka and new product ID. Now it's done. Let's publicize it. Before viewing the base. Let's again go to the backend and go to Appearance and Theme Editor and functions.php. Scroll down, copy this code, and base it at the bottom. Update file. Basically, this code will directly send the costumer to the cafes and also removes add to God default message. Now let's check out this base view pays. As you can see, there's product price. And as we'll add the garlic onClick here, let's click on click here. So as you can see, these ads product to the cart. Now if I change the price of the product, let me quickly go to products. Week ADT, list chains the price to 60, Update, and go to the taste space. Let's Refresh. See the prices change. And as we'll add to cart link also works great. So you can add many products and use its ID for price and add to God. However, please note, this may not work with the variable product. Hope this lesson was helpful. Thank you very much. 3. Customizing WooCommerce Website: Greetings everyone. In today's tutorial, we will customize WooCommerce. We will make some changes to the default takes and as we'll remove fields from the checkout page. So let's get started. We are now at the dashboard of our demo site, that is WP admin. This website only has the WooCommerce plug-in. Let me open in new tab. So is the WooCommerce plug-in and Stripe payment gateway. Let me close this and we have used the default WordPress theme, 2021. Did me quickly go to the website. So this is the default theme. And if I go to the shop, we have added one single disk product. Every website will look different as per the themes used. However, in this WooCommerce tutorial, we are going to customize the default contained of the WooCommerce plugin. So it should also work great for your website. So first thing, we are going to change the text for these add to cart. In order to do this, please go to your dashboard, go to Appearance and Theme Editor. Go to themes functions.php. Scroll down and simply copy this code. Please note, depending upon the type of product you are using, if it's a single product, then use this code. And if it's product archives or you are offering downloads, then use this code for these, we said are for downloads. So we are using this code, simply copy it and paste it here at the bottom and object file. So we have changed the default takes to by now. It was Add to Cart. Let me refresh this. So it's by now, whatever changes you make here, it will be reflected over there. So this is done. If I click on Buy now, it showed me view God as an option and it is still in the same base. So what we can do is instead of staying in the same pace, we can directly send the customer to Decartes base, that is this space, so that it's not confusing for anyone to do that. Here is the code to send to car directly simply copied. And again in your themes functions.php pasted at the bottom and update file. After only adding this code, it will not work. So we will have to make some changes to the WooCommerce settings. For that, simply go to WooCommerce and settings. Go to products. And please make sure this is ticked off. If this option is not untagged, the court may not work. So please make sure this is off and save changes. Let me go to the website. Also delete this product. They start again. It can go back to the shop. Now I'm here, in fact lead to buy now, I am directly taken to the card base, as you can see. Now for some people, this state may also not be necessary. And they're rather want to send directly to the checkout bays. So basically these checkout page, let me go back and delete this product again and go back to the shop. Now in order to direct this into the checkout Bayes, simply copy this code. Please note earlier we seem to cart, so delete this code and use the checkout code. Use only one either to copays or to the checkout base and update file. Please note, to make this code word, you must undertake enable edX in the WooCommerce settings. Let me refresh this. If I click on Buy Now, I am directly taken to the checkout page, as you can see. So this is the checkout base code is working or grade. Let me go to the guard and delete the product. So here you can see redound to shop. And when clicked here, it goes to the slash sharp bays. So we can change this takes to with any other text we want to use. To do that, again, copy the code, and paste it at the functions.php. So this is the text here, right? Your text which will be reflected here, update file. And if I refresh this, So that takes, has been changed. Now again, this will go to the last sharp Bayes. But if you want to change this URL like to the homepage or any other specific bases. We can do that to simply copy the code and base it at the bottom. So this is the URL it will take to, I want to send it to the homepage. So let me copy this and replace it here. And update file. Just a reminder, the edX needs to be disabled. Now this should go to the homepage. Let me refresh the page. And then if I click here, I am now redirected to the homepage, as you can see. Now let me again go to the shop and click on by now. Now I'm in the checkout base. Let us customize these fields to all of these boxes may not be necessary if you are selling digital products are shed. You wouldn't need all this information. So we can remove many elements from here. In order to do that, we need to add some cause to functions.php. Simply copy this code and base it at the bottom. Briefly explaining this code will remove the firstName, lastName, address, city, postal code, and as accordingly, depending on your WooCommerce setup, you could have a billing address and sipping address. Here's the code to remove the fields from this shipping address as I've set up for downloads, sipping is not so if in case you want to customize sipping details, you can use this to make changes to the shipping fields. If you want to completely remove sipping, then I will add the code in the description link. Anyway, you can keep or remove shipping details. Let's keep it and update file. Let me refresh this space. So all the fields are gone. So whatever you need on the side, remove it from the code. Like I need the name, remove it. You might need a last name, remove it. And you might need a phone number and e-mail, so remove it to. So whatever fields are here in this code will be hidden from the site after doing this, simply update file. And if I refresh this, so you can see there's FirstName, LastName, number, and e-mail. So it works all good. Now the last thing, if we choose PayPal, it proceeds to pay back up. If we choose strike. It says Please other if you want to change the place order dx, again, go to the code, copy it, and paste it here at the bottom. So I am replacing it with by now update file. And if I refresh this, and if I click on stripe, you can see by now. So this is a quick tutorial to customize WooCommerce. If you want to add terms and conditions like this, please check the other tutorial. I hope you learned something new. Thank you very much. 4. How to Add terms and conditions to the Checkout page?: Hi guys. Today we are going to learn how we can add terms and conditions to the checkout base of your e-commerce site that uses WooCommerce. This is our sample website. If I go to shop and choose a product, proceed to checkout. Here is no terms and conditions. So we will Terms and Conditions at this space like this base. Anyway. So let's go to our dashboard. Wps last amine into your username and password. If you go to WooCommerce and savings accounts and privacy, there is only an option to add the privacy policies. For example, if I select a base, say home-based, and save changes. And if I refresh this base, so only the link to privacy policy is updated. So let's add a terms and services with the DEC option for that, let's go to a dashboard. Phase is add new. Let's call it terms and services. You can give any title you want and write your terms and conditions here. And the base. So if this is the base, this is the Dems we created. So this is about it. So in order to add this page to the checkout page, go to your dashboard. Go to Appearance, and go to Customize silicon WooCommerce. Select check our base is unselect. The terms and condition pays, you create it. So if we check it, it has been added. Let's publish this. Now let's go to the shop again and proceed to checkout. You can see the terms has been added. If you want to get rid of this privacy. Go-to WooCommerce, settings, accounts and privacy. And click Close. And shape changes. You will only have dumb space, you create it. So this is how you can add them to your e-commerce website. Thank you very much. 5. How to add Crypto Currency gateway - WooCommerce?: Greetings everyone. In today's tutorial, we will quickly learn how you can add WooCommerce Bitcoin payment gateway so that your customers can be via Bitcoin and other cryptocurrencies on your website. So let's get started. To start with, let's open our demo website. Hill, it's learned something.com slash demo. If I go to the desperate docked Add to Cart and checkout. There's only PayPal. Let's add Bitcoin and other cryptocurrencies as well. For that, let's login to the dashboard. Go to slash WB as admin into your username and password. So now we're in the backend of our website and go to Plugins and Add New and search for Coinbase commerce. This is the one Install Now. And activate the plugin. Now go to WooCommerce and settings. Go to PE means. So you can see going this here, click on Manage. Will need to add the API key and web hook shared secret. So go to this link, commerce dot coinbase.com. If you already have a queen Miss account, then simply login. If not create an account, I will just create a dummy account for now. So we'll get a temporary ten-minute email. However, please use a genuine e-mail ID. Let me give a password and create an account. I'm not a robot. And create an account. You will receive an email. It might take some time. Here is it now? Verify your e-mail. Click Continue. You will also need to sit up two-step authentication. Those who do not have Google Authenticator search and install it on your phone, open the app and scan the QR code and write the code here. You can also keep the backup codes. These codes will be useful if you do not have your phone. I'll skip this for now. Continue, continue, continue. Copy the seed phrase in the no bad. This is very important. As it has been clearly mentioned. If you lose the SegPhrase, you will lose crypto in your wallet. Click on, Okay. Now type your seed phrase. Then verify the seed phrase. For safety, please back of the crypto wallet to Google Drive as well. I will, however, skip this and go to the Dashboard, then go to Settings. Scroll down. You can also connect withdrawals. Here, active cryptocurrencies. So take the option you want your site to accept. We'll choose all. Then scroll down and create an API. Copied and based on your quiz WooCommerce. Now, we also need Way book Seeds secret. For this, we need to add an endpoint. Again, go back to WooCommerce. Here is the way books here secret, and here's the URL we need. Each one will have its own unique URL. Copy eat. Add an endpoint based the URL and Save. Now click on so seared secret, copy it and paste it here. And save changes. Now, if I go to my website and tried to purchase a desperate dock at two cod, proceed to checkout. Filling the required details. Now you can be via Bitcoin or other CREB dose list, choose it, and proceed to Coinbase. So the customer can either be via coinbase, choose the coins they want to pay with. They can either scan the QR code or copy the VDC address. Please note all these payments are processed by Coinbase commerce. I will cancel the payment for now. So this is how you can easily set up Bitcoins and other cryptocurrencies on your WordPress website. I hope this lesson was helpful. Thank you very much.