Display of WooCommerce Product fields

WooCommerce products are Custom Post Type (CPT) items. Advanced Views allows you to display their default fields such as Post Title (Product Name) or Featured Image (Product Image) using the Post fields group. In addition to these standard fields, Products have extra fields, like Price, Product Gallery, Weight, and more, which are also supported by Advanced Views.

Editor (built-in)

Used to manage field values in the admin area.

Click to enlarge.

Template (by Advanced Views)

Used to configure display of the field values on front.

Click to enlarge.

After assigning target fields to the template, the plugin automatically generates markup for them and a unique shortcode. You can specify labels and customize the generated Twig template to create a specific layout.

To display the field values, simply paste the generated shortcode in the desired location. The plugin will automatically retrieve the current values and render the template.

Front look (by Advanced Views)

The output below is styled as rows and includes labels for demonstration purposes. You can customize the markup as needed and combine fields from different groups.

Product name (post title)

BMW x5

It’s a Demo product with images from Pixabay.

Product short description (post excerpt)

BMW X5 – demo product

Product categories

Product categories with extra info (Pro)

Name

BMW cars

Slug

bmw-cars

Description

This category is about BMW cars

Name

Cars

Slug

cars

Description

This category is about cars

Product tags

Product tags with extra info (Pro)

Name

Sport cars

Slug

sport-cars

Description

This tag is about sport cars

Price

55000

Regular price

65200

Sale price

55000

SKU

xDrive40i

Stock status

instock

Weight

2495

Length

493

Width

198

Height

172

Product reviews (comments)

Maxim Akimov
Nice car!

Product reviews with extra info (Pro)

Author Email

Author Name

Maxim Akimov
Nice car!

Date

November 29, 2023

Status

approved

User

1

Product reviews with slider (Pro)

In the Pro version, in addition to displaying values from meta fields, you can also create   custom Gutenberg blocks.

The Masonry layout is achieved using the Macy.js library, while the Lightbox functionality is implemented with the LightGallery library. The InlineCarousel feature also relies on the LightGallery library.

The slider is created using the Splide library.

Advanced Views Pro takes care of automatically creating basic configurations for these libraries and loading them only on pages where they are needed. Within the target View, you have the flexibility to configure any instance using the available options for each respective library.