In this tutorial learn how you can build the WooCommerce single and archive product page templates using Elementor’s WooCommerce Builder.
You’ll learn how to:
✓ Use WooCommerce with Elementor
✓ Create a custom design for your products and archive
✓ Save a single and archive template with conditions by category
hey everyone it’s Cassie from Elementor
if you have an online store or are
considering opening one you probably
know Luca Merce a store building system
on WordPress WooCommerce is the most
widely used platform for building online
stores it’s a free plugin the basic
version and has hundreds of extensions
now the basic product page of
WooCommerce looks like this you can see
the product image product name and short
description reviews price a button to
add items to the shopping cart related
products etc the page gets its design
from the template you’re using and the
option to change the design is limited
in this video you’ll learn how to create
a product page using Elementor before
you start you’ll need to make sure you
have the most updated WooCommerce
installed in your site and that you’ve
added several products in the WordPress
dashboard go to element or my templates
and add a new template select single
product and click create template here
in the template library you can choose
from several different styles for a
single product page let’s have a look at
one of them
back to the library close the template
window to create a product page step by
step in the editing panel we see the
special widgets for the product such as
product title product image ratings tabs
and more let’s start by creating a new
section with two columns add a product
title widget and above it add
breadcrumbs that shows the path to the
specific product now drag an image
product into the left column and add
some padding to both columns to keep
them slightly apart below the title
dragon product rating
add a short description widget and give
it some space on the top let’s continue
with a product price we can format it
replace the default font with a thicker
weight and change the color to black add
a minus margin okay now we can add an
Add to Cart widget note that it comes
with quantity which is the amount of
products you add to a shopping cart
change the font size and color
before we move on just a quick reminder
subscribe and like our youtube channel
to see more tutorials like this and
continue to take your skills to the next
level below the Add to Cart button add
product meta this is data about the
product the product category and its
serial number the SKU now back to
editing the image add a bit of border
radius and distance between the main
image and the products photo gallery
let’s add a new section of two columns
on the left will insert Product data
tabs including description additional
information and reviews and on the right
at a product related to keep the columns
evenly spaced
we’ll use copy paste style to copy the
formatting values add a new section this
time with a gradient color drag an up
sales widget into the section and add
padding inside the section BAM you’re
done designing the page of course you
can use other widgets to promote your
product like share buttons or call to
actions and more we can also change the
display of the single and display it
with another one of the products we have
go to the eye icon below and click
settings under preview settings choose
another page for this example and apply
and review and now you see the product
that you chose click on publish to
publish the archive and add conditions
now by default the single will affect
all product pages on the site or you can
select a specific category of products
click on publish and your single product
is live to complete the task design a
catalog page of products that will
affect all the products on the site or
by category
so first go back to Elementor my
templates go to product archive and add
an archive click on create template
taking you to the template library
window select an existing template or
create one notice that in the main panel
we have two archived products archive
and archive product first we add a title
and of course you can design it align it
to the middle or to the sides change the
color and all the other options you
already know an element or now let’s
drag in an archived product in order for
us to adapt it to the design we already
did on the product page go back to the
product page redesigned and right click
copy and go back to the archived product
and right click paste to style here you
can easily get the same design okay just
a few small changes set the number of
columns to 4 under source choose latest
products and then under product category
choose rings this way only the ring
category will appear
you can also slide on pagination this is
really helpful when you have many
products advanced filtration and the
numbering of the products on each page
in the style tab you can design a
distance between the columns and the
rows adjust the colors fonts and more
align everything to the middle and click
publish add conditions and include all
the archive pages we have on the site
change it to a specific category display
and again click publish and now our
archive page is ready you can see that
only products from the rings’ category
are displayed on the page click on one
of the products and go to the design of
the product page there you go now you
finish designing your custom WooCommerce
template
thanks for watching don’t forget
subscribe to our YouTube channel
you
