Nowadays, people tend to buy online more often than just going to the shopping malls with family or friends. Statistics show that nearly 2.14 billion people shop online, which means that the daily traffic of any online shop might be much higher than the monthly audience in the regular store. So, why not use such a great opportunity and bring profitability to your business? However, it is not that simple as it might sound. To design a fully functional website, you need to consider many requirements, but there are a lot of plugins to simplify customization and add functionality. The most popular WordPress CMS plugin for e-commerce is WooCommerce. Nearly 25% of the online shops worldwide are using this platform, which is twice as many as people using Magento or three times more than Shopify. More info on the statistics read here. WooCommerce is a professionally developed software solution that includes tools for simplifying the purchasing process for customers. This article will find the guideline on shop page customization, common issues, and a collection of trending WooCommerce Themes with Shop Page from TemplateMonster.
What is the WooCommerce Shop Page
When you install WooCommerce, the plugin automatically creates essential ecommerce pages like Shop Cart, Checkout, My Account, and Privacy Policy. When you import products to your website, they get transferred to your shop page by default. So, it will be more convenient if you define a custom page as your shop page. For doing this, follow the next steps:
- Go to WooCommerce settings from your dashboard, click on the products tab, and stay on the general subtab. It allows you to define your shop page.
- Click on the drop-down menu and select the one you want to set as your shop page.
- If you haven’t already had a custom shop page, you can easily create a new one from the dashboard and set it as the shop page. While you are on the setting page, you can also manage your cart behavior and set a placeholder image for your products.
How to Make the WooCommerce Shop Page as a Home Page
When an interested buyer searches your website’s name, they should land on your shop page. You can ensure this by making the shop page your homepage. Here’s the detailed guideline.
- In your WordPress dashboard, hover over settings and click on reading.
- In the home page display setting, switch to a static page instead of your latest posts, click on the drop-down in front of the home page, and select the shop page you want to list as a homepage.
- After this step, the URL of your shop page slug will disappear automatically, and the dot-com version of your website link will lead straight to the shop page.
Creating the WooCommerce Shop Page
In this paragraph, you will learn how to build an online shop from scratch using the jet web builder plugin.
- Make sure that you have the latest version of WooCommerce and JetWooBuilder plugins installed and active. After that check, the appropriate widgets that will be used for creating our product page templates are enabled.
- Go to Elementor->JetWooBuilder Settings->available widget step. To put it simply, a properly working online shop consists of products and template pages. Before you start creating the template pages, please make sure that you’ve added all the products and attributes of your products through the WordPress dashboard. The template pages allow us to pull the product data from the dashboard, customize it and then finalize it on the front end, so we will have to create three JetWoo templates:
- single – a template layout of a single product in your shop
- archive – a template layout of one product item on your shop page
- shop – a template layout of all products in your online shop.
So let’s start with the single-page template.
- Click on the WooCommerce->JetWoo templates-> Add New. In the drop-down, select the option “single.” Give a name to your template.
- Choose the way you want your future product page to look like and press Create. We get a single-page template. It is created with the help of JetWoo builder single product widgets, which are available just for the single page template. This page layout is fully editable. You can simply remove the widgets you don’t need and add those you’d like to see on the website.
- For that, just type the word “single” in the widget search bar to find the list of single product widgets. Once you’ve done customizing, click the publish button to save the changes and go back to the WordPress dashboard.
The procedure of creating the archive template is almost the same.
So, let’s go WooCommerce->Jet Woo Templates-> Add new. In the drop-down, select the option “archive.” Give a name to your template. Select the premade layout and press the Create Template button.
Note! You can easily style your archive template with the help of archive product widgets, which can be found in the JetWooBuilder tab of the widgets panel. Also, sometimes you may see a grayed-out or, in other words, empty block of the widget. It means that the product is not filled out in the product section in the dashboard. So, for example, you have ten products for sale now. Still, the other 50 ones are with the regular price, so the sale batch widget that we have at the top of the archive product template will be empty for the other 50 products. According to the info from the product section, the value of each product on the front end is displayed. So, if you see an empty widget block in the page builder, it’s not a bug or a glitch in the system. It’s just some product infill missing in the dashboard. Once done editing, click Publish button and go back to the WordPress dashboard.
Now let’s proceed with the shop template.
- Go to the Jet WooTemplate.
- Add new in this template is for drop-down select the option Shop. Give a name to your template. You can either choose the layout or leave it empty.So, three widgets can be used with the shop template page products. List the products grid and products loop products grid and products list widgets. Allow you to use multiple premade products.
Keep in mind that you can customize this widget the way you want with basically zero coding skills. As for the products loop, to put it simply, this widget takes the Appearance of one product item from the archive template and pulls it into a grid. So, if you have already customized your archive template and want the products in your shop to be displayed, feel free to use the products loop widget and keep in mind that in the future, if there will be a need to update its Appearance, it will have to be done in the archive template.
- Let’s click publish button and return to the WordPress dashboard.
- Now we need to send all custom templates to the website pages to go to the WordPress setting Chetwood builder tab. In general, please make sure that the archive widgets render method is set to Elementor default.In the shop page section, tick Enable the custom shop page in the product shop template, select the design we’ve just finished creating and repeat the same procedure with the single product and products archive section.
- Then scroll down and press the Save Changes button.
- Now check the newly designed and great-looking shop page. In the end, you will receive a stylish single product page with a captivating and user-friendly layout. Customers can easily click through the gallery or leave positive feedback.
WooCommerce Shop Page Customization
In this paragraph, you’ll find a simple guideline on customizing your ShopPage.
- First, go to Appearance in the dashboard and select Customize.
- From the list of customizable web elements choose WooCommerce and then select the Product Catalog.
- Click the first drop-down and decide whether you want the shop page presenting products, categories, or both.
- Then go to the third drop-down menu for choosing the way of product sorting.
- The last two options on this page enable controlling the number of products per row and rows per page. The shop page needs to have these two options working together to manage the number of products presented in the catalog.
- Now, let’s go back to the Product Images, this section you can find in the same list with the Product Catalog, which you have selected previously. This section helps you to adjust the size and aspect ratio of your product thumbnails.
Check out the TemplateMonster Blog for more articles, videos, and resources related to WordPress and WooCommerce.
TOP 5 Common Problems with the WooCommerce and Ways of Fixing Them
Nothing is perfect in this world, and of course, WooCommerce has some technical problems. In this good paragraph, you’ll find the top 5 common issues with WooCommerce and easy-to-follow guidelines on solving them.
1. Outdated Layouts or Plugins.
To ensure the good functionality of overall web performance and security, both templates and plugins should be up to date.
In this situation, the best thing you can do is constantly monitor whether you have the latest version of the theme. Don’t forget to check when the Woo extensions were updated and make sure that you have the newest version. For this, go to WooCommerce and select System Status.
2. Different Conflicts in Templates and Plugins.
The more plugins you have installed, the higher possibility of various conflict types with the theme. Don’t think that if you have installed all templates and plugins specifically created for WooCommerce, you wouldn’t have any troubles in the future. The conflicts still may arise.
First, check the type of conflict. If it’s a theme conflict, go to Appearance, choose Themes and choose a default WordPress template, activate it, and see whether you still have a problem. If it disappeared, contact the template’s developer and ask for help in resolving this issue.
If you have a conflict with the plugin, navigate to Plugins, then choose Installed and deactivate all plugins one by one to find the default one, remove it, and find another one.
3. Wrong Image Size.
For any site, having good images is crucial for creating a favorable impression of your business.
For changing the dimension of the image, go to WooCommerce, the Settings, next choose Products and then Display. Make sure that the image quality is good enough to meet the new dimensions.
4. Digital Downloads that don’t show in Checkout.
If you are selling digital items, and the customers get the link via email, you have to be sure that the process works correctly, as otherwise, you’ll get tons of furious customers.
The main reason for such an arrow is a table conflict with the MySQL database. If the table name is longer than 64 characters, then it won’t be able to generate.
To solve the problem, just make the table prefix shorter. For this, we recommend installing DB Prefix Change Plugin.
5. Wrong Configuration of the Hosting.
If you have made all the recommendations about solving conflicts with plugins and templates and the site isn’t working right, there might be something with the configuration.
The cause of such an issue might be when you’re running a newly installed WordPress site with the default WordPress template and zero plugins besides WooCommerce. The best you can do is to upgrade to WooCommerce Specific Environment like Pressable.
TOP 10 Templates with Fully-customizable WooCommerce Shop Page
Woostroid2 – Multipurpose Elementor WooCommerce Theme
A cool multifunctional theme that suits any business type and needs. There is no need to worry about the customization, and with the Elementor, you can just drag and drop the required element without any need to edit the code. What is more, the performance of the site will be improved with the jet plugins. Successful launch of the store with the integrated online store for WooCommerce. So, the Woostroid2 has everything for creating a unique and functional site that reflects the style of your business. So, why are you still thinking, get the layout now.
Features:
- Admin Panel
- Retina Ready
- Responsive
- Search Engine Friendly
- Well Documented
Toolsjet – Hardware Store WooCommerce Theme
Great responsive and multipurpose design that will suit any business connected with selling hand tools, equipment, accessories, hardware, cars, bikes, etc. A great feature is Cloud Zooming with Image Spider, which helps customers see the product in detail. Product features like adding to wishlist, quick view, compare and add to cart improve the site look professional and positively influence web visitors’ experience. Are you planning to sell goods abroad, so the multi-language and currency feature is exactly for you. SEO optimization ensures the higher ranking of the site in the search results list, consequently increasing traffic. So, Toolsjet is a great combination of functionality and professional design that perfectly will advertise the products.
Features:
- Bootstrap HTML5 and CSS3
- Optimized for Fast Loading
- Portfolio Layouts
- Different Menu Types
- Social Share Buttons
UpLine – Furniture Online Store WooCommerce Theme
A great minimalistic design with a huge set of functions will make any business look trendy and professional. It is easy to edit with the WPBakery Page Builder. What is more, together with the template, you get technical support within six months, which will help solve some possible conflicts and bugs. Fully responsive and mobile optimization ensures that the web pages look great even on devices with small screen resolution. To improve web navigation, there is both horizontal and mobile menu. For a better web experience, you can find such great features as cloud zoom with image slider and product hover that helps preview the product without opening an extra page. Apart from all that characteristics, this product is SEO optimized that improves the site visibility by placing it higher in the search results list. Why are you still thinking, check the Demo and get the UpLine now.
Features:
- Quickstart Package
- Responsive
- Sample Content
- Valid XHTML and CSS markup
- SEO friendly
SportLabs – Sport Nutrition WooCommerce Theme
This dark, stylish WordPress theme with the WooCommerce plugin is a great choice for promoting the products and getting higher revenue. Forget about troubles with the customization and long hours of writing code. This product is built with Elementor, which enables you just to drag and drop the required element. What is more, jet plugins will boost the site’s productivity by adding extra functionality. Don’t worry about images as you get stock pictures that are related to the topic completely free. One more great characteristic is SEO-friendliness, which means that the site will get a better ranking in the Search Results list, just write good SEO optimized content and ensure the high web traffic.
Invest in your feature now with this trendy and functional WordPress template.
Features:
- Performance Optimization
- Search Engine Friendly
- Admin Panel
- SEO Friendly
- Retina Ready
Etechno – Multipurpose WooCommerce Theme
Modern and light hi-tech design that catches the eye of every web visitor. Such WordPress templates with WooCommerce Shop Page will suit any business size and type, especially for the stores that sell electronics, home appliances, auto tools, furniture, accessories, etc. Great design is not the only advantage of this product. Many characteristics simplify customization, improve navigation, and provide a better visitors’ web experience. Moreover, Etechno is fully responsive and mobile-optimized, which means that the web content will be structured and perfectly readable on any device with any screen resolution. There is also WPML support, which enables easy site translation for attracting customers from abroad. So, grow your business with a great website.
Features:
- Include PSD Files
- Cloud Zoom with Image Slider
- HTML5+CSS 3 and Bootstrap 3
- Touch Support
- Social Media Integration.
Jewelry WooCommerce Theme
Jewelry Store WooCommerce Theme is a perfect tool for business advertisement and attracting new potential clients. As nowadays, people mainly buy online, so it’s essential to have an attractive and user-friendly website that is functional and SEO optimized. To save your time, we suggest using both a beautiful and functional template that will satisfy all your needs and save valuable time. With this layout, you get easy web page editing with Elementor, extra functionality with jet plugins, and 24/5 fast and friendly support. Check more details about this product here and watch the Demo.
Features:
- Performance Optimization
- Advanced Theme Options
- Admin Panel
- Sample Content
- Free High-quality Images
OCBEE WooCommerce Theme
An attractive and unique theme that will stand out from the crowd. Ocbee is perfectly suited for honey production, bee farm, natural medicine, cosmetics, etc. The great design shows the connection to nature and eco-friendliness with creative background elements like flowers and leaves. There are a lot of premade pages and elements that help in creating your unique site:
- More than five amazing Homepage Demos
- Two stunning shop page layouts
- More than four styles of the product page
- Four great blog layouts
- Four premade headers
Don’t worry about the difficult editing process. Here you need to drag and drop the elements and write SEO-friendly content here. Check the Demo to see how all features work together.
Features:
- SEO friendliness
- Dedicated Support
- Elementor
- Multi-Language support
- Powerful Plugins Compatibility
Expend – Electronics WooCommerce Theme
Great fully responsive eCommerce WordPress template is a perfect tool for making the business memorable and recognizable. The great modern design will create only favorable impressions on web visitors thanks to the fully responsive layout that allows to cloudzoom the required product and quickly view it, not to mention great navigation. Besides, Expend is easily customizable thanks to the WPBakery Page Builder and the HTML5, CSS3, and Bootstrap 3.
Features:
- Included mobile layout
- Sample Content
- Blog
- Right to Left Language Support
- Gallery
Cosmeli WooCommerce Theme
Do you want to get a perfect template with various types of header and other premade features? So, this product is for you. Great minimalistic WordPress template that is both attractive and functional. Infographic Elements, awesome font icon packs, more than 100 useful shortcodes, 18+ unique styles of the blog, 30 portfolio styles – all these will help you create a unique website that represents your business perfectly. So, don’t waste time. Check the Demo and buy Conmeli NOW.
Features:
- Performance Optimization
- Build with Visual Composer
- SEO optimized
- Well-supported RTL
- Bootstrap Grid System
Looklike – Cosmetics Store WooCommerce Theme
The cool design of this layout attracts attention from very first sight. It perfectly suits different beauty stores, salons, spas, etc. There is a huge variety of customization options. If dark red is not exactly the color of your brend, don’t worry as there are a lot of color options. Don’t worry about the visitors’ web experience as with such features as product zoom, filtering, comments, quick views, even the pickiest client will be satisfied. A more detailed description of the theme you can find in its details.
Features:
- 24/7 Customer support
- LazyLoad
- Product Zoom
- Quick View
- Ajax Wishlist and Compare
If you have not found the theme you like or just need advice from the expert, check the professional presentation of the best WooCommerce themes for the last year and find your inspiration.
Tutorial on Managing the Menu on the WooCommerce Shop Page
The video presents an easy-to-follow step-by-step tutorial that will help you successfully manage the shop menu. The video is not just descriptive, it is also practical and shows how to More video tutorials on Shop Page customization, please find on our YouTube Channel by clicking the link.
WooCommerce Shop Page FAQ
Just visit this page and choose the topic, tags, WordPress Builder, Features, Color, etc.
As for the features, We recommend choosing a responsive and SEO-optimized design that has performance optimization. As such characteristics will much simplify the future customization.
The best way to edit the shop page is to use a page builder like Elementor, Divi, or Visual Composer. Watch the video to learn more about it.
The best place for getting WordPress templates with a shop page is definitely TemplateMonster. Only on this platform are you sure of the quality of the products as it is regularly manually checked. There is no need to spend long hours servicing. Just use the sorting options and find what you need in just a few clicks. Our friendly customer support is always ready to answer any question about the products and services we sell, so feel free to ask.
TempatMonster’s professional team is always willing to help you with creating the website of your dreams. Our experienced specialists do not just provide installation and customization services but also logo creation, content write site optimization, and many more. Click the link and familiarize yourself with all the services we provide. Stop worrying about site problems, get professional help now.
The post TOP Best WooCommerce Themes with Shop Page appeared first on MonstersPost.