General Demo 2 – Demo Notes

Index of notes:

Product image

Options to change image width and file size or resolution are marked here:

In case the image has unnecessary space left next to it, you can adjust the width of its parent column:

Adjust the size of thumbnails and gap between them here:

Please keep in mind that the images for the gallery come from the ‘Product Gallery’ section in your product settings (screenshot below). Even if you have product variations with images, you still need to add images in your product gallery for them to show up in the gallery element.

3. Best seller badge

Please note, you need to be familiar with the general concept of woocommerce global attributes for the following. You can refer to woocommerce documentation on this topic here.

To generate the badges a global woocommerce attribute was added called Special badge and it was given 3 terms: Bestseller, New Release, Trending. You can find this attribute in wp-admin > products > attributes > Special badge.

More badge terms can be added or unnecessary ones can be deleted.

Each of the demo products have been assigned a ‘Special badge’ attribute term.

In the table the badges are printed out via an Attribute element placed after the Title element.

In the settings of this attribute element common style properties that need to be applied to all the terms like font-size, font-color, etc are added in the ‘Style for Terms’ section. Any changes you make in this section will be applied to all the terms. See screenshot of this ‘Style for Terms’ section in the settings of the Attribute element:

While we have given all the terms common styling using the Style for Terms section, we also want to give each of the terms some unique styling – different background color and font color. For this, we can use the ‘Custom term labels’ section. This section will list out all the attribute terms and allow you to modify the term text or change its styling.

In the below screenshots the Bestseller term is being given a specific color.

In this way, you can conveniently control the general styling for all the Special badge attribute terms while also giving each of the terms a unique background color as well.

4. Tag list

To turn off the links or change the style, please see:

5. Property List

Add custom icons

You can add your own custom icons to the property names through the Media Image element. In the following screenshot the Icon element in the first property has been removed and a Media Image icon is put in its place.

Set condition for the property to be displayed or not

You may want to hide some properties based on certain conditions like whether the product has the property or not. Use the Condition settings of the property for this.

6. Variation Dropdown

The Cart Form element is being used to show the variation dropdowns.

By default the Cart Form element will print out the cart form from the single product page inside the product table. The Cart Form element lets you hide any of its inner elements. In this case we are choosing to display only the Availability message and Variation attribute dropdowns.

Please keep in mind, in the settings of the Price element you need to check ‘Switch price based on selected variation’ to make it sync with the Cart Form element.

7. Phone design

Duplicate laptop column elements

For the phone view, we are using the same elements as the laptop view. In fact these elements were simply duplicated from the laptop columns section and dragged to the phone columns section.

They have been placed in a single column instead of 3 separate columns. Also, we have placed just 1 element per row for a neat presentation.

Adjusting gap between column’s inner rows

We have also adjusted the gap between the columns rows to create more space between the rows for neatness. To adjust column inner row gap, open the settings of the row, and change the margin-top or margin-bottom.

The following screenshot highlights the settings button for the 2nd row, containing the Gallery element.

Here we have opened the settings for that row, and in its ‘Style for Row’ settings we can see the ‘Gap above’ and ‘Gap below’ options.

(In previous versions of the plugin this used to be adjusted in the ‘Margins’ option)

Adjust the Property List columns

The Property List element is a duplicate from the laptop column, but this time in its settings we changed the ‘Number of columns’ to ‘2 columns’. Screenshot from the settings of the Property List element in the phone columns:

Adjusting gap between product rows

Also gap between the entire product rows has been increased on phones by going to table settings > style > phone style > cells > padding > 40px 0 40px 0. You can adjust this padding to increase or decrease the gap between the product rows.