{"id":837,"date":"2021-03-14T09:22:25","date_gmt":"2021-03-14T09:22:25","guid":{"rendered":"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/?p=837"},"modified":"2023-01-03T08:17:28","modified_gmt":"2023-01-03T08:17:28","slug":"design-mobile-store-by-woocommerce-product-table-plugin","status":"publish","type":"post","link":"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/design-mobile-store-by-woocommerce-product-table-plugin\/","title":{"rendered":"How to design a mobile store by WooCommerce product table plugin?"},"content":{"rendered":"\n<p>Design a mobile store is not a complicated task when you are using a professional plugin like <a href=\"http:\/\/ithemelandco.com\/plugins\/woocommerce-product-table\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"text-decoration: underline;\">WooCommerce product table<\/span><\/a>.<\/p>\n\n\n\n<p>In this tutorial, we are going to help you create an impressive and customer-friendly mobile store by product table in three simple steps.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-step-1-import-your-products-to-the-woocommerce\"><strong>Step 1: Import your products to the WooCommerce<\/strong><\/h2>\n\n\n\n<p>To start designing an online mobile store, at first, you need to import some essential information about your products into the WooCommerce:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/wp-content\/uploads\/sites\/3\/2021\/03\/18-import-custom-product.jpg\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/wp-content\/uploads\/sites\/3\/2021\/03\/18-import-custom-product.jpg\" alt=\"Import custom products to woocommerce to design a mobile store\" class=\"wp-image-839\" width=\"1414\" height=\"645\"\/><\/a><\/figure>\n\n\n\n<p>To turn the potential customers visiting your website into the real customers who decide to buy products from your online store, you have to pay attention to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>What information you are providing for the customer?<\/li>\n\n\n\n<li>How do you display the information to the customer?&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>About the first concern, you have to add as many details as you can to your product page. It help to customers to find their requirements easier.<\/p>\n\n\n\n<p>There are a lot of essential and important information related to the mobile phone such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Brand<\/li>\n\n\n\n<li>Model<\/li>\n\n\n\n<li>Price<\/li>\n\n\n\n<li>SIM<\/li>\n\n\n\n<li>CPU<\/li>\n\n\n\n<li>GPU<\/li>\n\n\n\n<li>Body<\/li>\n<\/ul>\n\n\n\n<p>As you can see in the below picture, there are some limited default field in the WooCommerce product page:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/wp-content\/uploads\/sites\/3\/2021\/03\/18-woocommerce-product-page.jpg\"><img decoding=\"async\" src=\"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/wp-content\/uploads\/sites\/3\/2021\/03\/18-woocommerce-product-page.jpg\" alt=\" Woocommerce product quick edit\" class=\"wp-image-840\" width=\"1414\" height=\"756\"\/><\/a><\/figure>\n\n\n\n<p>So, to complete the information of each product, you have to add some custom fields to show the characteristics of each mobile phone in the product page of WooCommerce as below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/wp-content\/uploads\/sites\/3\/2021\/03\/18-add-custom-fields.jpg\"><img decoding=\"async\" src=\"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/wp-content\/uploads\/sites\/3\/2021\/03\/18-add-custom-fields.jpg\" alt=\"Add custom fields to product in woocommerce to design a mobile store\" class=\"wp-image-841\" width=\"1408\" height=\"606\"\/><\/a><\/figure>\n\n\n\n<p><strong>Note 1: <\/strong>You can use the name that assign to each field in the WooCommerce product table plugin as the extra columns.&nbsp;<\/p>\n\n\n\n<p><strong>Note2: <\/strong>You have access to as many fields as you add to this section of WooCommerce later in the Woo Product table plugin. So, don\u2019t hesitate to create more fields, If you have more information about your products.<\/p>\n\n\n\n<p>It seems that we solve the first problem and provide the most important information related to each product. So, it\u2019s the time to pay attention to the second concern.<\/p>\n\n\n\n<p>Follow the next steps to discover how to display this information to your customers in such a way that encourages them shopping from your online mobile store.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-step-2-design-a-mobile-store-using-product-table\"><strong>Step 2: Design a mobile store&nbsp;<\/strong>using product table<\/h2>\n\n\n\n<p>As you already knew, installing the WooCommerce product table plugin is the best way to design a product table for a mobile store.<\/p>\n\n\n\n<p>After installing this plugin, you are completely free to design a mobile store exactly according to your requirements.<\/p>\n\n\n\n<p>Let\u2019s see what we are offering for improving the performance of your online store and transforming the appearance of it.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-create-a-new-table\"><strong>Create a new table<\/strong><\/h3>\n\n\n\n<p>To start designing a mobile store with this plugin, you have to create a new table by going to:<\/p>\n\n\n\n<p><strong>Wordpress Dashboard<\/strong> &gt; <strong>Woo Product Table<\/strong> &gt; <strong>Add New<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/wp-content\/uploads\/sites\/3\/2021\/03\/18-create-new-table.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/wp-content\/uploads\/sites\/3\/2021\/03\/18-create-new-table.jpg\" alt=\"Create a new table to design a mobile store\" class=\"wp-image-842\" width=\"1408\" height=\"723\"\/><\/a><\/figure>\n\n\n\n<p>after creating a new table, you can see the \u201c<strong>Columns<\/strong>\u201d tab of our plugin.<\/p>\n\n\n\n<p>In this page, we provided some default options to help you make your product table. However, as we mentioned before, you can add extra columns according to the custom fields you added before to your WooCommerce product page by using the form we have designed next to the columns list.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-table-column-settings\">Table column settings<\/h4>\n\n\n\n<p>For example, we are going to add \u201cCPU\u201d column to our product table by following below steps:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Choose \u201c<strong>custom field<\/strong>\u201d under the \u201c<strong>Choose Type<\/strong>\u201d&nbsp;<\/li>\n\n\n\n<li>Type the name of our preferred custom field which is \u201c<strong>CPU<\/strong>\u201d as we assigned it before in the WooCommerce product custom fields section.<\/li>\n\n\n\n<li>Type a name for this column that you want to show in the final product table on the \u201c<strong>Table Columns Title\/Name<\/strong>\u201d field.<\/li>\n\n\n\n<li>Click on \u201c<strong>Add Column<\/strong>\u201d button<\/li>\n<\/ul>\n\n\n\n<p>if you click on &#8220;<strong>Add Column<\/strong>&#8220;,  a new column will be added to the list that you can change its name by typing in the text box, as below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/wp-content\/uploads\/sites\/3\/2021\/03\/18-create-a-new-column.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/wp-content\/uploads\/sites\/3\/2021\/03\/18-create-a-new-column.jpg\" alt=\"create new columns from product custom field in woocommerce product table plugin\" class=\"wp-image-843\" width=\"1402\" height=\"660\"\/><\/a><\/figure>\n\n\n\n<p>After adding all of the custom fields to our product table, you can also choose the other essential columns among the default fields.<\/p>\n\n\n\n<p>As you can see in the below picture, we selected below columns from the default list:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Check:<\/strong> A checkbox will be displayed next to each product to enable customers to select \/unselect it.<\/li>\n\n\n\n<li><strong>Thumbnail:<\/strong> You can seee the feature image(s) of products in the table.<\/li>\n\n\n\n<li><strong>Product Title:<\/strong> You can see the name of products \u2013 Model in this example- in the product table.<\/li>\n\n\n\n<li><strong>Quantity:<\/strong> This field enables customers to specify the number of products they want to purchase.<\/li>\n\n\n\n<li><strong>Price:<\/strong> You can see the price of products in this column.<\/li>\n\n\n\n<li><strong>Action:<\/strong> \u201cAdd to cart\u201d options are available in this column.<\/li>\n<\/ul>\n\n\n\n<p>and added the new columns including:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>GPU<\/li>\n\n\n\n<li>CPU<\/li>\n\n\n\n<li>SIM<\/li>\n\n\n\n<li>Body<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/wp-content\/uploads\/sites\/3\/2021\/03\/18-result-of-adding-columns.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/wp-content\/uploads\/sites\/3\/2021\/03\/18-result-of-adding-columns.jpg\" alt=\"Added custom fields as column in woocommerce product table plugin\" class=\"wp-image-844\" width=\"1402\" height=\"756\"\/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-create-custom-query-to-design-a-mobile-store\"><strong>Create custom query<\/strong> to design a mobile store<\/h3>\n\n\n\n<p>To complete the design of a mobile store, you have to choose the right products to be shown in website.<\/p>\n\n\n\n<p>It is easily available in the \u201c<strong>Query<\/strong>\u201d tab of the WooCommerce product table plugin.<\/p>\n\n\n\n<p>In this tab, you can filter the products to be displayed in the product table.<\/p>\n\n\n\n<p>As we are going to design a mobile store, we filtered product in the Mobile category, as below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/wp-content\/uploads\/sites\/3\/2021\/03\/18-create-custom-query.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/wp-content\/uploads\/sites\/3\/2021\/03\/18-create-custom-query.jpg\" alt=\"Create custom query in woocommerce product table plugin\" class=\"wp-image-845\" width=\"1411\" height=\"750\"\/><\/a><\/figure>\n\n\n\n<p>More information is available on \u201c<span style=\"text-decoration: underline;\"><a href=\"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/how-to-create-a-product-table-with-custom-query\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to create a product table with custom query?<\/a><\/span>\u201d about filtering the products in the &#8220;<strong>Query<\/strong>&#8221; tab.<\/p>\n\n\n\n<p>We also set some conditions for our product table in the \u201c<strong>Query<\/strong>\u201d tab such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Product Status:<\/strong> All products including \u201c<strong>In stock<\/strong>\u201d, \u201c<strong>Featured<\/strong>\u201d or \u201c<strong>On Sale<\/strong>\u201d to be shown in the table<\/li>\n\n\n\n<li><strong>Post Limit Number:<\/strong> Number of products to be displayed in each page.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/wp-content\/uploads\/sites\/3\/2021\/03\/18-set-conditions.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/wp-content\/uploads\/sites\/3\/2021\/03\/18-set-conditions.jpg\" alt=\"Set conditions of displaying product in product table\" class=\"wp-image-846\" width=\"1405\" height=\"753\"\/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-add-search-box-to-mobile-box-for-our-mobile-store\"><strong>Add search box<\/strong> to mobile box for our mobile store<\/h3>\n\n\n\n<p>Search box is another essential part for designing a mobile store, as it can help your customers to find their suitable products, easily and quickly.<\/p>\n\n\n\n<p>To add search box to your product table, you can simply go to the \u201c<strong>Search Box and Pagination<\/strong>\u201d tab in the plugin and mark the enable under \u201c<strong>Search Enable\/Disable\u201d<\/strong> field, as below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/wp-content\/uploads\/sites\/3\/2021\/03\/18-add-search-box-1.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/wp-content\/uploads\/sites\/3\/2021\/03\/18-add-search-box-1.jpg\" alt=\"Add search box to mobile product table\" class=\"wp-image-848\" width=\"1405\" height=\"756\"\/><\/a><\/figure>\n\n\n\n<p>By enabling the search box, you have access to so many other options which help you to improve customer experience when shopping from your online store.<\/p>\n\n\n\n<p>As we described all items of this field in \u201c<span style=\"text-decoration: underline;\"><a href=\"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/create-search-form-in-woocommerce-products-table\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to create a search form for the products in WooCommerce product table Plugin<\/a><\/span>\u201d, we just skip this step and jump to the next step.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-choose-a-template-for-mobile-store\"><strong>Choose a template<\/strong> for mobile store<\/h3>\n\n\n\n<p>Appearance of a product table plays an important role in attracting customers, so you have to pay attention to choosing a suitable template when designing a mobile store.<\/p>\n\n\n\n<p>To make it easy for you, we have added some templates as default in our plugin; however, you can create a new template according to your taste by clicking on \u201c<strong>Add New Template<\/strong>\u201d.<\/p>\n\n\n\n<p>If you need more help, please refer to \u201c<a href=\"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/create-custom-template-for-woocommerce-product-table\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"text-decoration: underline;\">How to create a product table with a custom template?<\/span><\/a>\u201d.<\/p>\n\n\n\n<p>In this tutorial, we selected \u201c<strong>IThemelandco<\/strong>\u201d template for our product table:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/wp-content\/uploads\/sites\/3\/2021\/03\/18-change-template.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/wp-content\/uploads\/sites\/3\/2021\/03\/18-change-template.jpg\" alt=\"Change design of product table by template section in woocommerce product table plugin\" class=\"wp-image-849\" width=\"1429\" height=\"669\"\/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-change-settings\"><strong>Change settings<\/strong><\/h3>\n\n\n\n<p>This is the final step in designing a mobile store by WooCommerce product table plugin.<\/p>\n\n\n\n<p>By going to &#8220;<strong>Settings<\/strong>&#8221; tab, you have full access to product options, &#8220;<strong>Mini Cart<\/strong>&#8221; options and other options to edit your product table.<\/p>\n\n\n\n<p>Let\u2019s try some of them.<\/p>\n\n\n\n<p>Under &#8220;<strong>Mini Cart<\/strong>&#8221; options, we enabled:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-table-header\"><strong>Table Header<\/strong><\/h4>\n\n\n\n<p>A box will be appeared above the table to enable customers to see the products added to the cart with their price. This box includes some other options including:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Cart Clear button.<\/li>\n\n\n\n<li>Check out button.<\/li>\n\n\n\n<li>View Cart button.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-side-mode\"><strong>&nbsp;Side mode<\/strong><\/h4>\n\n\n\n<p>A column will be added to the table displaying the total price and customers can directly access their cart by clicking on this box.<\/p>\n\n\n\n<p><strong>Note:<\/strong> You can also change the floating mode options such as size or position, if you have already enabled this option.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/wp-content\/uploads\/sites\/3\/2021\/03\/18-options-for-displaying-cart.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/wp-content\/uploads\/sites\/3\/2021\/03\/18-options-for-displaying-cart.jpg\" alt=\"options for displaying cart\" class=\"wp-image-850\" width=\"1024\" height=\"753\"\/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-step-3-publishing-the-product-table\"><strong>Step 3: Publishing the product table<\/strong><\/h2>\n\n\n\n<p>As we designed our mobile store perfectly, now it\u2019s the time to impress our customers by publishing it.<\/p>\n\n\n\n<p>As we described in \u201c<span style=\"text-decoration: underline;\"><a href=\"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/insert-product-table-shortcode-in-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to insert product table shortcode in wordpress?<\/a><\/span>\u201d, you have to use shortcode to publish the product table as one of the pages in WordPress:<\/p>\n\n\n\n<p>By adding shortcode and publishing the product table page, our product table was displayed as below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/wp-content\/uploads\/sites\/3\/2021\/03\/18-publish-product-table.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/wp-content\/uploads\/sites\/3\/2021\/03\/18-publish-product-table.jpg\" alt=\"publish product table\" class=\"wp-image-851\" width=\"1495\" height=\"624\"\/><\/a><\/figure>\n\n\n\n<p>As you can see, all of the information we added to the custom fields of our product page&nbsp; such as CPU or SIM, are displayed in the related columns.<\/p>\n\n\n\n<p>There is also a search box as we have chosen. And the Mini cart is displayed as a header and a sidebar.<\/p>\n\n\n\n<p>As we described in another tutorial, you can also <span style=\"text-decoration: underline;\"><a href=\"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/replace-default-shop-page-and-archive-pages-woocommerce-with-product-table-plugin\/\" target=\"_blank\" rel=\"noreferrer noopener\">replace the Shop Page and Archive Page of WooCommerce by your product table page<\/a><\/span> to be displayed for your customers in the online mobile store.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Design a mobile store is not a complicated task when you are using a professional plugin like WooCommerce product table. In this tutorial, we are going to help you create an impressive and customer-friendly mobile store by product table in three simple steps. Step 1: Import your products to the WooCommerce To start designing an [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-837","post","type-post","status-publish","format-standard","hentry","category-plugin-usage"],"_links":{"self":[{"href":"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/wp-json\/wp\/v2\/posts\/837","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/wp-json\/wp\/v2\/comments?post=837"}],"version-history":[{"count":0,"href":"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/wp-json\/wp\/v2\/posts\/837\/revisions"}],"wp:attachment":[{"href":"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/wp-json\/wp\/v2\/media?parent=837"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/wp-json\/wp\/v2\/categories?post=837"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ithemelandco.com\/docs\/woocommerce-product-table\/wp-json\/wp\/v2\/tags?post=837"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}