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:

Featured Image

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

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

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

Please, mind the space between width and height.

Permalink

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

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:

Description

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

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:

Attributes

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

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

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:

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

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.

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:

5. Inside this div add a text with attribute:

6. 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

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:

2. Inside the Form add a div with attribute:

3. 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)

4. 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

Product Images

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

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

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:

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:

That will act as thumbnails to change the slide

Product Tabs

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

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.

Price

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

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:

Rating

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

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 ⭐⭐⭐⭐)

Total Sales

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

Reviews Count

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

Featured

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

On Sale

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

SKU

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

Date & Time

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

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:

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

As Example if you set the attribute:

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:

and

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:

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

As Example if you set the attribute:

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:

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

Product Dimensions

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

• Length

• Width

• Height

• Weight

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:

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

For example to show only first 3 categories add:

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:

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

For example to show only first 3 tags add:

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

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

Author Links

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:

to create a space for the next post and

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:

Featured Image

On images or divs you can add instead the attribute:

Excerpt

If you want on texts you can add the attribute:

Permalink

On Links instead you can add the attribute:

Upsells and Related

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:

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

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