How To Add/Remove Sidebar To WooCommerce Shop Page

Customizing WooCommerce shop page is not an easy task, especially for people who don’t know code. However, if you follow this tutorial closely, you’ll have no problem adding or removing sidebar to your WooCommerce shop page. Let’s get started.

Understand shop page template

Your activated theme usually comes with many .php files. Some of them are template files, which the file that tell how content should be displayed on your site.

To display shop page, WordPress first look into your current theme folder to find a file named “archive-product.php”.

If that file is available, then it will use that file to display your shop page.

If that file is not available, WordPress will find a file named archive.php. If the file is found, the search stops and archive.php will be used to display your shop page.

If both archive-product.php and archive.php are not found, then WordPress will use index.php to display the shop page. index.php is available in all serious WordPress themes.

Steps to add/remove sidebar to WooCommerce Shop page

Now, let’s get our hands dirty. Our plan is first, create child theme of your current theme, then activate it. After that, we create a file called archive-product.php in that child theme and customize that file to achieve our desired result.

Step 1: Create a child theme and activate it

If you are not familiar with child themes and don’t know how to create one, I’ve made a child theme tutorial here. Please create one first then come back here when you are that child theme activated. Don’t worry, your current looks and feels of your site is safe.

Step 2. Create the file archive-product.php in your child theme folder

You need to access to your server to get this step done. You can either use FTP or cPanel or SSH to login to your server, navigate to your child theme folder and create archive-product.php file. Then, copy and paste the content from here to that file.

Now, we are ready to either add or remove sidebar from our shop page.

Step 3. Add sidebar to your WooCommerce shop page

If you view your shop page now, you’ll see that it now has a sidebar. Why is that? Because of this part in the template file:

adding-sidebar-to-woocommerce-shop-page

So, if you want to add sidebar to your shop page, you are done. How great is that?

Step 4: Remove sidebar from your shop page

If you want to remove sidebar from your shop page, there are extra works. Remember from the step above, I mentioned that parts that display the sidebar? Well, we need to remove that.

So, I’m going to comment out the the two lines that I underlined red in the screenshot above by adding a double slash at the beginning of the line.

comment out sidebar to hide it in woocommerce shop page

Now save the file and view the shop page, surely you’ll see no sidebar:

sidebar removed from shop page

 

However, if your shop page looks like mine, there are more works to do. We need to make the products fill the width of our page, not leaving a blank space on the right like this.

Step 5: Make the shop page content full width

Now, you need to add some custom CSS code to make the shop page full width. So, the first step is to find the CSS selector of the part that contains the products.

On Chrome, right click on any place on your page and select inspect. If you know CSS, you have no problem finding the container. However, if you don’t know CSS, let’s hover the cursor over the elements in the inspection window (the window appears after you select inspect) until you see this:

finding product list class

This is the right element to pick CSS selectors.

So, in my case, the CSS selector would be:

.product-wrapper.products-list

And here is the rule I put in Appearance->Customize->Additional CSS:

.product-wrapper.products-list {
    width: 100%;
}

If you view your shop page now, you’ll see the products occupy full page’s width.

If this is your desired result, congratulations!

Conclusion

Adding and removing sidebar from WooCommece shop page requires a bit of coding. However, I hope you find the tutorial is easy to follow. If you have any question or need help with your shop page, please leave a comment below.

Get Quality WooCommerce Tutorials Delivered To Your Emails Daily

No spam, only quality content

The Ultimate Guide to WooCommerce Product Shortcodes

WooCommerce supports a long list of shortcodes that you can find here. This post covers only WooCommerce products shortcodes, which are the ones that display products only. Let’s go over them step by step.

Quick shortcodes to display your products

Display all products

If you want to display all products on your store, simply use this shortcode: display all products shortcode

Display featured products

To display all WooCommerce featured products on your store, use this shortcode: display all featured products shortcode

Display all on-sale products

To display all on-sale products, use this shortcode: all sales products shortcode

Display all best selling products

To display best selling products, you can use this shortcode: best-selling-products-shortcode

Customize the display of products with attributes

Now you know all the important shortcodes to display WooCommerce products. However, what if you want to specify how many products per line, per page…? This is where attributes come into play.

Specify how many products per row with columns

If I want to display three products per row, I’ll use this shortcode: specify number of products per row And sure enough, I have a page with all of my products, 3 items on every rows: specify number of products per row I only write the shortcode with products, however, the same logic can be applied to all the shortcodes above (featured_products, sale_products…)

Limit number of products to display with limit

If your store has many products, it’s wise to limit the number of products to display with the limit attribute. For example, the following shortcode limit only 9 products to display: Of course, you can combine multiple attributes together to achieve more complex display. The following shortcode display 10 products, 5 per line: combine multiple shortcode attributes

Products pagination with paginate

In case you have multiple products and you want to display them in multiple pages, the paginate attribute is what you need. You also need to set how many products you want to display PER PAGE with the limit attribute. For example, the following shortcode display all products in multiple pages, 4 products per row, 12 products per page:

Display products from specific categories

There are times you don’t want to display all products. Instead, you only need products from specific categories. In this case, you can specify the list of category slugs in your shortcode: display-products-by-category In this example, I want to list products from 3 categories which have their slug as hdd, ram, ssd accordingly. How can you find product categories’ slugs? Simply go to Products->Category and look for the slug field of the categories you want: how to find product category slugs

Set products’ order by order and orderby

By default, WooCommerce display products order by their title. However, you can change this behavior by using order, and orderby attributes. The available value for orderby are: date – The date the product was published. id – The post ID of the product. menu_order – The Menu Order, if set (lower numbers display first). This can be set for each product in product data tab popularity – The number of purchases. rand – Randomly order the products on page load (may not work with sites that use caching, as it could save a specific order). rating – The average product rating. title – The product title. This is the default orderby mode. There are only two available value for order: ASC: ascending, products that have lower value (as specified by orderby) come first DESC: opposite of ASC For example, I want to display all products, order by rating in descending order, I would use this:

Conclusion

As you can see, shortcodes can be very powerful if you them correctly. The list above is not exhaustive. If you have suggestion or request, please let me know.    

Get Quality WooCommerce Tutorials Delivered To Your Emails Daily

No spam, only quality content

How To Fix Add To Cart Button Not Showing In WooCommerce Product Page

So you’ve decided to use WooCommerce to power your store, great! You got it installed, created your first product and clicked on the product link with excitement. However, all you see is this: add to cart button is not showing on woocommerce Where is the add to cart button? You wonder. How can someone buy your product without that button? Don’t panic! This issue is quite popular and quite simple to fix too. Let’s find out why your add to cart button is not showing and how can you fix.

Why your add to cart button is not showing

The reason why you don’t see the add to cart button on your product page is because your theme doesn’t support WooCommerce. It sounds strange to you but not all themes out there support WooCommerce. When you started your site, you might not expect to sell anything. For example, you started a blog to write about your favorite topics. Your intention was to share the idea. You didn’t anticipate one day you’ll sell a book on your site. And that’s normal. Our lives are filled with surprises. So, what can you do about this? Let’s discuss the solutions.

How to get the add to cart button to show up on your WooCommerce product page

There are two solutions for this problem. As the cause is your theme lack WooCommerce’s support, you may see the first solution is to change to one that supports WooCommerce. That’s the best solution, if you can afford it. Changing theme for your site is easy when you haven’t done much customization based on your current theme. However, if you have built a child theme to extend your current theme’s functionalities, changing it to something else can be very expensive. Even when you don’t have many attachments with the current theme, finding a new theme can take days. So, in case you can’t change or don’t want to change your current theme, read on.

Fix add to cart button not showing by customize your theme file

You are about to enter some code but don’t worry, it’s very simple. Let’s go to Appearance->Theme Editor. You may see a dialog says be careful. Click on I understand and proceed. Now, look at the right side. You’ll see something similar to this (chances are you are using a different theme so the list of the files are not identical):
current-theme-files
current-theme-files
Pay attention to these two files:
  1. single.php
  2. index.php
If you see single.php, click on that. Otherwise, click on index.php Since my theme has single.php file, I click on that. Yours could be different. However, it should contain the line starts with get_template_part as I highlighted in the screenshot below: edit wordpress template file now copy that line and replace it with the following code:
if ( is_singular( 'product' ) ) {

    wc_get_template_part( 'content', 'single-product' );

} else {
    //paste the line you copied here (replace the whole line, including //)
}
Make sure you replace your own line (the one you copied) to the second block. In my case, my code would look like this:
if ( is_singular( 'product' ) ) {

    wc_get_template_part( 'content', 'single-product' );

} else {
    wc_get_template_part( 'content', 'single-product' );
}
Finally, save the file. Let’s check out my product again. add to cart button show up on product page As you can see, the add to cart button appears. I also have the PayPal button appears since I installed PayPal gateway plugin.

Conclusion

As you can see, it is quite simple to fix add to cart button not showing up on your product page. However, even when it is fixed, the product page’s appearance may not be what you like. In that case, you may need to hire someone to customize that page for you. Any decent WordPress developers would be able to do that for you.

Get Quality WooCommerce Tutorials Delivered To Your Emails Daily

No spam, only quality content

The Ultimate Fix To WooCommerce Not Sending Emails Problem (For FREE)

If you are serious about your WooCommerce store then the emails sending function is very important. Most of the time, you send emails to your customers following their purchases, their contact form submissions. You may also send emails contain coupons to your customers on their birthday. You also need to get emails regarding your store status. None of those things happen if you have WooCommerce not sending emails problem.

The prevalent of emails problems in WooCommerce (and WordPress)

By default, WooCommerce uses the wp_mail function of WordPress to process its emails. wp_mail in turn based on the mail function of PHP (the programming language that made WordPress). Without proper configurations, the mail function rarely works. On the occasions it does, most of your emails will go to spam folder. In fact, most sites use default mail settings, which make the mail sending success rate pretty low.

How to fix WooCommerce not sending emails

As you can see, WooCommerce has nothing to do with deliverability of its emails since it utilizes the function from WordPress. So, the right question to ask is how to fix WordPress not sending emails. Fortunately, the fix is quite simple. Let’s get started.

Step 1: Get a free email (gmail, mail.ru…)

The first step is to register an email. The reason is we are going to use the mail server of those email providers (gmail, mail.ru) to send our emails, not our host’s server. Using those email providers’ servers increases email deliverability (the success rate of sending email) greatly.

Step 2: Get the STMP configuration of your email

The configurations depend on the email service you use. For example, Gmail SMTP settings would be:
  • Server address: smtp.gmail.com
  • username: Your Gmail address (for example, example@gmail.com)
  • password: Your Gmail password (or app password)
  • SMTP port  587 (TLS)/465 (SSL)
  • TLS/SSL required: Yes
If you use a different provider, you can search for provider + “smtp settings” to get the right configurations. In the case of Gmail, if you want to use SMTP settings, you may need to disable two-steps authentication or create an app password Now, you got the configurations. Let’s move to the next step:

Step 3: Install Easy WP SMTP plugin

Our next step would be installing Easy WP SMTP plugin (click on the link to download or you can install from your dashboard). It’s a plugin that let you specify the SMTP settings then wp_mail will use the mail server you put in this plugin to send email instead of your website’s host. Now you have the plugin installed and activated, click on the settings link under its name: click on easy wp smtp settings to start configure smtp You’ll see the page where you put all the details as below: As you can see that, I use an account from mail.ru. However, with other email providers, you can enter the same details except these fields:
  • From email address: that’s your email address
  • From name: this is what your customers see in the sender name of your email. So, pick something that represents your store
  • Reply to email address: When the recipients hit the reply button, which email will receive that reply. This could be a different email, maybe your dedicated email to handle supports
  • SMTP host: the smtp server you got from Step 2 above
  • SMTP user name: your email
  • SMTP password: your email’s password (or app password in case of Gmail)
Now, with all the info entered, click on save changes.

Step 4: Test your email settings

The final step would be testing if the configuration works. Still in Easy WP SMTP, click on test email. send test email to confirm smtp settings work Enter a valid recipient in the To field and some dummy text in subject and message field then click on Send test email. If your setup is correct, you’ll see the email goes through: email sent successfully As you can see, I got the test email in my other account.

Conclusion

Emails are still very important for any ecommerce store. In fact, it’s the main channel to communicate with your customers. If your WooCommerce store fails to send emails, that’s a big problem. Hopefully, the tutorial I made it this post can help you fix WooCommerce not sending emails problem. Notice that free email services have their limits on how many emails you can send per day (500 in the case of Gmail). If you go pass that limit, exceeding emails will not be sent. In that case, you may want to use a dedicated email service such as Amazon SES or Sendgrid to deliver your emails.  

Get Quality WooCommerce Tutorials Delivered To Your Emails Daily

No spam, only quality content

How To Reward Loyal Customers With Store Credit in WooCommerce

There are many ways to reward your customers. One of the most common methods is to offer coupons. However, the problem with coupons is the customers need to remember the code. There is a better way to reward your customers. That is to use store credit. This post will show you how you can create store credit for one or many customers so they can use the discounts on your store without remembering the coupon code.

Get WooCommerce Smart Coupons Plugin

WooCommerce by default doesn’t support store credits. To use this feature, you need to install an external plugin called WooCommerce Smart Coupons.

Send store credits to customers by email

Now you have WooCommerce smart coupons installed and activated. Let’s go to WooCommerce->Coupons: woocommerce smart coupons dashboard If you visited WooCommerce’s default coupons screen before, you’ll notice there are many differences. However, our focus in this post is store credit. Let’s click on “Send store credit” tab. send store credit to customers As you can see that, the interface is quite simple. You need to first, specify the list of emails of the recipients. If you have more than one email, then separate them with commas. Next, you enter an amount that you want to give to the customers as credit. Then, finally, you can enter some messages to the customers. After that, you hit send. This is what the customers receive: store credits sent to customers Your customers don’t get the emails? Then maybe your site has problem sending emails. Check this WooCommerce Email not sending fix now Now, you can see that the email owner has got a coupon code. If the emails you entered are from store’s customers (they already registered on your store), then that person can login and use the store credit without remembering the coupon code. Otherwise, she will need to copy that coupon. Sounds confusing? Let me demonstrate.

Apply store credits on checkout

The email I sent to above is from a registered customer. Now, if he login in to the store and add items to cart, nothing happens. However, on the cart page, the customer will see this: store credits displayed on cart page If I click on the coupon, the discount will be applied instantly: Now, if the customer decides not to use the credit but give it to someone else, she can just send the coupon code to that lucky person. In this case, that lucky person needs to enter the coupon code on cart page to get the discount: apply store credit using coupon code After clicking on Apply coupon, you’ll see the discount applied: Now, it works just like a coupon.

Conclusion

As you can see, store credit is basically a coupon. However, it offers more flexibility to you as store owner. You can create and send credits to many users at once. If the customers are registered, they don’t need to enter the coupon code and just like coupon codes, they can give it to other people to shop on your store. Make sure you get WooCommerce smart coupons plugin here first.  

Get Quality WooCommerce Tutorials Delivered To Your Emails Daily

No spam, only quality content