Gutenberg Blocks
Add to Wishlist Block
Section titled “Add to Wishlist Block”Requirements
Section titled “Requirements”- WordPress 6.4+ (for auto-insert)
- Block editor enabled
- WooCommerce installed
Adding the Block
Section titled “Adding the Block”- Click ”+” in block editor
- Search “Add to Wishlist”
- Insert block
Block Settings
Section titled “Block Settings”| Setting | Options | Default |
|---|---|---|
| Display Type | Button, Icon | Button |
| Alignment | Left, Center, Right, Wide, Full | Left |
| Spacing | Margin, Padding | - |
Product Context
Section titled “Product Context”Works on:
- Product pages
- Product templates
- WooCommerce block-based layouts
Auto-Insert
Section titled “Auto-Insert”Configuration
Section titled “Configuration”Location: Wishlist > Settings > Rendering Method
| Setting | Options | Description |
|---|---|---|
| Method | Auto, Blocks, Hooks | Rendering method |
| Auto-insert blocks | Enabled/Disabled | Automatically place buttons |
Insert Positions
Section titled “Insert Positions”| Location | Position |
|---|---|
| Single product | After Add to Cart Form block |
| Product loops | After Product Button block |
Rendering Methods
Section titled “Rendering Methods”| Method | Block Themes | Classic Themes |
|---|---|---|
| Auto | Block hooks | Action hooks |
| Blocks | Block hooks | Block hooks |
| Hooks | Action hooks | Action hooks |
Template Customization
Section titled “Template Customization”Block Themes
Section titled “Block Themes”- Go to Appearance > Editor
- Navigate to Templates > Single Product
- Add/move “Add to Wishlist” block
- Save template
Classic Themes
Section titled “Classic Themes”- Manually add block to pages/posts
- Or use shortcode for dynamic placement
- Or use action hooks
CSS Classes
Section titled “CSS Classes”/* Block container */.wp-block-webtriad-awl-add-to-wishlist { }
/* Button inside block */.wp-block-webtriad-awl-add-to-wishlist .webtriad-awl-button { }
/* Icon display */.wp-block-webtriad-awl-add-to-wishlist .webtriad-awl-icon { }Block vs Shortcode
Section titled “Block vs Shortcode”| Use Block When | Use Shortcode When |
|---|---|
| Using block editor | Using classic editor |
| Need visual editing | Need manual product IDs |
| Using block theme | Working in widgets |
| Need spacing controls | Adding to PHP templates |