{"id":14877,"date":"2018-06-28T21:42:05","date_gmt":"2018-06-28T21:42:05","guid":{"rendered":"http:\/\/quadmenu.com\/?p=14877"},"modified":"2019-09-22T11:56:45","modified_gmt":"2019-09-22T14:56:45","slug":"creating-a-shop-with-woocommerce-and-divi","status":"publish","type":"post","link":"https:\/\/quadmenu.com\/creating-a-shop-with-woocommerce-and-divi\/","title":{"rendered":"Creating a Shop with Woocommerce and Divi"},"content":{"rendered":"<p>The shops are no longer &#8220;the future&#8221;, they are the present. Today we will show you how to install and configure your online store with WooCommerce and Divi, on the <a href=\"http:\/\/quadlayers.com\/best-wordpress-themes-for-woocommerce\/\">best themes for WooCommerce<\/a>.<\/p>\n<h1>What is WooCommerce?<\/h1>\n<p>This plugin is a free and open-source tool that merges e-commerce with your blog, and you can continue creating entries while you sell products from the same page. It has many advantages such as:<\/p>\n<ul>\n<li>Reports and complete statistics of the behavior of users in the store.<\/li>\n<li>It is free, has a professional design and highly customizable.<\/li>\n<li>It is integrated with different payment gateways.<\/li>\n<li>You can become a reservation manager (for hotels or restaurants, for example)<\/li>\n<li>Fully compatible with Divi.<\/li>\n<\/ul>\n<p>To install this plugin, go to WordPress plugins, click Add new and look for &#8220;WooCommerce&#8221;. There, click on Install and wait for the process to finish.<\/p>\n<h2>Meet WooCommerce<\/h2>\n<p>First let&#8217;s know the plugin in detail so that your store has all the data that the client (and you) need.<\/p>\n<h3>1.- Orders<\/h3>\n<p><a href=\"http:\/\/quadmenu.com\/creating-a-shop-with-woocommerce-and-divi\/woocommerce-orders\/\" rel=\"attachment wp-att-14880\"><img decoding=\"async\" class=\"alignnone size-full wp-image-14880\" src=\"http:\/\/quadmenu.com\/wp-content\/uploads\/2018\/06\/woocommerce-orders.png\" alt=\"\" width=\"1655\" height=\"769\" srcset=\"https:\/\/quadmenu.com\/wp-content\/uploads\/2018\/06\/woocommerce-orders.png 1655w, https:\/\/quadmenu.com\/wp-content\/uploads\/2018\/06\/woocommerce-orders-300x139.png 300w, https:\/\/quadmenu.com\/wp-content\/uploads\/2018\/06\/woocommerce-orders-768x357.png 768w, https:\/\/quadmenu.com\/wp-content\/uploads\/2018\/06\/woocommerce-orders-1024x476.png 1024w, https:\/\/quadmenu.com\/wp-content\/uploads\/2018\/06\/woocommerce-orders-500x232.png 500w, https:\/\/quadmenu.com\/wp-content\/uploads\/2018\/06\/woocommerce-orders-700x325.png 700w\" sizes=\"(max-width: 1655px) 100vw, 1655px\" \/><\/a><\/p>\n<p>Here you will keep track of the orders placed. You can create them and add new orders by filling in the following fields:<\/p>\n<p><b>-General data: <\/b>date of order, status of the same (pending payment, waiting, completed, processing &#8230;), customer search by name.<\/p>\n<p><b>-Billing data:<\/b> you can edit the personal data of the client, as well as the payment method and the identification of the transaction.<\/p>\n<p><b>-Details of delivery: <\/b>here you can fill in the details of the client where your order will arrive. You can also include notes about it.<\/p>\n<p><b>-Actions of the order: <\/b>you can create new actions in this section: send the invoice by email, resend the new order notice, regenerate the download permissions.<\/p>\n<p>Then, just below the options that we have described, the data of the articles that are included in the customer&#8217;s order will appear. You can also include new products and even apply coupons that you have previously created.<\/p>\n<p>Finally, you can add &#8220;Custom Fields&#8221; and &#8220;Downloadable Product Permissions&#8221; in the order.<\/p>\n<h3>2.- Coupons<\/h3>\n<p><a href=\"http:\/\/quadmenu.com\/creating-a-shop-with-woocommerce-and-divi\/woocommerce-coupons\/\" rel=\"attachment wp-att-14881\"><img decoding=\"async\" class=\"alignnone size-full wp-image-14881\" src=\"http:\/\/quadmenu.com\/wp-content\/uploads\/2018\/06\/woocommerce-coupons.png\" alt=\"\" width=\"1654\" height=\"401\" srcset=\"https:\/\/quadmenu.com\/wp-content\/uploads\/2018\/06\/woocommerce-coupons.png 1654w, https:\/\/quadmenu.com\/wp-content\/uploads\/2018\/06\/woocommerce-coupons-300x73.png 300w, https:\/\/quadmenu.com\/wp-content\/uploads\/2018\/06\/woocommerce-coupons-768x186.png 768w, https:\/\/quadmenu.com\/wp-content\/uploads\/2018\/06\/woocommerce-coupons-1024x248.png 1024w, https:\/\/quadmenu.com\/wp-content\/uploads\/2018\/06\/woocommerce-coupons-500x121.png 500w, https:\/\/quadmenu.com\/wp-content\/uploads\/2018\/06\/woocommerce-coupons-700x170.png 700w\" sizes=\"(max-width: 1654px) 100vw, 1654px\" \/><\/a><\/p>\n<p>You have seen on the web that they give away coupons for free items or discounts, especially in promotions such as Black Friday, Cyber Monday, etc. Adding the coupon is super easy by completing the following information:<\/p>\n<ul>\n<li><b>General: <\/b>type of discount to choose (percentage, fixed amount in cart or product), amount of the coupon (depending on what you have chosen in discount type), option to allow free shipping and possibility to indicate an expiration date of the coupon we are offering.<\/li>\n<li><b>Restriction of use: <\/b>in this second section, you can restrict the use of coupons. You can establish a minimum and maximum expense to apply, put that coupon cannot be used with others that you have previously created, exclude the use of it in articles that have already had discounts, restrict the use in certain products and categories. You can also restrict the use of certain emails.<\/li>\n<li><b>Limits of use: <\/b>You can set limits on the use of coupons for customers. For example, you can put the coupon to be used a maximum of 10 times, it is limited to 1 item and only 1 coupon per user can be used.<\/li>\n<\/ul>\n<h3>3.- Reports<\/h3>\n<p><a href=\"http:\/\/quadmenu.com\/creating-a-shop-with-woocommerce-and-divi\/woocommerce-reports\/\" rel=\"attachment wp-att-14884\"><img decoding=\"async\" class=\"alignnone size-full wp-image-14884\" src=\"http:\/\/quadmenu.com\/wp-content\/uploads\/2018\/06\/woocommerce-reports.jpg\" alt=\"\" width=\"1685\" height=\"853\" srcset=\"https:\/\/quadmenu.com\/wp-content\/uploads\/2018\/06\/woocommerce-reports.jpg 1685w, https:\/\/quadmenu.com\/wp-content\/uploads\/2018\/06\/woocommerce-reports-300x152.jpg 300w, https:\/\/quadmenu.com\/wp-content\/uploads\/2018\/06\/woocommerce-reports-768x389.jpg 768w, https:\/\/quadmenu.com\/wp-content\/uploads\/2018\/06\/woocommerce-reports-1024x518.jpg 1024w, https:\/\/quadmenu.com\/wp-content\/uploads\/2018\/06\/woocommerce-reports-500x253.jpg 500w, https:\/\/quadmenu.com\/wp-content\/uploads\/2018\/06\/woocommerce-reports-700x354.jpg 700w\" sizes=\"(max-width: 1685px) 100vw, 1685px\" \/><\/a>This part will be very useful for your marketing strategy. Here you can view the statistics of the sales that you make with your online store and generate reports of them.<\/p>\n<p>You have 3 categories to study: Orders, Clients and Inventory.<\/p>\n<p>Each of these tabs, in turn, gives you more accurate data.<\/p>\n<p>You can extract data from the last 7 days, from the last and current month, and even set custom date ranges.<\/p>\n<p>You also have the option of studying the graph that will provide us with the data of the &#8220;Customers&#8221; section. Right there, you can see the list of &#8220;List of customers&#8221; that they have bought in your online store.<\/p>\n<p>Finally, in the &#8220;Inventory&#8221; section, you can keep track of your products in stock.<\/p>\n<h3>4.- Settings<\/h3>\n<p>In this section, you can modify the data you placed when you installed the plugin and initially configured it.<\/p>\n<p>You have the following tabs:<\/p>\n<p><b>General: <\/b>In this first section you can modify the address data of the store, general sales options, activate taxes and their calculations and modify the currency you are going to use. Once you modify the data you need, just click on the &#8220;Save changes&#8221; button.<\/p>\n<p><b>Products: <\/b>This tab has different categories that you can fill in.<\/p>\n<p><b>General: <\/b>you can modify the units of weight and dimensions, activate customer ratings and activate the possibility of including product reviews with stars to your customers.<\/p>\n<p><b>Show: <\/b>you can set the store page that you want, although I recommend that you leave the one created by the default plugin: &#8220;Store&#8221;.<\/p>\n<p>Later you can have certain products displayed on that page, as well as the categories you create as you add products to your online store.<\/p>\n<p><b>Images of the product: <\/b>you can establish the dimensions that are going to have the images of your catalog, products and miniatures of products.<\/p>\n<p><strong>Inventory:<\/strong> you can activate the inventory management and keep it in a specific amount (60 by default). You can also set an email for warnings and even set thresholds when your stock of products is coming to an end.<\/p>\n<p>Another interesting option is to hide items that are running out.<\/p>\n<p><b>Downloadable products: <\/b>the last sub-section of the products tab, you can adjust the download method of the digital files you have for sale. If you are going to sell infoproducts, it is recommended that you leave it as it is by default: allow access to downloadable products after payment.<\/p>\n<p><b>Shipping: <\/b>This tab has in turn 3 other sub-sections that we will see below:<\/p>\n<ul>\n<li><b>Shipping areas: <\/b>here you can add different shipping areas for orders ordered by your customers. Right now we have by default the country that we put at the beginning in the assistant (Spain).<\/li>\n<li><b>Shipping options: <\/b>here you can show or hide the shipping costs on the purchase page in &#8220;Calculations&#8221;. You can adjust that the destination of the shipment is by default in the customer&#8217;s shipping address, to the billing address of the customer or force the shipment to the billing address. I recommend you leave it as it comes by default, to the established billing address.<\/li>\n<li><b>Shipping classes: <\/b>allows you to create specific shipping classes with a specific slug and description. For example, if you had to differentiate different parts of the peninsula.<\/li>\n<li><b>End purchase: <\/b>In this section, you can set the options to activate the use of the coupons created, and allow the purchase process to customers who do not have a user account (important to have this option active). You can also force the secure payment, although nowadays it is mandatory to have an SSL certificate on the web to encrypt the data<\/li>\n<li><b>End purchase: <\/b>In this section, you can set the options to activate the use of the coupons created, and allow the purchase process to customers who do not have a user account (important to have this option active). You can also force the secure payment, although nowadays it is mandatory to have an SSL certificate on the web to encrypt the customer&#8217;s data if you do not want Google to penalize you.<\/li>\n<\/ul>\n<p>Finally, the pages corresponding to the purchase completion that was created upon completion of the WooCommerce installation process will be established, so we also advise you to leave them by default. If you want to use a blank page, we&#8217;ll show you later how to create a striking and effective sales page.<\/p>\n<p>Below the tab that we are adjusting &#8220;Finish purchase&#8221;, all the payment modalities that the platform supports appear, so you only have to fill in the data of the ones you are going to use.<\/p>\n<p>In the Stripe tab you will have to establish the secret keys that will provide you once you create your user account. It is important that you do tests before going on air, so you can enable it in the &#8220;Activate test mode&#8221; box.<\/p>\n<p><b>Accounts: <\/b>This section I advise you to leave by default, as it will allow your user, once the process of finalization of purchase in the store, to register as a customer with your account and their corresponding data.<\/p>\n<p><b>Emails: <\/b>to finalize, this last section is very important, since the messages that are created here, have the function of sending the clients to their email according to the result obtained in the process of finalization of purchase on the web. For example, there are messages of the new order, canceled, failed, waiting, etc. You can set the name and email of the sender (in this case you), and even customize the base template of the emails that will be used in each corresponding case.<\/p>\n<h3>5.-State and Extensions<\/h3>\n<p>In the &#8220;Status&#8221; section you will be able to see the data and the characteristics of the system where your WooCommerce store is installed.<\/p>\n<p>In &#8220;Extensions&#8221; you can access at any time the premium plugins offered in Woo.<\/p>\n<h3>6.- API<\/h3>\n<p>This option allows WooCommerce to integrate with external applications.<\/p>\n<h2>Create WooCommerce Products<\/h2>\n<p>We complete the basic settings, it&#8217;s time to upload the products!<\/p>\n<p>Click on Products and then on Add new, as we said a few lines back. You will realize that creating products is very similar to creating blog entries, so it should be easy for you. In any case, a virtual assistant will show you the process.<\/p>\n<p><b>&#8211; Title: <\/b>Name of the product.<\/p>\n<p><b>&#8211; Product description: <\/b>Make a striking and sincere description of the article. Advise yourself a bit with a copywriting specialist if you feel that you are not given.<\/p>\n<p><b>&#8211; Product categories: <\/b>Sort the products of your store.<\/p>\n<p>After the above data, you have to fill in a few more details.<\/p>\n<p><b>&#8211; Product data: <\/b>indicates if it is a:<\/p>\n<ul>\n<li>Simple product, for the most part.<\/li>\n<li>Variable product, in case of products with several sizes or sizes, for example T-shirts.<\/li>\n<li>Grouped products, to group simple products into one.<\/li>\n<li>External products\/affiliates, to create affiliate links for referral products with links outside your website.<\/li>\n<\/ul>\n<p>Afterward, you can indicate if it is a virtual or downloadable product.<\/p>\n<p>Then add a normal and discounted price in your local currency or the one you choose.<\/p>\n<p><b>&#8211; Short description of the product: <\/b>here you can add a brief description of your product that will appear under the title.<\/p>\n<p><b>&#8211; Product image: <\/b>includes a prominent image of the item for sale.<\/p>\n<p><b>&#8211; Product Gallery: <\/b>you can add several images to show the qualities of the article in question.<\/p>\n<p>Finally, before publishing the product in the store, you can make several previous adjustments in the following tabs to finish editing your article:<\/p>\n<ul>\n<li><b>Inventory: <\/b>to establish available stocks.<\/li>\n<li><b>Shipping: <\/b>to adjust the dimensions of the order in case of a physical product.<\/li>\n<li><b>Linked products: <\/b>to add products for directed or crossed sales.<\/li>\n<li><b>Attributes: <\/b>to establish specific attributes of a product in question.<\/li>\n<li><b>Advanced:<\/b> to add purchase notes or activate customer ratings.<\/li>\n<\/ul>\n<p>You already have all the active tools, the basic adjustments made and your products created, but your store is still not displayed when you go to your web page. Very simple, your products will be shown on the page created by Woo, which is called &#8220;Store&#8221;.<\/p>\n<h2>Creating Woocommerce Sales page in Divi<\/h2>\n<p><a href=\"http:\/\/quadmenu.com\/creating-a-shop-with-woocommerce-and-divi\/woocommerce-divi-shop\/\" rel=\"attachment wp-att-14887\"><img decoding=\"async\" class=\"alignnone size-full wp-image-14887\" src=\"http:\/\/quadmenu.com\/wp-content\/uploads\/2018\/06\/woocommerce-divi-shop.jpg\" alt=\"\" width=\"1345\" height=\"823\" srcset=\"https:\/\/quadmenu.com\/wp-content\/uploads\/2018\/06\/woocommerce-divi-shop.jpg 1345w, https:\/\/quadmenu.com\/wp-content\/uploads\/2018\/06\/woocommerce-divi-shop-300x184.jpg 300w, https:\/\/quadmenu.com\/wp-content\/uploads\/2018\/06\/woocommerce-divi-shop-768x470.jpg 768w, https:\/\/quadmenu.com\/wp-content\/uploads\/2018\/06\/woocommerce-divi-shop-1024x627.jpg 1024w, https:\/\/quadmenu.com\/wp-content\/uploads\/2018\/06\/woocommerce-divi-shop-500x306.jpg 500w, https:\/\/quadmenu.com\/wp-content\/uploads\/2018\/06\/woocommerce-divi-shop-700x428.jpg 700w\" sizes=\"(max-width: 1345px) 100vw, 1345px\" \/><\/a>Using the Divi Page Builder you have the freedom to create the page as you wish, so you can build it as if you were developing the main page of your website.<\/p>\n<p>Usually, the structure is similar to this:<\/p>\n<ul>\n<li>Name of the product and Owner.<\/li>\n<li>Put yourself in the client&#8217;s place making him identify with some need or problem.<\/li>\n<li>Characteristics and benefits of the product.<\/li>\n<li>Testimonials from clients.<\/li>\n<li>Price and purchase button.<\/li>\n<li>Warranty and extras.<\/li>\n<li>Last call and purchase button.<\/li>\n<\/ul>\n<p>This structure and style are often used for the sale of info products (ebooks, online courses, sale of memberships, etc.) or stores with few products.<\/p>\n<p>To create the sales page in Divi go to the side menu and click on Pages. There, click Add new.<\/p>\n<p>On the edit page, click on &#8220;Use the Divi builder&#8221; to start working on the design of our sales page.<\/p>\n<p>We must create a blank page (&#8220;Blank page&#8221; template). This will be without menus, footers or links or other products. In this way, the user or possible customer can not be distracted by anything else and increases the possibility of completing the purchase.<\/p>\n<p>The operation of the Divi builder is very simple: it offers sections, days, columns and within each section, you can place images, videos, presentations, text, etc.<\/p>\n<p>If you want to guide you through the structure that we just mentioned, it would correspond to create a section for each of those sections. In each section, we can place all the rows and columns that we consider necessary.<\/p>\n<p>Each of the sections can be designed down to the smallest detail with the design configuration panel. The recommendation is that when you add texts use subtitles and then short paragraphs with calls to action that encourage the client to know more about the product and complete the purchase.<\/p>\n<p>After all the configuration, we have to make the purchase buttons (because the recommendation is to add two buttons, one in the middle of the page and one at the end). For this, the purchase buttons must be sufficiently striking. Slowly, we stop using those methods in which we first click on &#8220;Add to cart&#8221; and then we go to the cart to complete the purchase. The idea is to say directly &#8220;Buy&#8221; and take us to make the payment.<\/p>\n<p>To define a personalized text for your purchase button, just use this code:<\/p>\n<pre>\/\/ Customize text of add button to cart\r\n\r\nadd_filter ('woocommerce_product_add_to_cart_text', 'add_to_cart_custom_text');\r\n\r\nfunction add_to_cart_custom_text ($ product) {\r\n\r\nreturn __ ('Buy', 'woocommerce');\r\n\r\n}\r\n<\/pre>\n<p>This code will change the text &#8220;Add to cart&#8221; to &#8220;Buy&#8221;, but if you want to show another, simply replace where it says &#8220;Buy&#8221; for the text you want to show. (Always in quotes).<\/p>\n<p>Here comes the decisive step to trigger our conversion possibilities: instead of directing the cart, our button has to lead directly to the payment process.<\/p>\n<p>To eliminate steps in the purchase process and get the customer to go directly to the payment page you must use the following code:<\/p>\n<pre>\/\/ Redirects to the payment page when you click on add the product\r\n\r\nadd_filter ('woocommerce_add_to_cart_redirect', 'custom_add_to_cart_redirect');\r\n\r\nfunction custom_add_to_cart_redirect () {\r\n\r\nupdate_option ('woocommerce_cart_redirect_after_add', 'yes');\r\n\r\nreturn WC () -&gt; cart-&gt; get_checkout_url ();\r\n\r\n}\r\n<\/pre>\n<p>If, after adding the code, it still doesn\u2019t work, try disabling the WooCommerce option to add to the car with AJAX. To do this, go to WooCommerce, from to Settings, then Products, click on Show and deactivate the option Enable AJAX.<\/p>\n<h2>Woocommerce Mega Menu<\/h2>\n<p><a href=\"http:\/\/quadmenu.com\/creating-a-shop-with-woocommerce-and-divi\/woocommerce-product-mega-menu\/\" rel=\"attachment wp-att-14889\"><img decoding=\"async\" class=\"alignnone size-full wp-image-14889\" src=\"http:\/\/quadmenu.com\/wp-content\/uploads\/2018\/06\/woocommerce-product-mega-menu.jpg\" alt=\"\" width=\"1385\" height=\"531\" srcset=\"https:\/\/quadmenu.com\/wp-content\/uploads\/2018\/06\/woocommerce-product-mega-menu.jpg 1385w, https:\/\/quadmenu.com\/wp-content\/uploads\/2018\/06\/woocommerce-product-mega-menu-300x115.jpg 300w, https:\/\/quadmenu.com\/wp-content\/uploads\/2018\/06\/woocommerce-product-mega-menu-768x294.jpg 768w, https:\/\/quadmenu.com\/wp-content\/uploads\/2018\/06\/woocommerce-product-mega-menu-1024x393.jpg 1024w, https:\/\/quadmenu.com\/wp-content\/uploads\/2018\/06\/woocommerce-product-mega-menu-500x192.jpg 500w, https:\/\/quadmenu.com\/wp-content\/uploads\/2018\/06\/woocommerce-product-mega-menu-700x268.jpg 700w\" sizes=\"(max-width: 1385px) 100vw, 1385px\" \/><\/a><\/p>\n<p>Another thing you may consider to include to speed up and reduce the number of steps in\u00a0the checkout process, is the inclusion of the product items of QuadMenu in your main menu.<\/p>\n<p>The product items allow you to include the cart, price, rating, and experts of the WooCommerce products directly in your mega menu, avoiding the need to open the products page to include them\u00a0in the cart.<\/p>\n<p>We strongly recommend you to install the QuadMenu plugin that will help you to save a lot of time and you can\u00a0<a href=\"https:\/\/wordpress.org\/plugins\/quadmenu-divi\/\">download for free from the WordPress Repository<\/a>.<\/p>\n<h3>We are ready! Tell us how you went with WooCommerce and what recommendations you would make.<\/h3>\n","protected":false},"excerpt":{"rendered":"<p>The shops are no longer &#8220;the future&#8221;, they are the present. Today we will show you how to install and [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":14878,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"yst_prominent_words":[1253,1231,1254,1232,1255,1238,1256,1239,1243,586,1248,1222,1249,1224,1250,1227,1251,1228,1252,1230],"_links":{"self":[{"href":"https:\/\/quadmenu.com\/wp-json\/wp\/v2\/posts\/14877"}],"collection":[{"href":"https:\/\/quadmenu.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/quadmenu.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/quadmenu.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/quadmenu.com\/wp-json\/wp\/v2\/comments?post=14877"}],"version-history":[{"count":0,"href":"https:\/\/quadmenu.com\/wp-json\/wp\/v2\/posts\/14877\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/quadmenu.com\/wp-json\/wp\/v2\/media\/14878"}],"wp:attachment":[{"href":"https:\/\/quadmenu.com\/wp-json\/wp\/v2\/media?parent=14877"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/quadmenu.com\/wp-json\/wp\/v2\/categories?post=14877"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/quadmenu.com\/wp-json\/wp\/v2\/tags?post=14877"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/quadmenu.com\/wp-json\/wp\/v2\/yst_prominent_words?post=14877"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}