How to use WooCommerce with Betheme
The WooCommerce plugin provides a great e-commerce experience and is fully compatible with BeTheme. Let’s start by installing the plugin. Go to your WordPress dashboard and click on plugins. Now click on, add new. Search for WooCommerce by Automattic. Install it and activate the plugin. Now you could get redirected to a shop set up wizard after activating the plugin.
Please go through all the steps if you are setting up a real shop page. Don’t worry if you can not fill everything in now. You can edit those options anytime you want. To best show you how the plugin works with BeTheme, we’ve installed a pre-built website called Be Car Parts with some already filled-in products and a shop page.
If you do not know how to install a prebuilt website, please watch our other video tutorial about that. The main shop page includes a list of all products with sorting options. You can change the style of this page using the theme options. We’ll show you how to do that. But first, you need to know how to choose a page to be the main shop page.
This is very important because there always must be the main shop page set up, go to your WordPress dashboard and find WooCommerce from the sidebar menu. Now click on settings. This plugin offers a lot of options and possibilities. We strongly recommend you go through all of the tabs and visit the plugin author documentation website for in-depth information. To set up the products page, we’ll go to the products tab. Here you can select which of your already created pages will be the main shop page.
Please know that the page you choose it should not be filled with any content. WooCommerce will display all of your products on that page automatically. We’ve already selected the, our products page to be the main shop page. After you choose yours, remember to save changes. Now, after this is done, let’s see how we can alter the style of the shop page and all products. Navigate to your theme options by clicking on the BeTheme menu item from your WordPress admin menu sidebar.
Now go to Blog > Portfolio > Shop tab, click on Shop. Now the first option is the products per page number. If the number of your products is bigger than the set number, the shop page will enable pagination. If you want to show all products on a single page, enter a high value. Layout options let you choose how your main shop page will display products.
The next option is the catalog mode. If enabled, this setting will remove all of the prices and add to cart buttons from the entire website. The user will only be able to browse through without any option to buy. Below that you can set up the hover image effect for the product descriptions, sidebar placement options, and an option to change the sold-out labeled text.
There are also single product options. Here you can set how the single product page layout will look like where the product title will appear or how many related products should display. We’ve also added an option to disable the WooCommerce product zoom effect. The last option on this page is the cart icon.
With this option, you can set other icons to display instead of the default one. To be a hundred percent sure that your card icon will display in the header, you need to check if the top bar right, is not hidden. To do that, navigate to the header and subheader tab in the theme options menu, and click on extras.
Now make sure that this setting is turned off. This will display the top right bar and show the cart icon. The last thing we need to cover is products. In your WordPress dashboard, find and click on products from the left side menu. Here, you can find all of the products. Our example products were imported with the installation of the Be Car Parts pre-built website.
You can also add categories and tags to your items. Let’s add a new product to the list to show you how easy this is. To do that, click on the add new button at the top. Now the first thing you will enter is the product name. Then we can see the big visual editor window. Where we can insert information about the product.
We’ll just insert some texts for this video tutorial, scroll below the editor to see more options. Set the price of your product, or even a sale price. You can choose other options related to this product, like the inventory, shipping options, attributes, and more from the left menu. The last option would be the product short description.
We’ll just type in, “this is my product description” to best show you where it is displayed. Moving to the right-sidebar, we can see the product categories to choose from. Those were added before, but you can add your own. You can also add tags. Okay. We’re almost done. The last thing left to do is to set the main product image and a gallery.
Click on set product image and choose an image. You like do the same with the gallery below. Once you’re done click on update to save changes. Let’s see if our product is displaying on the main shop page. And here it is. You can also see the “this is my short description” text that we inserted in the short description field.
This is great when you want to show critical information upfront. Let’s see how the product page looks like. Great! We can see the product name, price, and the short description, followed by an add-to-cart button, a list of categories, and a share box for social media. The gallery is shown under the main product image. At the bottom, there is a description field for the product information and a related products section. We hope this video will help you to set up your own shop using BeTheme and WooCommerce.
Thanks for watching this video and remember that if you have any questions, please visit our support center at support.muffingroup.com