In this text, you will learn how to create your online store using the Elementor Pro plugin and the Ocean WP theme. The first thing you need is to upgrade Elementor to the Pro version, because it has all the options we need to create a WooCommerce store, and you also need the Ocean WP theme, which is free, as well as the WooCommerce plugin.
Online store - creation
You need to create a new page and name it shop or whatever you want, in this example it will be called My Shop, then in the theme settings, in the options Content Layout you need to set to 100% Full Width, as well as to turn off the margins and click on Edit with Elementor.
Once the page editor opens in Elementor, we start creating the page. We start by adding the title, which we style under the option Style, by changing its color, font size and everything else as desired, adding spacing and a text editor and getting a title section, which we can save as a template and it currently looks like the image below.
After we've done that, it's time to start adding WooCommerce elements. We find the code of the elements Woo Products element and add it to the page. By default, there are 4 products in 4 columns, and we will change it according to how many products we have and how many columns (can be set from 1 to 6) we want.
In order to set which products we want to show last, we change things under the option Content, at the part Query. We can choose the last products by default or choose them manually, then we can choose under the author, in this example specifically because it is music, but the author can be a producer, for example. then by product categories, by tags, by filters and the like. It's up to you to choose. Under option Advanced you can change margins, spacing, background, borders and more.
After we have done that, we save the page and go to the control panel. There at the WooCommerce plugin, we create products and set the categories, price, tags and whether they are separated or not.
By clicking on the stars, we will choose that the product will be highlighted and if we have set to display highlighted products in the section, all the products that we have activated the star will be displayed.
The next thing we're going to create is a new 2-column section. We will separate the selected products from the others and make the so-called Call To Action section. We will add an image to one column and text to the other. We will add an option code image to one column Style, but when we add it, it is not displayed. To solve this, we will add a new element to the column Spacer, that is, the space bar. When we did that, the image was displayed, in order to set it to be seen in its entirety or as much as we want, it is necessary to adjust the dimensions of Spaser and the image will expand. Then we select the column again and style how the image will look. In the second column, we'll add a title, text, and a button that will call people to action. Of course, we will style this column as well, we will change the color, letters, font size, spaces, margins, background and other as desired under the option Style.
After we have created the CTA (Call To Action) section, the next thing we create is the sales section. In order to make our work easier, we add the already saved template of the title section, which we created at the beginning of the text, and just modify it so that they are not the same. We then add the Woo Products element and set which products we want to display in that section. Let's change what is needed under the Query option as in the previous time and get a section like in the picture below.
If we want to change the Add to basket button, so that it fits better with the rest of the page, we need to go to the control panel, then to Customize and we click on the page of our store and after that on the option Custom CSS/JS. There we type a short CSS code to modify the buttons by targeting specific WooCommerce tags such as ul. products and li.product, and use them to style the buttons.
