![product builder style product page woocommerce product builder style product page woocommerce](https://wpc-14bd3.kxcdn.com/wp-content/uploads/edd/2019/05/screenshot-2-640x640.jpg)
Input the below CSS and you can change the colors according to your own design. Start editing the Product Data Tabs then click on the Advanced tab and scroll down to Custom CSS. To do this, we’re going to need a little bit of custom CSS again. However, let’s change the styling of the review submission button. There’s not much styling required here, because it is inheriting some styles from the Hello Elementor theme. This is often handled by product tabs.Ĭreate a new row beneath the top section and drag the Product Data Tabs module from the Elementor builder into the row to insert it. One further thing I did was to set the border radius of the quantity selector to 0, which you can do within the Style tab for Quantity.Įvery product needs to display some basic information like a product description and reviews if they are available. The background color of the button and the border radius of the button using the below settings: Next on the Add To Cart module we will change a few things. We then need to do the same for the Product Price and Add To Basket modules by clicking on each module and altering the text color. For the Product Price I’m going to use a dark grey to contrast against the title, so input this hexcode if you are following along – #54595f Firstly, let’s change the font and color of the Product Title so that it matches those used in the Hello Elementor theme. The content of these modules is fine, so we are going to be working in the Style tab.
![product builder style product page woocommerce product builder style product page woocommerce](https://i.pinimg.com/736x/ed/66/59/ed66590e9344937d7900bdf31870df5d.jpg)
Styling modules with Elementor is easy, all that you need to do is click on the module and the editor should open up the styling options to the left. This is perfectly functional, but as with the above section, we want to style it so that it matches the styling of our Hello Elementor theme. Search for these three modules in the Elementor builder, then drag and drop them across to place them in the order listed above. In the right hand column, we are going to be adding the Elementor modules for Product Title, Product Price and Add To Cart.
PRODUCT BUILDER STYLE PRODUCT PAGE WOOCOMMERCE CODE
To do this, we need to apply a small line of custom CSS, which can be inserted by going to Advanced > Custom CSS and pasting the below code in. This looks functional and does the job, but let’s style the sales badge so that it matches the Elementor Hello Theme being used for this tutorial. Elementor has a built in Product Images module that allows us to insert this in our template.Ĭreate a simple 2 column row and insert the Product Images module in the left column. Product image galleryĮvery WooCommerce product has a product image, or image gallery, showing pictures of the product to customers.
![product builder style product page woocommerce product builder style product page woocommerce](https://kolmite.com/wp-content/uploads/2019/01/Códigos-cortos-de-año-actual-y-derechos-de-autor-768x249.png)
Click ‘Create New’ then select Single Product as the template you wish to create.Īs we are going to be building this template from scratch, there is no need to insert any blocks, exit the next box that appears until you reach the standard Elementor builder screen for a new page. The first step in the process is to create a new Elementor template by going to Templates in the WordPress dashboard. Styling and customising WooCommerce used to require PHP and CSS for every little tweak, but as tools like Elementor develop and become more sophisticated, more and more options become available for taking control of the way your store looks and works. There are many built in Elementor WooCommerce modules that allow you to insert blocks of WooCommerce content or functionality, and style them using the Elementor builder. Elementor is one of the leading WordPress page builders on the market, but did you also know you could build WooCommerce stores using it?