Elementor is one of the leading WordPress page builders on the market, but did you also know you could build WooCommerce stores using it?
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. Pretty awesome right?
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.
Creating an Elementor template
The first step in the process is to create a new Elementor template by going to Templates in the WordPress dashboard. Click ‘Create New’ then select Single Product as the template you wish to create.
As 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.
Product image gallery
Every WooCommerce product has a product image, or image gallery, showing pictures of the product to customers. Elementor has a built in Product Images module that allows us to insert this in our template.
Create a simple 2 column row and insert the Product Images module in the left column.
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. 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.
selector .onsale {
background-color: #cc3366 ;
}
Product title, price and add to cart
In the right hand column, we are going to be adding the Elementor modules for Product Title, Product Price and Add To Cart.
Search for these three modules in the Elementor builder, then drag and drop them across to place them in the order listed above.
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. 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.
The content of these modules is fine, so we are going to be working in the Style tab. Firstly, let’s change the font and color of the Product Title so that it matches those used in the Hello Elementor theme.
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
Next on the Add To Cart module we will change a few things. The background color of the button and the border radius of the button using the below settings:
- Set the content to ‘Add to cart’
- Set the background color to ‘#cc3366’
- Set the border radius to 0
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.
Setting up product tabs
Every product needs to display some basic information like a product description and reviews if they are available. This is often handled by product tabs.
Create a new row beneath the top section and drag the Product Data Tabs module from the Elementor builder into the row to insert it. There’s not much styling required here, because it is inheriting some styles from the Hello Elementor theme. However, let’s change the styling of the review submission button.
To do this, we’re going to need a little bit of custom CSS again. Start editing the Product Data Tabs then click on the Advanced tab and scroll down to Custom CSS. Input the below CSS and you can change the colors according to your own design.
.woocommerce #review_form #respond .form-submit input { background-color: #cc3366; color: #fff; border-radius: 0px; }
Product short description
O.k, so we have a nice simple looking design so far, but it looks a little bare. Adding a Product Short Description module to the top section will help pad this out and give a bit more context.
Search for the WooCommerce Short Description module, then drag and drop it beneath the Product Price and above the Add To Cart Module.
There’s no styling required here currently as it’s inherited the styles from Hello Elementor.
Product upsells
Increasing your average basket value is key for any WooCommerce store, which is why it’s good that Elementor provides a Product Upsells module for you to easily insert a customize on your store.
Search for the Product Upsells module in the Elementor builder and insert it in a new row beneath the Product Data Tabs.
As you can see, this requires a little bit of customisation to match the rest of our design. Start editing the module and make the following changes:
- Set the Title color to – #cc3366
- Set the Heading color to – #cc3366
- Set the Price color to – #54595f
- Set the Button background color to – #cc3366
- Set the Button color to – #fff
- Set the Button border radius t0 – 0
The end result will look like the below. You can change the color hexcode as you see fit if you are using this tutorial as a jumping off point for your template.
To finish up, make sure you Save Draft or Publish your template. For Display Conditions you will want to make sure that Products is selected. If you found this video useful, check back soon for the video tutorial.
