BANC

Selected Products Block

The Selected Products Template defines the HTML structure and content displayed within the Gutenberg editor for the Selected Products Block. It is responsible for displaying a heading and a list of selected WooCommerce products.

Content Editor Fields

Heading

  • Description: The main heading text displayed above the products list.
  • Usage: Use this field to provide a clear title for the section.
  • Optional: If no heading is provided, this element will not be displayed.

Products

  • Description: A list of WooCommerce products to be displayed. Each product will display its name, thumbnail, price, and SKU.
  • Usage: Use this field to select the products to display.
  • Mandatory: This field is mandatory. If no products are selected, the block will not display anything.

Example Usage:

Steps:

  1. Add the block: Insert the Selected Products Block into your page or post.
  2. Fill the fields:
    • In the block settings, fill the "Heading" field.
    • In the block settings, select the products in the "Products" field.
  3. Save the Block: Your Selected Products block is now ready for display!

Result:

When properly configured, the Selected Products Block will render a section with a heading and a list of selected WooCommerce products. Each product will display its name, thumbnail, price, and SKU.

selected-products with image

Preview in the editor (body):

selected-products in body

Customization:

You can customize the Selected Products Block display in the following ways:

  • Content Customization: Change the heading text directly within the block settings.
  • Products Customization: Change the products in the "Products" field.
  • Product details Customization: Change the product details directly within the WooCommerce product settings.

Benefits:

  • Clear Structure: The template provides a simple and organized HTML structure.
  • Dynamic Content: The template allows for dynamic content to be inserted.
  • Easy to Use: It is simple to configure for the end user.
  • Multiple products: You can add multiple products.
  • WooCommerce: It display woocommerce products.