Single Product Page Elements

These are all the elements that you can add inside a Single Product Page, a Template for a Single Product Page or a Specific Product Page. How to set pages here.

Title

The Title of the product can be added either to text elements or to link elements, if you use the latter it will also automatically link to the product page.

Add the attribute:

itemtitle

Copy Title

The featured Image is the main image attached to a product, you can use the featured image on Images or any element as Background Image (don't forget to add a placeholder image and stylize it, the archive image will follow that image style). If you add the attribute to a link, it will also directly link to the product page.

To create a futured image just use the attribute

itemfeatured-image

Copy Featured Image

to change the size of the featured image, you can add the following optional attribute:

dimensiondimension of the image

As for valid dimension you can use: full, medium, thumbnail, larger or width, height

For example to set a fixed size image of 300x500 add the attribute

dimension300, 500

Please, mind the space between width and height.

The permalink is simply the url to the current product page. Just add the attribute on a link element of any type:

itempermalink

Copy Read More Button

Content

The content of your product can be set in WordPress backend. It can be added to any item, but for better styling is way better to add the following attribute on a RichText block:

itemcontent

Copy Product Content

Description

The description of the product can be added on RichText elements just adding the attribute:

itemdescription

Copy Description

Keep in mind that if you use the Product Tabs, the product description will be automatically added in the first tab

Short Description

The short description of the product (just as a reminder, the short description is a short summary of a product, can be added on any text element just adding the attribute:

itemshort-description

Copy Short Description

Attributes

For each Product you can assign various attributes, like color, size, etc..

This element can be added on any text using the attribute:

itemattributes

Copy Product Attributes

This text will be duplicated for each attribute you have set and will show in each of them a text in the format Attribute name: values as an example: Color: Red, Blue

So as example if in your product you have set the attributes: Color, Size, Material, you will get 3 texts like:

Color: red blue

Size: M, L

Material: Glass

Attribute

For each Product you can assign various attributes, like color, size, etc..

This element can be added on any text using the attribute:

itemattribute
attributeslug of the attribute

This text will be duplicated for each value of the attribute you have chosen, so for example if you set:

itemattribute
attributecolor

And in your product you have 3 values like Red, Blue, White you will get 3 texts.

On each text also the adapter adds an html attribute called data-attribute-slug with the slug of the value, so you can further customize it with custom css.

Copy Product Attribute

Note that the attribute is inserted in the element with class Attribute Value, is wrapped inside a flex just for style! Don't forget to change the value color to your actual needs

Add To Cart

By default in WooCommerce there are 4 different types of products: "Simple", "Variable", "External" and "Grouped" If you are pretty sure that your store will have only simple or external products, and for all other types of product you want to use the default add to cart of WooCommerce, you can just add the add to cart of webflow without any attribute (just enable quantity in the settings tab ⚙️ if is disabled).

If instead you don't want to use those ugly and old selects and want to use variation swatches you can follow this steps:

  1. Add an Add to Cart Element;
  2. Enable quantity if not enabled;
  3. Set the option list to display none (it doesn't get exported by Webflow, so just hide it)
  4. Add a div with the attribute:
itemvariations
  1. Inside this div add a text with attribute:
itemvariation-title
  1. In the same div add a label without attribute, this label will get either the background image if set in WordPress or the name of the variation

This structure is pretty dynamic, as an example if you have a product with 2 variation properties like: Color and Size, with respective values of (Red, Blue) and (M, L, XL)

the Div where you have the attribute will get duplicated 2 times once for Color and once for Size, while the div inside the one with the attribute will get duplicated 2 times for Color and 3 times for Size, creating a structure that should be like:

so keep it in mind when you create the design, use flex or grid thinking about this structure.

Also the label can have 3 states that are controlled by combo classes. So you can further customize it, by default the label will have no combo class, when the label gets clicked it will get the combo class "selected", while if the variation can not be bought it will have the combo class "disabled"

⚠️⚠️⚠️

To get background images you have to create attributes for variation in Products > Attributes menu

Copy Add To Cart

Grouped Add to Cart

A Grouped product has a totally different add to cart button, create it only if you are thinking of using this kind of products in WooCommerce, otherwise, skip it!

If you need it, follow these steps:

  1. Add a Form and on the Form Block add the attribute:
itemgrouped
  1. Inside the Form add a div with attribute:
itemwrapper
  1. Inside the div add the following elements:

    • A label (will be the product name)
    • An Input type number (will be the quantity)
    • A checkbox (will be showed only if the product can be sold separately)
  2. Optionally inside the same div you can add:

    • The product price on a text with attribute:

      itemprice

    • The product original price on a text with attribute:

      itemregular-price

    • The link to the product with attribute:

      itemlink

The result in WooCommerce should be something like this

Copy Grouped Add to Cart

Product Images

In WooCommerce you can associate multiple images to your product and you can show them on your theme just using the attribute:

itemproduct-images

This attribute is very very flexible and can be used in a lot of ways.

You can add it to:

  • A Slider: in this case each image will create a new slide;

  • A Div: in this case for each image of the product the div will be duplicated and will get as background image the respective image;

  • An Image: in this case for each image of the product the image will be duplicated and will get as image the right image;

  • A Lightbox Link: in this case the image in the lightbox link will not be modified, but the lightbox will be linked to all the product images;

  • A Lightbox Link that is placed inside a Collection List Wrapper: in this case you will have multiple images with lightboxes that are linked together;

Product gallery is simply an example combination of Product Images, as you have read before, Product Images attribute is pretty flexible and can be used on different type of elements with different behaviours. It is composed by a slider that has attribute:

itemproduct-images

Inside the slide there is a lightbox link without attributes ("Remember to link the lightbox to a media to make it work). And below the slider there is an image with attribute:

itemproduct-images

That will act as thumbnails to change the slide

Copy Product Gallery

Product Tabs

To create Product Tabs use the Tabs element and add the attribute:

itemtabs

Only the first tab will be considered, so you can delete all the others, inside the first tab content add a RichText element. The tabs will be created by WooCommerce and filled with different content.

Copy Product Tabs

Price

Is the price of the product, you can add it to text elements using the attribute:

itemprice

Copy Price

Regular Price

If the product is on sale, the regular price is the full price, you can add it to text elements using the attribute:

itemregular-price

Copy Regular Price

Rating

Rating is an integer number that goes from 0 to 5. You can use the attribute:

itemrating

on any element you want, it will be repeated automatically based on the rating. (e.g if you put this attribute on a star image, and you have a rating of 4 for that product you will get 4 star images ⭐⭐⭐⭐)

Copy Element

Total Sales

Is the number of sales made for that product, you can use it on text elements using the attribute:

itemtotal-sales

Copy Reviews Count

Reviews Count

Is the number of reviews made for that product, you can use it on text elements using the attribute:

itemreview-count

Copy Reviews Count

You can add the following attribute on every element you want, and it will be showed only the product is set as featured

itemfeatured

On Sale

You can add the following attribute on every element you want, and it will be showed only the product is on Sale

itemon-sale

SKU

The sku is an identification of certain product you can add it to texts, using the attribute:

itemsku

Copy SKU

Date & Time

To add an indicator about the date or the time of pubblication of the product, you can add respectively the following attributes:

itemdate

Copy Date


itemtime

Copy Time

The date and time format can be changed globally from WordPress Settings > General, respectively in sections named Date format and Time Format. However if you need to change the format locally for your current design needs you can add the optional attribute:

formatdate/time format

For the date/time format, WordPress uses the native PHP function, this the complete format table.

As Example if you set the attribute:

formatF j, Y, g:i a

The date will be in the format: March 10, 2020, 5:16 pm

To/From Sale Date

If you have scheduled a sale in the feature you can add some visual indicators for the starting and ending date of the sale using respectively:

itemfrom-sale-date

and

itemto-sale-date

The date and time format can be changed globally from WordPress Settings > General, respectively in sections named Date format and Time Format. However if you need to change the format locally for your current design needs you can add the optional attribute:

formatdate/time format

For the date/time format, WordPress uses the native PHP function, this the complete format table.

As Example if you set the attribute:

formatF j, Y, g:i a

The date will be in the format: March 10, 2020, 5:16 pm

Main Category

Thanks to the Udesly plugin, you can select a Main Category attached to each product, you can create with these feature a simple tag button that links to the main category of the product, just add on a link the following attribute:

itemmain-category

Don't forget to set up the main category in each product, it's not automatic.

Copy Main Category

Product Dimensions

Product can have different dimensions associated to it, they can all be added on text elements, using respectively the attributes:

  • Length
itemlength
  • Width
itemwidth
  • Height
itemheight
  • Weight
itemweight

Categories

This is the list of categories of the product add it on a link element, this element will be repeated once for every category that is attached to the product. To use it use the attribute:

itemcategories

Optionally you can also add the following attribute to limit the number of categories to show:

limitnumber of categories

For example to show only first 3 categories add:

limit3

Copy Post Categories

Tags

This is the list of tags of the product add it on a link element, this element will be repeated once for every category that is attached to the product. To use it use the attribute:

itemtags

Optionally you can also add the following attribute to limit the number of categories to show:

limitnumber of tags

For example to show only first 3 tags add:

limit3

Copy Post Tags

Author

Every product has one Author attached to it, an author has a lot of data that can be customized, let's see it in action! You will find the elements dived on the element they can be used on: Images, Texts and Links.

Author Images

Actually the only Author data that can be used on images is the author Avatar, WordPress uses a system called Gravatar for its avatars, your authors can change the profile image creating an account on Gravatar using the same email. To show it, use an image or a div for background image with the attribute:

  • Avatar
itemavatar

Copy Avatar

Author Texts

There are a lot of datas that can be used on text elements, they are pretty autoexplicative, just add the attributes you want to use on text elements:

  • Display Name

    itemauthor-display-name

    Copy Display Name

  • Nickname

    itemauthor-nickname

    Copy Nickame

  • First Name

    itemauthor-first-name

    Copy First Name

  • Last Name

    itemauthor-last-name

    Copy Last Name

  • Description

    itemauthor-description

    Copy Author Description

With Links instead we can use the link to the author page (that is the archive page with all the products written by the author) and his social links. You can add social links in WordPress under the Users panel

  • Email

    itemauthor-email

    Copy Author Email Link

  • Facebook

    itemauthor-facebook

    Copy Author Facebook Link

  • Linkedin

    itemauthor-linkedin

    Copy Author Linkedin Link

  • Youtube

    itemauthor-youtube

    Copy Author Facebook Link

  • Twitter

    itemauthor-twitter

    Copy Author Twitter Link

  • Dribble

    itemauthor-dribble

    Copy Author dribble Link

  • Instagram

    itemauthor-instagram

    Copy Author instagram Link

  • Phone Number

    itemauthor-phone

    Copy Author phone Link

Previous and Next Product

Sometimes it can be usefull to enhance your users engagement to add datas for next and previous products.

To create them, just add a div with respectively:

itemnext-product

to create a space for the next post and

itemprev-product

to create a space for the previous post.

Inside this divs you can add the following elements:

Title

On texts you can add the attribute:

itemtitle

On images or divs you can add instead the attribute:

itemfeatured-image
Excerpt

If you want on texts you can add the attribute:

itemexcerpt

On Links instead you can add the attribute:

itempermalink

Copy Next and Prev Products

Upsells are products that are usually bought at the same time with the current product, WooCommerce doesn't have a smart recommendation system, instead you have basically to define the upsells products, for each product. (Yes, manually for each product 😯😯😯 How?). While related products are automatic but not modifiable, so use them at your own risk ☠️

Upsells and Related cannot be paginated, but you can define the number of Products to show in WordPress following the path: Udesly > Settings > WooCommerce > Related and Upsells.

To create an Upsell list add the following attribute on a Collection List Wrapper:

wcupsells

Copy Upsells List

for related instead add the following attribute on a Collection List Wrapper:

wcrelated

Copy Related List

Inside Collection List Item you can add all of the elements that you find in the page:

if you want, you can just copy a sample card and paste it inside the Collection List Item

Copy Simple Product Card